轻松掌握Ajax.net系列教程六：使用PopupControlExtender

PopupControlExtender是一个可以控制Popup载体的组件，它本身并不会产生Popup控件，它的作用是控制Popup载体，例如panel，div等的显示、消失并获得Popup载体中控件的返回值，返回到目标控件中去。下面我们一齐来学习一下PopupControlExtender的使用方法。

第一步：建立AJAX Control Toolkit Web Site

要使用PopupControlExtender我们要使用AJAX Control Toolkit Web Site模板。建立好网站后我们需要以下控件：一个UpdatePanel、一个Panel控件、一个TextBox控件、一个RadioButtonList控件和一个PopupControlExtender组件，如下图所示：



注意：UpdatePannel一定要放在Panel里面，否则运行一次之后会发生JS异常。另外一定要将RadioButtonList的AutoPostBack属性设为True，否则就没有响应了。如下所示：

<asp:Panel ID="Panel1" CssClass="popupbox" runat="server" Height="50px" Width="125px">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:RadioButtonList AutoPostBack="true" ID="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
<asp:ListItem Text="广州市"></asp:ListItem>
<asp:ListItem Text="佛山市"></asp:ListItem>
<asp:ListItem Text="深圳市"></asp:ListItem>
<asp:ListItem Text="东莞市"></asp:ListItem>
</asp:RadioButtonList>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
准备好所有代码之后我们还需要建立一个CSS样式，否则不能控制Popup载体的显示和消失了，样式文件如下：

.popupbox
{
visibility:hidden;
border-color:#000;
background:#ff9900;
font-size:12px;
}

注意：一定要加visibility:hidden，否则Popup就不能隐藏了，这也是CSS样式的关键作用。

第二步：配置PopupControlExtender

由于PopupControlExtender需要配置的属性太多，我们切换到源代码窗口进行设置，如下所示：

<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" TargetControlID="TextBox1" PopupControlID="Panel1" CommitScript="e.value;" Position="Bottom" CommitProperty="value" runat="server">
</ajaxToolkit:PopupControlExtender>

TargetControlID是指PopupControlExtender的目标控件ID，即获取返回值的控件ID，这里应该是TextBox1，因为我们从RadioButtonList选择好的项需要在TextBox1中显示。PopupControlID是指Popup载体控件的ID，关于Popup载体的解析在文章的开始部分已有说明，这里应该是Panel1。CommitScript是指选择完成后调用的Js脚本，这里写e.value意思是返回选择项的value值。大家可以适当扩充一下，例如"'你已选择了' + e.value; "，注意：这里的语法一定要严格遵守Js的书写格式，别忘了最后要写分号。Position指Popup载体出现在目标控件的位置，大家根据喜好选择。CommitProperty是指Popup载体中控件的返回值属性，这里就是指RadioButtonList的值的属性名称，大家可以改成Text试试。

第三步：编写常规代码

到了这一步就离完成不远了，我们只需要在cs文件中指定一下RadioButtonList的返回值。双击RadioButtonList1切换到CS代码窗口，编写代码，如下所示：

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
if(RadioButtonList1.SelectedValue != null)
{
PopupControlExtender.GetProxyForCurrentPopup(this.Page).Commit(RadioButtonList1.SelectedValue);
}
RadioButtonList1.ClearSelection();
}
//注意了：此处我加粗的这段控件，只能用于 只能在异步回发过程中调用 RegisterDataItem。也就是只能在这些LIst中的什么PostBack中调用，换到Button的提交事件内，会报出刚才黑体字的错误。这句话是我补充的，初次使用可能说的不对。

代码很简单，这里就不作解析了。注意：写这段代码之前一定要先using AjaxControlToolkit

OK！运行，效果如下所示：



结束：

本章主要介绍了PopupControlExtender的使用方法。从这个例子可以看出PopupControlExtender还有很多使用方法，而Popup载体也是多样的，大家可以根据这个例子的思路发散出去，发掘出PopupControlExtender更多的用法。