AJAX ControlToolkit学习日志-PopupControlExtender(21)

         PopupControlExtender控件可以和任何asp.net服务端控件联合，用于弹出一个面板，进行选择。

下面看一个示例：

1)在VS2005中新建一个ASP.NET AJAX-Enabled Web Project项目工程，命名为PopupControlExtender1。

2)在Default.aspx页面上拖放一个TextBox控件，命名为TextBox1；再在该控件下面拖放一个Panel，命名为Panel1；在Panel1里面拖放一个UpdatePanel，命名为UpdatePanel1；在UpdatePanel1里面拖放一个RadioButtonList控件，用于显示选项。

代码如下：

 1        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
 2        &nbsp;
 3        <asp:Panel ID="Panel1" runat="server" Height="114px" CssClass="popupClass" Width="125px">
 4            &nbsp;<asp:UpdatePanel ID="UpdatePanel1" runat="server">
 5            <ContentTemplate>
 6                &nbsp;<asp:RadioButtonList ID="RadioButtonList1" runat="server" Height="96px" Width="80px" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" AutoPostBack="True">
 7                <asp:ListItem>eat</asp:ListItem>
 8                <asp:ListItem>sleep</asp:ListItem>
 9                <asp:ListItem>walk</asp:ListItem>
10                <asp:ListItem>speak</asp:ListItem>
11            </asp:RadioButtonList>
12            </ContentTemplate>
13        </asp:UpdatePanel>
14        </asp:Panel>

3)完成上面步骤后，最后在页面上拖放一个PopupControlExtender，命名为PopupControlExtender1，设定其属性。

代码如下：

1        <cc1:popupcontrolextender id="PopupControlExtender1" runat="server" popupcontrolid="Panel1"
2            position="Bottom" CommitProperty="value" targetcontrolid="TextBox1"></cc1:popupcontrolextender>
3

属性说明：
         TargetControlID：该控件关联的目标控件。
         PopupControlID：在目标控件获得焦点时，弹出显示的控件。
         Position：弹出的控件相对于目标控件的位置。
         CommitProperty：在弹出面板中选定值，用于设定目标控件的属性。

4)按下CTRL+F5,在浏览器里查看效果。

效果图如下：