Asp.net中UpdatePanel的用法詳解
Asp.net UpdatePanel 允許用戶構(gòu)建一個(gè)豐富的,以客戶端為中心的應(yīng)用程序,引用UpdatePanel控件,能夠?qū)崿F(xiàn)頁(yè)面的部分刷新,一個(gè)包含scriptManage和 UpdatePanel控件的頁(yè)面自動(dòng)具有頁(yè)面部分刷新的功能,不需要寫任何的客戶端JavaScript代碼。一個(gè)web頁(yè)面只能包含一個(gè) ScriptManage控件,但可以包含一個(gè)或多個(gè)UpdatePanel控件。
使用UpdatePanel控件實(shí)現(xiàn)頁(yè)面的局部更新,需要包含一個(gè)ScriptManage控件,并且必須將ScriptManage控件的 EnablePartialRendering屬性設(shè)置為true,不過你不用擔(dān)心,該屬性的默認(rèn)值就是True,所以,在默認(rèn)情況下,只要添加了 ScriptManage控件,該頁(yè)面就自動(dòng)具有了局部更新的能力。
一、UpdatePanel的結(jié)構(gòu)
<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 : 內(nèi)容模板內(nèi)的子控件的回發(fā)是否更新本模板(和UpdateMode的conditional有關(guān))
2,UpdateMode : 內(nèi)容模板的更新模式,有always和conditional倆種
always:每次ajax PostBack或者普通的PostBack都能引起panel的更新 如果UpdatePanel設(shè)置為Always時(shí),不能使用上面的ChildrenAsTriggers屬性,強(qiáng)行使用會(huì)報(bào)錯(cuò),是updatepanel默認(rèn)的更新模式,和設(shè)置trigger觸發(fā)器沒有直接的關(guān)系。
conditional:只有滿足如下某一條件時(shí)才更新panel的內(nèi)容
如果設(shè)置UpdateMode="conditional" ChildrenAsTriggers="false"時(shí)候,子控件不允許觸發(fā)更新
1),當(dāng)panel中的某個(gè)控件引發(fā)PostBack時(shí)
2), 當(dāng)Panel指定的某個(gè)Trigger被引發(fā)時(shí)
3,RenderMode: 局部更新控件的呈現(xiàn)形式,倆中,Block(局部更新在客戶端以div形式展現(xiàn))和Inline(局部更新以span的形式展現(xiàn)在客戶端)
子元素:
1,contentTemplate: 局部更新控件的內(nèi)容模板,可以在其中添加任何控件
2,Triggers: 局部更新的觸發(fā)器,包括倆中:異步回發(fā)(AsyncPostBackTrigger) 用來實(shí)現(xiàn)局部更新。普通回發(fā)(PostBackTrigger)和普通的一樣,不管是否使用了局部更新控件,都會(huì)引起頁(yè)面的全部更新。
二、下面是幾個(gè)簡(jiǎn)單的例子:
1、updatepanel的updatemode設(shè)置為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>無標(biāo)題頁(yè)</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>
不管哪個(gè)按鈕,都會(huì)觸發(fā)更新,只不過外面的按鈕postback的時(shí)候頁(yè)面顯示回發(fā)而已 !
2、updatepanel的updatemode設(shè)置為conditional( ChildrenTriggers="false" 就是updatepanel中事件不觸發(fā)更新)
<%@ 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>無標(biāo)題頁(yè)</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的觸發(fā)器Trigger
了解數(shù)據(jù)庫(kù)的人應(yīng)該對(duì)觸發(fā)器這個(gè)概念比較清楚,Trigger對(duì)于UpdatePanel來說也是很關(guān)鍵的
開始簡(jiǎn)單介紹了UpdatePanel的倆中觸發(fā)器asyncPostBackTrigger和PostBackTrigger的作用
這里用例子大概在稍微深入地介紹下:
1,普通回調(diào)觸發(fā)器(PostBackTrigger)
PostBackTrigger主要針對(duì)UpdatePanel模板內(nèi)的子控件,因?yàn)楫?dāng)子控件被觸發(fā)時(shí)。它只會(huì)更新模版內(nèi)的數(shù)據(jù),模板外的控件不會(huì)發(fā)生變化.當(dāng)需要更新全局 內(nèi)容的時(shí)候就可以通過PostBackTrigger觸發(fā)器來實(shí)現(xiàn)頁(yè)面的全部回調(diào)。
<%@ 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>無標(biāo)題頁(yè)</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> <!--下面的注釋掉,點(diǎn)擊updatePanel內(nèi)的button則只更新Panel內(nèi)的時(shí)間,取消注釋責(zé)全部更新--> <!-- <asp:PostBackTrigger ControlID="Button1"/>--> </Triggers> </asp:UpdatePanel> <br /> <% =DateTime.Now.ToString()%> <asp:Button ID="Button2" runat="server" Text="Button" /> </form> </body> </html>
2,異步回調(diào)觸發(fā)器(AsyncPostBackTrigger) 是實(shí)現(xiàn)局部更新的關(guān)鍵,在觸發(fā)器內(nèi)定義引起回發(fā)的控件和事件
<%@ 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>無標(biāo)題頁(yè)</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>
運(yùn)行了發(fā)現(xiàn)點(diǎn)擊button2的時(shí)候只更新了 updatepanel內(nèi)部的時(shí)間
上面的例子也可以動(dòng)態(tài)更新UpdatePanel的一些源代碼:
具體例子就不寫了下面 大概寫點(diǎn)主要代碼:
protected void Page_Load(object sender, EventArgs e) { //獲取更新控件兒 UpdatePanel mapanel = UpdatePanel1; //設(shè)置觸發(fā)模式 mapanel.UpdateMode = UpdatePanelUpdateMode.Conditional; //顯示時(shí)間 Label1.Text = DateTime.Now.ToString(); //添加觸發(fā) AsyncPostBackTrigger tri = new AsyncPostBackTrigger(); tri.ControlID = "Button2"; tri.EventName = "Click"; mapanel.Triggers.Add(tri); }
到此這篇關(guān)于Asp.net中UpdatePanel的用法詳解的文章就介紹到這了,更多相關(guān)Asp.net UpdatePanel內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用UserControl做網(wǎng)站導(dǎo)航條的思路 分析
使用UserControl做網(wǎng)站導(dǎo)航條的思路 分析...2007-09-09asp.net+xml+flash實(shí)現(xiàn)的圖片展示效果示例
這篇文章主要介紹了asp.net+xml+flash實(shí)現(xiàn)的圖片展示效果的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了圖片展示效果的相關(guān)操作步驟與flash與xml調(diào)用的相關(guān)技巧,需要的朋友可以參考下2016-08-08ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后臺(tái)管理系統(tǒng)之前端頁(yè)面框架構(gòu)建源碼分享
這篇文章主要為大家分享了ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后臺(tái)管理系統(tǒng)之easyui前端頁(yè)面框架構(gòu)建源碼,感興趣的小伙伴們可以參考一下2016-07-07asp.net web頁(yè)面自定義分頁(yè)控件使用詳解
這篇文章主要為大家詳細(xì)介紹了asp.net web頁(yè)面自定義分頁(yè)控件使用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01巧妙使用JQuery Clone 添加多行數(shù)據(jù),并更新到數(shù)據(jù)庫(kù)的實(shí)現(xiàn)代碼
巧妙使用JQuery Clone 添加多行數(shù)據(jù),并更新到數(shù)據(jù)庫(kù)的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-12-12ASP.NET Core擴(kuò)展庫(kù)之日志功能的使用詳解
這篇文章主要介紹了ASP.NET Core擴(kuò)展庫(kù)之日志功能的使用詳解,幫助大家更好的理解和學(xué)習(xí)使用.NET技術(shù),感興趣的朋友可以了解下2021-03-03.NET Core/Framework如何創(chuàng)建委托大幅度提高反射調(diào)用的性能詳解
反射是一種很重要的技術(shù),下面這篇文章主要給大家介紹了關(guān)于.NET Core/Framework如何創(chuàng)建委托大幅度提高反射調(diào)用性能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-09-09詳解.Net中字符串不變性與相等判斷的特殊場(chǎng)景
本文主要介紹了.Net中字符串不變性與相等判斷的特殊場(chǎng)景,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04