AJAX 之 UpdatePanel 控件

 1. 單個updatepanel 控件 進行局部刷新

<asp:ScriptManager id=ScriptManager1 EnablePartialRendering="true" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel id=UpdatePanel1 runat="server" UpdateMode="Conditional">
        <CONTENTTEMPLATE>           
           In the Panel
             <FIELDSET><%=System.DateTime.Now.ToString() %>

                    <asp:Button id=Button1 onclick=Button1_Click runat="server" Text="刷新"></asp:Button>
            </FIELDSET>
        </CONTENTTEMPLATE>
 </asp:UpdatePanel>
 <BR>out of panel:<%=System.DateTime.Now.ToString() %><BR>

 

2. 2個UpdatePanel 控件 刷新

<asp:ScriptManager ID="ScriptManager1" runat="server"  EnablePartialRendering="true">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>            
           In the Panel <fieldset><%=System.DateTime.Now.ToString() %><asp:Button ID="Button1"
                    runat="server" onclick="Button1_Click" Text="刷新" />
            </fieldset>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
        </Triggers>
 </asp:UpdatePanel>
<BR />out of panel:<%=System.DateTime.Now.ToString() %><BR>

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
            &nbsp;商品類型：<asp:DropDownList ID="DropDownList1" runat="server"
                AutoPostBack="True" onselectedindexchanged="DropDownList1_SelectedIndexChanged">
            </asp:DropDownList>
            &nbsp; 商品名稱：<asp:DropDownList ID="DropDownList2" runat="server">
            </asp:DropDownList>            
     </ContentTemplate>
</asp:UpdatePanel>

 

 總結：

1. Updatepanel 控件 與 ScriptManager 控件 一起使用；

    ScriptManager  的 EnablePartialRendering ＝false  窗體同步刷新， EnablePartialRendering ＝true Updatepanel控件 局部刷新

2. 多個UpdatePanel 控件 同時刷新 需設置Triggers 屬性

    ControlID="DropDownList1"   控件ID

    EventName="SelectedIndexChanged"  控件事件