AJAX ControlToolkit-PopupControlExtender 3

PopupControlExtender是一個可以控制Popup載體的組件，它本身並不會產生Popup控制項，它的作用是控制Popup載體，例如panel，div等的顯示、消失並獲得Popup載體中控制項的傳回值，返回到目標控制項中去。下面我們一齊來學習一下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();}

代碼很簡單，這裡就不作解析了。注意：寫這段代碼之前一定要先using AjaxControlToolkit