Asp.net中UpdatePanel的用法詳解
Asp.net UpdatePanel 允許使用者構建一個豐富的，以客戶端為中心的應用程式，引用UpdatePanel控制元件，能夠實現頁面的部分重新整理，一個包含scriptManage和 UpdatePanel控制元件的頁面自動具有頁面部分重新整理的功能，不需要寫任何的客戶端javascript程式碼。一個web頁面只能包含一個 ScriptManage控制元件，但可以包含一個或多個UpdatePanel控制元件。
使用UpdatePanel控制元件實現頁面的區域性更新，需要包含一個ScriptManage控制元件，並且必須將ScriptManage控制元件的 EnablePartialRendering屬性設定為true，不過你不用擔心，該屬性的預設值就是True，所以，在預設情況下，只要添加了 ScriptManage控制元件，該頁面就自動具有了區域性更新的能力。
一、UpdatePanel的結構
<asp:ScriptManager ID="ScriptManager1" runat="server" > </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Always" RenderMode="Block"> <ContentTemplate> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger /> <asp:PostBackTrigger /> </Triggers> </asp:UpdatePanel>
主要屬性：
1，ChildrenAsTriggers : 內容程式設計客棧模板內的子控制元件的回發是否更新本模板(和UpdateMode的conditional有關)
2，UpdateMode : 內容模板的更新模式，有always和conditional倆種
always：每次ajax PostBack或者普通的PostBack都能程式設計客棧引起panel的更新 如果UpdatePanel設定為Always時，不能使用上面的ChildrenAsTriggers屬性，強行使用會報錯，是updatepanel預設的更新模式,和設定trigger觸發器沒有直接的關係。
conditional：只有滿足如下某一條件時才更新panel的內容
1程式設計客棧)，當panel中的某個控制元件引發PostBack時
2),當Panel指定的某個Trigger被引發時
3，RenderMode： 區域性更新控制元件的呈現形式，倆中，Block(區域性更新在客戶端以div形式展現)和Inline(區域性更新以span的形式展現在客戶端)
子元素：
1,contentTemplate: 區域性更新控制元件的內容模板，可以在其中新增任何控制元件
2，Triggers: 區域性更新的觸發器，包括倆中：非同步回發(AsyncPostBackTrigger) 用來實現區域性更新。普通回發(PostBackTrigger)和普通的一樣，不管是否使用了局部更新控制元件，都會引起頁面的全部更新。
二、下面是幾個簡單的例子：
1、updatepanel的updatemode設定為always
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>無標題頁</title> </head> <body> <form id="form1" runat="server"> <div> </div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always"> <ContentTemplate> <% =DateTime.Now.ToString()%> <asp:Button ID="Button1" runat="server" Text="UpdatePanelButton" /> </ContentTemplate> </asp:Upda程式設計客棧tePanel> <asp:Button ID="Button2" runat="serv程式設計客棧er" Text="Button" /> </form> </body> </html>
不管哪個按鈕，都會觸發更新，只不過外面的按鈕postback的時候頁面顯示回發而已 ！
2、updatepanel的updatemode設定為conditional( ChildrenTriggers="false" 就是updatepanel中事件不觸發更新)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>無標題頁</title> </head> <body> <form id="form1" runat="server"> <div> </div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false"> <ContentTemplate> <% =DateTime.Now.ToString()%> <asp:Button ID="Button1" runat="server" Text="UpdatePanelButton" /> </ContentTemplate> </asp:UpdatePanel> <asp:Button ID="Button2" runat="server" Text="Button" /> </form> </body> </html>
三、下面介紹下updatePanel的觸發器Trigger
瞭解資料庫的人應該對觸發器這個概念比較清楚，Trigger對於UpdatePanel來說也是很關鍵的
開始簡單介紹了UpdatePanel的倆中觸發器asyncPostBackTrigger和PostBackTrigger的作用
這裡用例子大概在稍微深入地介紹下：
1,普通回撥觸發器(PostBackTrigger)
PostBackTrigger主要針對UpdatePanel模板內的子控制元件，因為當子控制元件被觸發時。它只會更新模版內的資料，模板外的控制元件不會發生變化.當需要更新全域性 內容的時候就可以通過PostBackTrigger觸發器來實現頁面的全部回撥。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>無標題頁</title> </head> <body> <form id="form1" runat="server"> <div> </div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always"> <ContentTemplate> <% =DateTime.Now.ToString()%> <asp:Button ID="Button1" runat="server" Text="UpdatePanelButton" /> </ContentTemplate> <Triggers> <!--下面的註釋掉，點選updatePanel內的button則只更新Panel內的時間，取消註釋責全部更新--> <!-- <asp:PostBackTrigger ControlID="Button1"/>--> </Triggers> </asp:UpdatePanel> <br /> <% =DateTime.Now.ToString()%> <asp:Button ID="Button2" runat="server" Text="Button" /> </form> </body> </html>
2，非同步回撥觸發器(AsyncPostBackTrigger) 是實現區域性更新的關鍵，在觸發器內定義引起回發的控制元件和事件
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>無標題頁</title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always"> <ContentTemplate> <% =DateTime.Now.ToString()%> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" /> </Triggers> </asp:UpdatePanel> <br /> <% =DateTime.Now.ToString()%> <asp:Button ID="Button2" runat="server" Text="Button" /> </form> </body> </html>
運行了發現點選button2的時候只更新了 updatepanel內部的時間
上面的例子也可以動態更新UpdatePanel的一些原始碼：
具體例子就不寫了下面 大概寫點主要程式碼：
protected void Page_Load(object sender,EventArgs e)
{
//獲取更新控制元件兒
UpdatePanel mapanel = UpdatePanel1;
//設定觸發模式
mapanel.UpdateMode = UpdatePanelUpdateMode.Conditional;
//顯示時間
Label1.Text = DateTime.Now.ToString();
//新增觸發
AsyncPostBackTrigger tri = new AsyncPostBackTrigger();
tri.ControlID = "Button2";
tri.EventName = "Click";
mapanel.Triggers.Add(tri);
}
到此這篇關於Asp.net中UpdatePanel的用法詳解的文章就介紹到這了,更多相關Asp.net UpdatePanel內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！