[轉]UpdatePanel的用法詳解


本文轉自:http://www.cnblogs.com/shangxia/articles/2281782.html

 

今天用做日歷顯示本月的考勤記錄,用到了UpdatePanel控件,才發現對這個控件並不太了解,所以找了點兒資料,整理了一下給大家發上來!

一、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的內容  如果設置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

<%@ 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中事件不觸發更新)

<%@ 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>

 

三、下面介紹下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"> 
<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>

 

運行了發現點擊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); 
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM