這裡使用的是 C# .net  frameworK 4.0 的 UpdatePanel 元件,如果要使用.net frameworK 3.5 或 .net frameworK 2.0設置方法請在google上搜尋。

 

web.config設置

將 <system.web> 下 <xhtmlConformance mode="Legacy"/> 移除,此段為web標準的設置,但宣告此語法會讓 ajax 加載相關 js 時只加載一部份,以至於 UpdatePanel 失效,故拿掉此段語法。

 

 

UpdatePanel 的屬性、事件的相關說明

屬性或事件名稱 作用和解釋
ChildrenAsTriggers

UpdateMode 屬性為 Condititonal 時, UpdatePanel 中的子控件的局部回傳會引發 UpdatePanel 的更新。

Triggers 用來引發更新的事件。
UpdateMode

表示 UpdatePanel 的更新模式,有兩個值:Always 與 Conditional ,預設值為 Always

Always 是不管有沒有 Tiggers,其他元件都將更新該 UpdatePanel 。

Conditional 表示只有當 UpdatePanel  的 ChildrenAsTriggers 屬性為 true 時,才會觸發 UpdatePanel 中子控件引發的局部回傳或者整頁回傳。

如果當 UpdatePanel  的 ChildrenAsTriggers 屬性為 false 時,可設定 UpdatePanel 子控制項 Triggers 中的 AsyncPostBackTrigger 來實現局部回傳。

 

UpdatePanel 的 UpdateMode 屬性有兩個值,分別為 AlwaysConditional ,預設值為 Always如果 UpdateMode 屬性設定為 Always每次收到源自該網頁任何部分的回傳時都會更新 UpdatePanel 控制項的內容。 這包括來自其他 UpdatePanel 控制項內部之控制項的非同步回傳,以及來自並非位於 UpdatePanel 控制項內部之控制項的回傳(意思是︰當設定為 Always  時,頁面上 UpdatePanel 控制項中的任何一個元件觸發動作,都會觸發頁面上任何一個 UpdatePanel 的更新。)

為了讓 UpdatePanel 運作效能更好,可將 UpdateMode 屬性設置為 Conditional,但必須宣告 UpdatePanel 控制項的 Triggers 子控制項中的 AsyncPostBackTrigger 觸發程序,才會觸發元件下的更新程序(EX︰ DropdownList 的連動)。這樣的好處是一來效能增加,二來不管元件(Textbox、GridView、DropdownList等)在 UpdatePanel 控制項之內或之外都可被觸發。

如果 UpdatePanel 控制項的 ChildrenAsTriggers 屬性設定為 true 包在 UpdatePanel 控制項的內的元件(Textbox、GridView、DropdownList等)會全部被更新,這樣會浪費系統效能,所以可將 ChildrenAsTriggers 屬性設定為 false,並設定每一個元件的觸發程序,這樣可一次只更新一個元件,而不是整個 UpdatePanel 控制項都更新。

 

前台aspx code︰

<asp:DropDownList ID="DDLUserCountry" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DDLUserCountry_SelectedIndexChanged"></asp:DropDownList>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
    <ContentTemplate>
        <br />
                <label id="LabUserState" runat="server">州別︰</label>
                <asp:DropDownList ID="DDLUserState" runat="server"></asp:DropDownList>
                城市︰<asp:DropDownList ID="DDLCity" runat="server" OnSelectedIndexChanged="DDLCity_SelectedIndexChanged" AutoPostBack="True"></asp:DropDownList>
                <asp:Label runat="server" ID="LabArea">區︰</asp:Label>
                <asp:DropDownList ID="DDLArea" runat="server" OnSelectedIndexChanged="DDLArea_SelectedIndexChanged" AutoPostBack="True"></asp:DropDownList>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="DDLUserCountry" EventName="SelectedIndexChanged" />
        <asp:AsyncPostBackTrigger ControlID="DDLCity" EventName="SelectedIndexChanged" />
        <asp:AsyncPostBackTrigger ControlID="DDLArea" EventName="SelectedIndexChanged" />
    </Triggers>
</asp:UpdatePanel>

在 <Triggerrs> 下的 <asp:AsyncPostBackTrigger> 設定觸發條件,ControlID 為元件 ID,EventName 為觸發方式,SelectedIndexChanged 為 DropdownList 觸發方法。

 

後台cs code︰

照原本DropdownList觸發條件編寫即可。

        #region//*********國別連動*********
        protected void DDLUserCountry_SelectedIndexChanged(object sender, EventArgs e)
        {
            //UpdatePanel1.Update();
            ShowUserState("0");
            ShowUserCity();
        }
        #endregion

        #region//*********台灣城市連動*********
        protected void DDLCity_SelectedIndexChanged(object sender, EventArgs e)
        {
            LabNumber.Text = "";
            ShowUserArea();
        }
        #endregion

        #region//*********台灣區連動*********
        protected void DDLArea_SelectedIndexChanged(object sender, EventArgs e)
        {
            ShowUserNumber();
        }
        #endregion

 

微軟msdn參考︰http://msdn.microsoft.com/zh-tw/library/bb359258.aspx


魔法魚 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • 路人甲
  • 請問 ShowUserArea(); 寫什麼程式嗎????