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的標記;Block，UpdatePanel控制元件被解析成HTML控制元件的
。 UpdatePanel控制元件的UpdateMode屬性：Always，UpdatePanel頁面上任何一處發生的回發操作都會產生頁區域性更新;Conditional，只在特定的情況下才產生頁面的回發，如執行UpdatePanel控制元件的update()方法或在指定的觸發器的操作下，UpdatePanel控制元件的UpdateMode預設為”Always”。 UpdatePanel控制元件的ChildAsTrigger屬性：指示UpdatePanel內部控制元件引起的回發是否產生當前UpdatePanel控制元件的區域性更新。如果UpdateMode設為Always的話，那ChildAsTrigger屬性必須設為True，否則執行出錯。一、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)。
二、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>
三、兩個UpdatePanel控制元件，其中一個UpdatePanel內的控制元件引發兩個UpdatePanel控制元件的同時重新整理。 a.在頁面上放入兩個UpdatePanel和一個ScriptManager控制元件。 b.在UpdatePanel1中加入一個標籤Label1、一個按鈕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(); }
四、兩個UpdatePanel控制元件，其中一個UpdatePanel內的控制元件引發當前的UpdatePanel控制元件的重新整理，而另一個不重新整理。 a.步驟和上面的（三）一樣 b.要把UpdatePanel1和UpdatePanel2兩個控制元件的UpdateMode屬性設為Conditional，這裡需要注意，如果將一個設定為Conditional，一個設定為Always則兩個都會重新整理的 五、兩個UpdatePanel控制元件，其中一個UpdatePanel內的控制元件引發另一個UpdatePanel控制元件的重新整理，而本身不重新整理。 a.步驟和上面的（四）一樣（兩個都設定為Conditional）之後，還需要 b.把UpdatePanel1和UpdatePanel2的ChildrenAsTriggers屬性設為false c.在UpdatePanel2控制元件中加入一個觸發器，觸發源設到UpdatePanel1控制元件內的Button1的Click事件上。
在開發過程中難免會用到UpdatePanel控制元件的一些複雜的使用。 如：UpdatePanel控制元件的巢狀、在母版頁中使用UpdatePanel、在使用者控制元件中使用UpdatePanel以及在GridView中使用UpdatePanel等。 其實這些操作也免不了對UpdatePanel控制元件的UpdateMode屬性、ChildrenAsTrigger屬性以及觸發器的使用，下面是系統地說明。
一、兩個巢狀的UpdatePanel控制元件，外部的UpdatePanel內的控制元件回發引發二者同時更新 在頁面上放一個ScriptManager和UpdatePanel控制元件（UpdatePanel1），在UpdatePanel1中放入一個標籤控制元件 （lb1）、一個按鈕（Button1）和另一個UpdatePanel控制元件（UpdatePanel2），在UpdatePanel2控制元件中放一 個標籤控制元件lb2。 在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控制元件也發生重新整理。
二、兩個巢狀的UpdatePanel控制元件，內部的UpdatePanel內的控制元件回發引發二者同時更新 在頁面上放一個ScriptManager和UpdatePanel控制元件（UpdatePanel1），在UpdatePanel1中放入一個標籤控制元件 （lb1）和另一個UpdatePanel控制元件（UpdatePanel2），在UpdatePanel2控制元件中放一個標籤控制元件lb2和一個按 鈕（Button1）。 在按鈕的Click事件中和（一）中的一樣。 注意： 把兩個UpdatePanel控制元件的UpdateMode屬性設為Conditional，要把內部控制元件ChildrenAsTrigger設為 True。但這樣內部UpdatePanel內的控制元件只引發自身的重新整理，不會引發外部的UpdatePanel控制元件的重新整理，不會重新整理外部的 UpdatePanel控制元件，因此我們還需要為外部UpdatePanel控制元件加入一個觸發器，觸發源指定為Button1控制元件的Click事件上。
三、兩個巢狀的UpdatePanel控制元件，外部的UpdatePanel內的控制元件回發只引發內部控制元件的更新 在頁面上放一個ScriptManager和UpdatePanel控制元件（UpdatePanel1），在UpdatePanel1中放入一個標籤控制元件 （lb1）、一個按鈕（Button1）和另一個UpdatePanel控制元件（UpdatePanel2），在UpdatePanel2控制元件中放一個標籤控制元件lb2。 在按鈕的Click事件中和（一）中的一樣。 注意： 要把兩個UpdatePanel控制元件的UpdateMode設為Conditional，把外部UpdatePanel控制元件的 ChildrenAsTrigger設為false。這樣兩個UpdatePanel控制元件都不會重新整理，所以還要為內部的UpdatePanel控制元件建立觸 發器，觸發源指向外部UpdatePanel中的的Button1的Click事件上。
四、母版頁中使用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程式碼如下：
母版頁 3、 <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(); ;
}
五、使用者控制元件中使用UpdatePanel控制元件 如果父頁面中存在ScriptManager控制元件，那使用者控制元件的頁面中不應再放入ScriptManager控制元件了，只在使用者控制元件中加入UpdatePanel。 其控制元件的回發與更新規律與使用方式與母版頁一樣。