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,在瀏覽器裡查看效果。

如下：