【IT168技术文档】

  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>