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

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

二、 属性说明

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

三、 实例
实例
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:1pxoutsetwhite;width:100px" >
< asp:UpdatePanel runat ="server" ID ="up2" >
< ContentTemplate >
< asp:RadioButtonList ID ="RadioButtonList1" runat ="server" AutoPostBack ="true"
OnSelectedIndexChanged ="RadioButtonList1_SelectedIndexChanged" >
< asp:ListItem Text ="Walkdog" />
< asp:ListItem Text ="Feeddog" />
< asp:ListItem Text ="Feedcat" />
< asp:ListItem Text ="Feedfish" />
< 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+='-donotforget!';" />

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

protected void RadioButtonList1_SelectedIndexChanged( object sender,EventArgse)
... {
if(!string.IsNullOrEmpty(RadioButtonList1.SelectedValue))
...{
//这里需要注意，执行选择操作
PopupControlExtender2.Commit(RadioButtonList1.SelectedValue);
}
else
...{
//取消操作
PopupControlExtender2.Cancel();
}
}

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

效果如下：

http://asp.net/AJAX/Control-Toolkit/Live/PopupControl/PopupControl.aspx