|
21.7 弹出式日历选择功能
弹出式日历选择功能是Web窗体页上一种非常实用的功能。用户从日历控件中选择日历，从而保证了用户输入日历格式的有效性。
实现目标
本实例介绍使用ASP.NET AJAX中的CalendarExtender控件为文本输入框实现弹出式日历选择的功能。
技术实现
创建AjaxCalendar.aspx页面
在Sample_21应用程序中创建AjaxCalendar.aspx页面，并在该页面上创建一个ScriptManager控件、一个UpdatePanel控件、一个TextBox控件和一个CalendarExtender控件。这些控件的ID属性的值分别为sm、up、tbValue和ceValue。其中，sm和up控件共同提供无刷新的Web环境。tbValue控件供用户输入值。当用户鼠标单击tbValue控件时，ceValue控件将弹出一个可以选择日期的日历控件。AjaxCalendar.aspx页面的部分HTML设计代码如下：
<%@ Page Language="C#" AutoEventWireup="true"
StylesheetTheme="Aspnet3DBWeb"
CodeFile="LinqProcedure.aspx.cs" Inherits="LinqProcedure" %><%@ Page Language="C#" StylesheetTheme="Aspnet3DBWeb" %>
<head runat="server"><title>弹出式日历选择功能</title></head>
<asp:ScriptManager ID="sm" runat="server" />
<asp:UpdatePanel ID="up" runat="server"><ContentTemplate>
<asp:TextBox ID="tbValue" runat="server">
</asp:TextBox>
<ajaxToolkit:CalendarExtender ID="ceValue"
runat="server" TargetControlID= "tbValue"
PopupPosition="BottomLeft" Format="yyyy-MM-dd">
</ajaxToolkit:Calendar Extender>
</ContentTemplate></asp:UpdatePanel> |
把AjaxCalendar.aspx页面设置为Sample_21应用程序的起始页面，并运行该应用程序。鼠标单击AjaxCalendar.aspx页面中的输入框，将弹出一个可以选择日期的日历控件，如图21-13所示。
 |
| 图21-13 AjaxCalendar.aspx页面实现弹出式日历选择功能 |
|
