Asp.net UpdatePanel 允許用戶構建一個豐富的，以客戶端為中心的應用程序，引用UpdatePanel控件，能夠實現頁面的部分刷新，一個包含scriptManage和 UpdatePanel控件的頁面自動具有頁面部分刷新的功能，不需要寫任何的客戶端JavaScript代碼。一個web頁面只能包含一個 ScriptManage控件，但可以包含一個或多個UpdatePanel控件。
使用UpdatePanel控件實現頁面的局部更新，需要包含一個ScriptManage控件，并且必須將ScriptManage控件的 EnablePartialRendering屬性設置為true，不過你不用擔心，該屬性的默認值就是True，所以，在默認情況下，只要添加了 ScriptManage控件，該頁面就自動具有了局部更新的能力。
一、UpdatePanel的結構
|
1
2
3
4
5
6
7
8
9
10
|
<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的內容
如果設置UpdateMode="conditional" ChildrenAsTriggers="false"時候，子控件不允許觸發更新
1)，當panel中的某個控件引發PostBack時
2), 當Panel指定的某個Trigger被引發時
3，RenderMode： 局部更新控件的呈現形式，倆中，Block(局部更新在客戶端以div形式展現)和Inline(局部更新以span的形式展現在客戶端)
子元素：
1,contentTemplate: 局部更新控件的內容模板，可以在其中添加任何控件
2，Triggers: 局部更新的觸發器，包括倆中：異步回發(AsyncPostBackTrigger) 用來實現局部更新。普通回發(PostBackTrigger)和普通的一樣，不管是否使用了局部更新控件，都會引起頁面的全部更新。
二、下面是幾個簡單的例子：
1、updatepanel的updatemode設置為always
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<%@ 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:UpdatePanel> <asp:Button ID="Button2" runat="server" Text="Button" /> </form> </body> </html> |
不管哪個按鈕，都會觸發更新，只不過外面的按鈕postback的時候頁面顯示回發而已 ！
2、updatepanel的updatemode設置為conditional( ChildrenTriggers="false" 就是updatepanel中事件不觸發更新)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<%@ 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觸發器來實現頁面的全部回調。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<%@ 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) 是實現局部更新的關鍵，在觸發器內定義引起回發的控件和事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<%@ 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的一些源代碼：
具體例子就不寫了下面 大概寫點主要代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://www.cnblogs.com/BrokenIce/p/5276149.html
