|
21.7 彈出式日歷選擇功能
彈出式日歷選擇功能是Web窗體頁上一種非常實(shí)用的功能。用戶從日歷控件中選擇日歷，從而保證了用戶輸入日歷格式的有效性。
實(shí)現(xiàn)目標(biāo)
本實(shí)例介紹使用ASP.NET AJAX中的CalendarExtender控件為文本輸入框?qū)崿F(xiàn)彈出式日歷選擇的功能。
技術(shù)實(shí)現(xiàn)
創(chuàng)建AjaxCalendar.aspx頁面
在Sample_21應(yīng)用程序中創(chuàng)建AjaxCalendar.aspx頁面，并在該頁面上創(chuàng)建一個(gè)ScriptManager控件、一個(gè)UpdatePanel控件、一個(gè)TextBox控件和一個(gè)CalendarExtender控件。這些控件的ID屬性的值分別為sm、up、tbValue和ceValue。其中，sm和up控件共同提供無刷新的Web環(huán)境。tbValue控件供用戶輸入值。當(dāng)用戶鼠標(biāo)單擊tbValue控件時(shí)，ceValue控件將彈出一個(gè)可以選擇日期的日歷控件。AjaxCalendar.aspx頁面的部分HTML設(shè)計(jì)代碼如下：
<%@ 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頁面設(shè)置為Sample_21應(yīng)用程序的起始頁面，并運(yùn)行該應(yīng)用程序。鼠標(biāo)單擊AjaxCalendar.aspx頁面中的輸入框，將彈出一個(gè)可以選擇日期的日歷控件，如圖21-13所示。
 |
| 圖21-13 AjaxCalendar.aspx頁面實(shí)現(xiàn)彈出式日歷選擇功能 |
|
