Ajax.net中使用PopupControlExtender

轉帖於:http://www.falaosao.net/article.asp?id=116
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();

}

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

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

結束：

本章主要介紹了PopupControlExtender的使用方法。從這個例子可以看出PopupControlExtender還有很多使用方法，而Popup載體也是多樣的，大家可以根據這個例子的思路發散出去，發掘出PopupControlExtender更多的用法。

如要下載視頻請打開如下地址：http://www.asp.net/learn/videos/view.aspx?tabid=63&id=84