ASP.NET中使用UpdatePanel實現局部異步刷新方法和攻略(轉)

asp.net UpdatePanel實現異步局部刷新
 
若有雷同，不勝榮欣，若轉載，請註明
 
鑑於最近項目須要，研究了一下UpdatePanel控件的使用方法，現總結以下，可能有不少地方不足，還望你們斧正哦，此文的目的也是爲了幫助UpdatePanel的初學者，也是爲了給本身的學習之路留個腳印，以便本身查缺補漏，廢話到此，下面直接開始
 
UpdatePanel局部刷新的使用
 
ScriptManager和UpdatePanel控件聯合使用能夠實現頁面異步局部更新的效果。其中的UpdatePanel就是設置頁面中異 步局部更新區域，它必須依賴於ScriptManager存在，由於ScriptManger控件提供了客戶端腳本生成與管理UpdatePanel的功能。
 
ScriptManager控件重要的屬性：
     ScriptManager控件的EnablePartialRendering屬性：true-表示實現頁面的異步局部更新;false-表示實現全頁面的刷新。此屬性默認值爲true
 UpdatePanel控件重要的屬性：
     UpdatePanel控件的RenderMode屬性：InLine，UpdatePanel控件被解析成HTML的<span>標記;Block，UpdatePanel控件被解析成HTML控件的<div>。
     UpdatePanel控件的UpdateMode屬性：Always，UpdatePanel頁面上任何一處發生的回發操做都會產生頁局部更新;Conditional，只在特定的狀況下才產生頁面的回發，如執行UpdatePanel控件的update()方法或在指定的觸發器的操做下，UpdatePanel控件的UpdateMode默認爲"Always"。
     UpdatePanel控件的ChildAsTrigger屬性：指示UpdatePanel內部控件引發的回發是否產生當前UpdatePanel控件的局部更新。若是UpdateMode設爲Always的話，那ChildAsTrigger屬性必須設爲True，不然運行出錯。
 
1、UpdatePanel內部的控件引發的回發，來更新當前UpdatePanel內部的控件內容：
     1.向頁面中加入ScriptManager、UpdatePanel控件和一個Label控件，ID="Label1"。
     2.在UpdatePanel中加入一個Button、一個Label,ID="Label2"。
     3.雙擊Button在事件處理程序中寫入下列代碼：Label2.Text = DateTime.Now.ToString();
     4.在Page_Load事件中寫入下列代碼：Label1.Text = DateTime.Now.ToString();
     5.運行頁面，發現每次點擊按鈕都會產生異步局步刷新，只有Label2的內容發生更改，頁面上的Label1時間沒有發生更改。
     
    代碼以下：
         <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
         <asp:ScriptManager ID="ScriptManager1" runat="server">
         </asp:ScriptManager>
         <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="True">
             <ContentTemplate>
                 <asp:Label ID="Label2" runat="server"></asp:Label>
                 <br />
                 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
             </ContentTemplate>
         </asp:UpdatePanel>
     後臺代碼：
         protected void Button1_Click(object sender, EventArgs e)
         {
             Label2.Text = DateTime.Now.ToString(); ;
         }
         protected void Page_Load(object sender, EventArgs e)
         {
             Label1.Text = DateTime.Now.ToString();
         } 
       注意：此時的ScriptManager的EnablePartialRendering屬性應設爲true(默認即爲true)。UpdatePanel的UpdateMode屬性應設爲Always(默認即爲Always)。ChildAsTrigger屬性應設爲true(默認即爲true)。
 
2、UpdatePanel控件外部的控件引發的回發，來異步更新UpdatePanel內部的內容
     雖然上面的方式可以實現很簡單地異步局部更新的功能，但就性能方面考慮，咱們應當只將數據確實會發生變化的控件擺放在UpdatePanel中，這就可能會出現引發回發的控件不在UpdatePanel內的狀況。這個時候咱們有兩種方式實現這種效果。
 
    A.在Page_Load方法中用ScriptManager1.RegisterAsyncPostBackControl()來註冊一下要實現異步更新的控件。
     B.用觸發器來實現。
     
    1、ScriptManager1.RegisterAsyncPostBackControl()註冊的控件能夠實現對全部的UpdatePanel控件的異步更新。
         如：ScriptManager1.RegisterAsyncPostBackControl(this.Button2);實現對Button2的註冊，那此時Button2的回發就變成一個異步回發（頁面不會刷新），它會致使頁面上全部的UpdatePanel的內容的更新。
         注意：此時的ScriptManager的EnablePartialRendering屬性應設爲true。UpdatePanel的UpdateMode屬性應設爲Always。
 
    2、ScriptManager1.RegisterAsyncPostBackControl()註冊的控件能夠實現針對特定UpdatePanel控件的異步更新。
         a.把頁面上全部的UpdatePanel控件的UpdateMode設爲Conditional。
         b.ScriptManager1.RegisterAsyncPostBackControl(this.Button2);實現對Button2的註冊。
         c.在Button2控件的Click事件中後面加入後面的代碼：UpdatePanel1.Update(); 
        這樣Button2按鈕只對UpdatePanel1控件實現的異步的局部刷新。
         注意：這裏的UpdatePanel的屬性要設爲Conditional，若是這裏多個UpdatePanel控件都設置爲Always的話，全部的UpdatePanel都不會出現刷新的效果。
         若是將其中Button2事件代碼UpdatePanel1.Update()對應的UpdatePanel設置爲Conditional時，則多個UpdatePanel都會出現刷新的效果，要實現多個UpdatePanel中
         其中一個實現更新效果的話，須要將UpdatePanel的UpdateMode都設置爲Conditional才能夠
     3、觸發器
         若是頁面上有多個UpdatePanel控件，若是要實現外部的控件的回發引起指定的UpdatePanel更新的話，那應當要爲實現刷新的UpdatePanel控件創建一個觸發器。
         a.選中要進行局部更新的UpdatePanel控件。 
        b.在其屬性頁中點擊Triggers集合屬性右邊的小按鈕。
         c.在彈出的對話框中的成員列表中添加一個AsyncPostBackTriggers成員。
         d.指定AsyncPostBackTriggers成員的ControlID和EventName，即引起異步回送的控件的ID和該控件的事件。
         完成以上步驟後，切換到HTML頁面就會出現下列代碼:
         <asp:UpdatePanel ID="UpdatePanel2" runat="server" RenderMode="Inline" UpdateMode="Conditional">
             <ContentTemplate>
                 <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
             </ContentTemplate>
             <Triggers>
                 <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
             </Triggers>
         </asp:UpdatePanel>
         <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="ButtonOut" />
         e.b到d的步驟能夠直接在html頁面中UpdatePanel控件內<ContentTemplate></ContentTemplate>以後添加
         <Triggers><asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" /></Triggers>,和上面步驟產生的代碼是同樣的
         
        這裏須要你們注意的是：
            把全部的UpdatePanel控件的UpdateMode設爲"Conditional"，這樣纔可以針對建有相關觸發器的UpdatePanel更新。
            一個UpdatePanel上能夠建有多個觸發器，實如今不一樣的狀況下對該UpdatePanel控件內容的更新。示例以下：
            <Triggers>
                 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
                 <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click"/>
                 <asp:PostBackTrigger ControlID="Button3" EventName="Click"/>
             </Triggers>
            
3、兩個UpdatePanel控件，其中一個UpdatePanel內的控件引起兩個UpdatePanel控件的同時刷新。
     a.在頁面上放入兩個UpdatePanel和一個ScriptManager控件。
     b.在UpdatePanel1中加入一個標籤Label一、一個按鈕Button1 ，在UpdatePanel2中加入一個標籤Label2。
     c.將UpdatePanel1和UpdatePanel2兩個控件的的UpdateMode屬性設爲"Always"
     c.在Button1的Click事件中加入下面的代碼：
         protected void Button1_Click(object sender, EventArgs e)
         {
             Label1.Text = DateTime.Now.ToString();
             Label2.Text = DateTime.Now.ToString();
         }
     d.或者只在Page_Load事件中填寫以下代碼便可
         protected void Page_Load(object sender, EventArgs e)
         {
             Label1.Text = DateTime.Now.ToString();
             Label2.Text = DateTime.Now.ToString();
         }
         
    
4、兩個UpdatePanel控件，其中一個UpdatePanel內的控件引起當前的UpdatePanel控件的刷新，而另外一個不刷新。
     a.步驟和上面的（三）同樣
     b.要把UpdatePanel1和UpdatePanel2兩個控件的UpdateMode屬性設爲Conditional，這裏須要注意，若是將一個設置爲Conditional，一個設置爲Always則兩個都會刷新的
     <asp:ScriptManager ID="ScriptManager1" runat="server">
     </asp:ScriptManager>
     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
         <ContentTemplate>
             <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
             <br />
             <asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="更新兩個UpdatePanel" />
         </ContentTemplate>
     </asp:UpdatePanel>
     <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
         <ContentTemplate>
             <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
         </ContentTemplate>
     </asp:UpdatePanel>
 5、兩個UpdatePanel控件，其中一個UpdatePanel內的控件引起另外一個UpdatePanel控件的刷新，而自己不刷新。
     a.步驟和上面的（四）同樣（兩個都設置爲Conditional）以後，還須要
     b.把UpdatePanel1和UpdatePanel2的ChildrenAsTriggers屬性設爲false
     c.在UpdatePanel2控件中加入一個觸發器，觸發源設到UpdatePanel1控件內的Button1的Click事件上。
     <asp:ScriptManager ID="ScriptManager1" runat="server">
     </asp:ScriptManager>
     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
         <ContentTemplate>
             <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
             <br />
             <asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="只更新UpdatePane2" />
         </ContentTemplate>
     </asp:UpdatePanel>
     <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
         <ContentTemplate>
             <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
         </ContentTemplate>
         <Triggers>
             <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
         </Triggers>
     </asp:UpdatePanel>
 
在開發過程當中不免會用到UpdatePanel控件的一些複雜的使用。
 如：UpdatePanel控件的嵌套、在母版頁中使用UpdatePanel、在用戶控件中使用UpdatePanel以及在GridView中使用UpdatePanel等。
 其實這些操做也免不了對UpdatePanel控件的UpdateMode屬性、ChildrenAsTrigger屬性以及觸發器的使用，下面是系統地說明。
 
1、兩個嵌套的UpdatePanel控件，外部的UpdatePanel內的控件回發引起兩者同時更新
     在頁面上放一個ScriptManager和UpdatePanel控件（UpdatePanel1），在UpdatePanel1中放入一個標籤控件 （lb1）、一個按鈕（Button1）和另外一個UpdatePanel控件（UpdatePanel2），在UpdatePanel2控件中放一 個標籤控件lb2。
     <asp:ScriptManager ID="ScriptManager1" runat="server">
     </asp:ScriptManager>
     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
         <ContentTemplate>
             <asp:Label ID="lb1" runat="server"></asp:Label>
             <asp:Button ID="Button1" runat="server" OnClick="Button1_Click2" Text="Button" />
             <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                 <ContentTemplate>
                     <asp:Label ID="lb2" runat="server"></asp:Label>
                 </ContentTemplate>
             </asp:UpdatePanel>
         </ContentTemplate>
     </asp:UpdatePanel>
     在Button1控件中的Click事件中加入下面的代碼：
     protected void Button1_Click2(object sender, EventArgs e)
     {
         lblIn.Text = DateTime.Now.ToString();
         lblOut.Text = DateTime.Now.ToString();
     }
     要實現外部UpdatePanel內控件的回發引發內部和外部兩個UpdatePanel控件的同時刷新的話，須要把兩個UpdatePanel控件的 UpdateMode都設爲Conditional，這樣外部UpdatePanel內的控件回發會自動引發內部UpdatePanel控件的刷新。
     注意：外部UpdatePanel控件的ChildrenAsTrigger屬性要設爲True，兩個UpdatePanel控件的UpdateMode要都設爲 Conditional，若是UpdateMode設爲Always的話也會出現兩個UpdatePanel同時刷新的效果，這樣會致使頁面上其它的 UpdatePanel控件也發生刷新。
                
2、兩個嵌套的UpdatePanel控件，內部的UpdatePanel內的控件回發引起兩者同時更新
     在頁面上放一個ScriptManager和UpdatePanel控件（UpdatePanel1），在UpdatePanel1中放入一個標籤控件 （lb1）和另外一個UpdatePanel控件（UpdatePanel2），在UpdatePanel2控件中放一個標籤控件lb2和一個按 鈕（Button1）。
     <asp:ScriptManager ID="ScriptManager1" runat="server">
     </asp:ScriptManager>
     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
         <ContentTemplate>
             <asp:Label ID="lb1" runat="server" ></asp:Label>
             <br />
             <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                 <ContentTemplate>
                     <asp:Label ID="lb2" runat="server" ></asp:Label>
                     <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                 </ContentTemplate>
             </asp:UpdatePanel>
         </ContentTemplate>
         <Triggers>
             <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
         </Triggers>
     </asp:UpdatePanel>
     在按鈕的Click事件中和（一）中的同樣。
     注意：
        把兩個UpdatePanel控件的UpdateMode屬性設爲Conditional，要把內部控件ChildrenAsTrigger設爲 True。但這樣內部UpdatePanel內的控件只引起自身的刷新，不會引起外部的UpdatePanel控件的刷新，不會刷新外部的 UpdatePanel控件，所以咱們還須要爲外部UpdatePanel控件加入一個觸發器，觸發源指定爲Button1控件的Click事件上。
 
3、兩個嵌套的UpdatePanel控件，外部的UpdatePanel內的控件回發只引起內部控件的更新
     在頁面上放一個ScriptManager和UpdatePanel控件（UpdatePanel1），在UpdatePanel1中放入一個標籤控件 （lb1）、一個按鈕（Button1）和另外一個UpdatePanel控件（UpdatePanel2），在UpdatePanel2控件中放一個標籤控件lb2。
     <asp:ScriptManager ID="ScriptManager1" runat="server">
     </asp:ScriptManager>
     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
         <ContentTemplate>
             <asp:Label ID="lb1" runat="server" ></asp:Label>
             <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /><br />
             <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                 <ContentTemplate>
                     <asp:Label ID="lb2" runat="server" ></asp:Label>&nbsp;
                 </ContentTemplate>
                 <Triggers>
                     <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
                 </Triggers>
             </asp:UpdatePanel>
         </ContentTemplate>
     </asp:UpdatePanel>
            在按鈕的Click事件中和（一）中的同樣。
     注意：
         要把兩個UpdatePanel控件的UpdateMode設爲Conditional，把外部UpdatePanel控件的 ChildrenAsTrigger設爲false。這樣兩個UpdatePanel控件都不會刷新，因此還要爲內部的UpdatePanel控件創建觸 發器，觸發源指向外部UpdatePanel中的的Button1的Click事件上。
         
4、母版頁中使用UpdatePanel控件
     若是將ScriptManager控件添加在母版頁上的話，那麼各內容頁面就不必再添加ScriptManager控件了，只需添加UpdatePanel控件就能夠了，由於母版頁和內容頁面未來生成的是一個頁面的實例，而在一個頁面上是不容許同時存在兩個ScriptManager控件的。
     若是ScriptManager控件沒有添加在母版頁上的話，那隻能把ScriptManager控件添加在其中一個內容頁面裏。不要向每個內容頁面中添加ScriptManager控件。
     1、內容頁面中的UpdatePanel內的控件引發回發，只更新當前內容頁面的內容。
         此時按鈕分別在各自的UpdatePanel控件內。
         將兩個內容頁面內的兩個UpdatePanel控件的UpdateMode設爲Conditional，ChildrenAsTrigger設爲True。
         在按鈕的Click事件中和（一）中的同樣。
         這樣就出現各內容頁的UpdatePanel內的按鈕只對當前內容頁起做用。
     2、在母版頁中的按鈕引發回發，更新指定內容頁的信息。       
       此時有兩個按鈕：ButtonOut在母版頁中，ButtonIn在內容頁面1中。
        當點擊ButtonOut時，異步更新兩個內容頁面的信息。當點擊ButtonIn時，異步更新母版面中的UpdatePanel1中的信息。
        母版頁HTML代碼以下：
        <div>
      母版頁
     3、<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
         <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline" UpdateMode="Conditional">
             <ContentTemplate>
                 <asp:Label ID="lbl" runat="server" Text="Label"></asp:Label>
             </ContentTemplate>
         </asp:UpdatePanel>
         <br />
         <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="ButtonOut" /><br />
 
        <table width=80%>
             <tr>
                 <td>
                     <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
                     </asp:contentplaceholder>
                 </td>
                 <td bgcolor=maroon>
                     <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
                     </asp:ContentPlaceHolder>
                 </td>
             </tr>
         </table>
         <br />
        內容頁面的HTML代碼以下：
         <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Child.aspx.cs" Inherits="Child" Title="UpdatePanel Test Page" %>
         <%@ MasterType VirtualPath="~/MasterPage.master" %>
         <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
             <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                 <ContentTemplate>
                     <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
             <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="ButtonInner" />
                 </ContentTemplate>
             </asp:UpdatePanel>
         </asp:Content>
 
        <asp:Content ID="Content2" runat="server" ContentPlaceHolderID="ContentPlaceHolder2">
             <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                 <ContentTemplate>
                     <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                 </ContentTemplate>
             </asp:UpdatePanel>
         </asp:Content> 

        母版頁的CS代碼以下：
         protected void Page_Load(object sender, EventArgs e)
         {
             ScriptManager1.RegisterAsyncPostBackControl(this.Button1);
         }
         protected void Button1_Click(object sender, EventArgs e)
         {
             Label lbl1 = (Label)this.ContentPlaceHolder1.FindControl("Label1");
             lbl1.Text = DateTime.Now.ToString();
             Label lbl2 = (Label)this.ContentPlaceHolder2.FindControl("Label2");
             lbl2.Text = DateTime.Now.ToString();
         }
 
        public string BindTitle
         {
             get
             {
                 return lbl.Text;
             }
             set
             {
                 lbl.Text = value;
             }
         } 
       Child孩子頁面的CS代碼以下：
         protected void Button1_Click(object sender, EventArgs e)
         {
             Label1.Text = Master.BindTitle;
             Master.BindTitle = "ContentPage1's Action";
             ((UpdatePanel)Master.FindControl("UpdatePanel1")).Update(); ;
         } 

5、用戶控件中使用UpdatePanel控件
     若是父頁面中存在ScriptManager控件，那用戶控件的頁面中不該再放入ScriptManager控件了，只在用戶控件中加入UpdatePanel。   
     其控件的回發與更新規律與使用方式與母版頁同樣。
 
本身查看資料而後總結，若發現不足之處，還請斧正，本人將很是感謝，但願共同窗習，共同進步，謝謝。。。