altas(ajax)控件(二十二)：帮助用户输入的面板控件PopupControl

[align=left]一、简介
Popupcontrol可以弹出任意类型的控件，不管是在服务器控件还是html控件。就是在某控件获取焦点时弹出另外一个控件，进行一些操作后，隐藏弹出的控件。[/align]
[align=left]二、属性说明

[/align]

[align=left]属性[/align]	[align=left]说明[/align]
[align=left]TargetControlID[/align]	[align=left]需要弹出的控件的id，一般为TextBox[/align]
[align=left]PopupControlID[/align]	[align=left]作为弹出控件的id，一般为Panel[/align]
[align=left]Position[/align]	[align=left]弹出控件的位置[/align]
[align=left]OffsetX/OffsetY[/align]	[align=left]弹出控件的位置与默认位置的相对坐标[/align]
[align=left]CommitProperty[/align]	[align=left]目标控件的客户端属性，这个属性是它的值在弹出窗口选择完值后要更新的属性，比如可以是TextBox客户端属性value（注：不是Text属性），即是<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>生成HTML标签<input type="text" name="textfield" value="aa">后的属性value。[/align]
[align=left]CommitScript[/align]	[align=left]提交后执行的脚本[/align]

三、实例
实例
1 打开vs2005，新建一个AjaxControlToolKit网站，命名为AjaxPopupControl
2 打开默认生成的Default.aspx页面，切换到窗体的设计视图
3 在页面中拽一个UpdatePanel,一个PopupControlExtender,一个TextBox和一个RadioButtonList控件
4 设置PopupcontrolExtender控件的属性，要求当文本框获得焦点时再其右侧弹出RadioButtonList控件，如下


<asp:TextBox ID="MessageTextBox" runat="server" Width="200" autocomplete="off" /><br /><br />


<asp:Panel ID="Panel2" runat="server" CssClass="popupControl">


<div style="border: 1px outset white; width: 100px">


<asp:UpdatePanel runat="server" ID="up2">


<ContentTemplate>


<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true"


OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">


<asp:ListItem Text="Walk dog" />


<asp:ListItem Text="Feed dog" />


<asp:ListItem Text="Feed cat" />


<asp:ListItem Text="Feed fish" />


<asp:ListItem Text="Cancel" Value="" />


</asp:RadioButtonList>


</ContentTemplate>


</asp:UpdatePanel>


</div>


</asp:Panel>


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


TargetControlID="MessageTextBox"


PopupControlID="Panel2"


CommitProperty="value"


Position="Bottom"


CommitScript="e.value += ' - do not forget!';" />



5 在RadioButtonList控件的SelectedIndexChanged事件中添加代码，让选择日期后能将选择的日期显示在文本框中，如下


protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)




...{


if (!string.IsNullOrEmpty(RadioButtonList1.SelectedValue))




...{


// 这里需要注意，执行选择操作


PopupControlExtender2.Commit(RadioButtonList1.SelectedValue);


}


else




...{


// 取消操作


PopupControlExtender2.Cancel();


}


}



6 保存设计，运行程序，效果：