2.7 弹出式日历选择输入的PopupControl控件

和Calendar控件一样，ASP.NET AJAX Control Toolkit中的PopupControl控件也能够实现弹出式日历选择输入的功能。声明PopupControl控件的语法类似如下：

<ajaxToolkit:PopupControlExtender ID="pce" runat="server"

TargetControlID="TextBox控件"

PopupControlID="被弹出的控件"

Position="Bottom" />

另外，PopupControl控件包含多个常用属性，如TargetControlID、Position、OffsetX、OffsetY、PopupControlID等。具体说明如表2.7所示。

表2.7 PopupControl控件的常用属性及其说明

^属^性	^说^明
^{TargetControlID}	^{使用该控件的}^ASP.NET^{服务器端控件的}^ID^值
^{PopupControlID}	^{弹出控件的}^ID^属性的值
^Position	^{弹出控件与目标控件相对的位置，其值可以为}^Left^、^Right^、^Top^、^Bottom^或^Center
^OffsetX	^X^偏移量
^OffsetY	^Y^偏移量
^CommitScript	^{设置弹出控制的结果时执行的脚本代码}
^{CommitProperty}	^{目标控件的属性，弹出控件的值将设置为该属性的值}
^Animations	^{弹出控件时的动画}
^OnShow	^{显示控件时的动画}
^OnHide	^{隐藏控件时的动画}

PopupControlID属性指定被弹出的控件，往往是一个Panel控件。Position属性指定控件弹出的位置，它的值可以为Left、Right、Top、Bottom或Center。OffsetX和OffsetY属性分别指定控件弹出位置的偏移量。

注意：CommitProperty属性指定的值是目标控件的某一个属性，弹出控件的结果将作为该属性的值。CommitProperty属性的用法将在后续章节中进行介绍。

在下述代码实例中，PopupCalendar.aspx页面为TextBox控件（ID属性的值为tbInput）演示了弹出式日历选择输入的功能。PopupControlExtender控件的ID属性的值为pceInput，它弹出一个ID属性的值为pDate的Panel控件。其中，pDate控件放置了一个Calendar控件（ID属性的值为cDate），用户可以在日历控件中选择所需要的日期。

注意：为了不让用户感觉该页面的刷新操作，特意把cDate控件放置在UpdatePanel控件中。

<%@ Page Language="C#" StylesheetTheme="ASPNETAjaxWeb" %>

<head runat="server"><title>弹出式日历选择输入</title></head>

<asp:ScriptManager ID="sm" EnablePartialRendering="true"

runat="server"></asp:ScriptManager><br />

<asp:TextBox ID="tbInput" runat="server" SkinID="tbSkin"

Width="300px"></asp:TextBox>

<ajaxToolkit:PopupControlExtender ID="pceInput" runat="server"

PopupControlID="pDate" OffsetX="0" OffsetY="0" Position="Bottom"

TargetControlID="tbInput" ></ajaxToolkit:PopupControlExtender>

<asp:Panel ID="pDate" runat="server">

<asp:UpdatePanel ID="upDate" runat="server"><ContentTemplate>

<asp:Calendar ID="cDate" runat="server" BackColor="White"

BorderColor="Black" BorderStyle="Solid" CellSpacing="1"

Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="250px"

NextPrevFormat="ShortMonth" SelectedDate="2007-08-07" Width="330px"

OnSelectionChanged="cDate_SelectionChanged">

<DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333"

Height="8pt" />

<TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True"

Font-Size="12pt" ForeColor="White" Height="12pt" />

</asp:Calendar>

</ContentTemplate></asp:UpdatePanel>

</asp:Panel>

上述代码实例执行之后，当把鼠标放置在输入框中时，输入框的下方将显示一个日历控件，用户可以在该日历控件中选择所需要输入的日期，如图2.11所示。

图2.11 PopupControl控件演示弹出式日历选择输入的功能

然而，仅仅使用上述实例代码还不能获取用户选择的日期。为了把用户选择的日期显示在输入框中，特意为cDate控件添加了cDate_SelectionChanged(object sender,EventArgs e)事件。该事件调用pceInput控件的Commit()方法把用户选择的日期提交到其目标控件。

注意：虽然cDate_SelectionChanged(object sender,EventArgs e)事件把弹出控件的结果传递到输入框，但是要在输入框中显示该结果，则需要把ScriptManager控件sm的EnablePartialRendering属性的值设置为true，即及时更新输入框中的内容。

protected void cDate_SelectionChanged(object sender,EventArgs e)

{ ///将用户选择的日期提交给TextBox

///注意：ScriptManager控件的EnablePartialRendering属性的值设置为true

pceInput.Commit(cDate.SelectedDate.ToShortDateString());

}

</script>

【查看所有评论(0)条】