asp.net UpdatePanel的簡單用法
更新時(shí)間:2008年11月13日 20:25:20 作者:
局部更新是ajax技術(shù)的最基本,也是最重要的用法,今天大概把a(bǔ)sp.net ajax中的局部更新控件 updatepanel的用法記錄下,大家可以共同探討
UpdatePanel控制頁面的局部更新,這個(gè)更新功能依賴于scriptManger控件的EnablePartialRendering屬性,如果這個(gè)屬性設(shè)置為false局部更新會失去作用(scriptManger控件的EnablePartialRendering屬性的默認(rèn)值為true不必刻意去設(shè)置)
下面是一個(gè)完整的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)行使用會報(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)和普通的一養(yǎng),不管是否使用了局部更新控件,都會引起頁面的全部更新。
下面是幾個(gè)簡單的例子:
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)題頁</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è)按鈕,都會觸發(fā)更新,只不過外面的按鈕postback的時(shí)候頁面顯示回發(fā)而已 !
1,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)題頁</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ù)庫的人應(yīng)該對觸發(fā)器這個(gè)概念比較清楚,Trigger對于UpdatePanel來說也是很關(guān)鍵的
開始簡單介紹了UpdatePanel的倆中觸發(fā)器asyncPostBackTrigger和PostBackTrigger的作用
這里用例子大概在稍微深入地介紹下:
1,普通回調(diào)觸發(fā)器(PostBackTrigger)
PostBackTrigger主要針對UpdatePanel模板內(nèi)的子控件,因?yàn)楫?dāng)子控件被觸發(fā)時(shí)。它只會更新模版內(nèi)的數(shù)據(jù),模板外的控件不會發(fā)生變化.當(dāng)需要更新全局 內(nèi)容的時(shí)候就可以通過PostBackTrigger觸發(fā)器來實(shí)現(xiàn)頁面的全部回調(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)題頁</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)題頁</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í)間
上面的例子也可以動態(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);
}
先記錄這些~還望多多大蝦們多多指教
下面是一個(gè)完整的UpdatePanel的結(jié)構(gòu):
復(fù)制代碼 代碼如下:
<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)行使用會報(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)和普通的一養(yǎng),不管是否使用了局部更新控件,都會引起頁面的全部更新。
下面是幾個(gè)簡單的例子:
1,updatepanel的updatemode設(shè)置為always
復(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)題頁</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è)按鈕,都會觸發(fā)更新,只不過外面的按鈕postback的時(shí)候頁面顯示回發(fā)而已 !
1,updatepanel的updatemode設(shè)置為conditional( ChildrenTriggers="false" 就是updatepanel中事件不觸發(fā)更新)
復(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)題頁</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ù)庫的人應(yīng)該對觸發(fā)器這個(gè)概念比較清楚,Trigger對于UpdatePanel來說也是很關(guān)鍵的
開始簡單介紹了UpdatePanel的倆中觸發(fā)器asyncPostBackTrigger和PostBackTrigger的作用
這里用例子大概在稍微深入地介紹下:
1,普通回調(diào)觸發(fā)器(PostBackTrigger)
PostBackTrigger主要針對UpdatePanel模板內(nèi)的子控件,因?yàn)楫?dāng)子控件被觸發(fā)時(shí)。它只會更新模版內(nèi)的數(shù)據(jù),模板外的控件不會發(fā)生變化.當(dāng)需要更新全局 內(nèi)容的時(shí)候就可以通過PostBackTrigger觸發(fā)器來實(shí)現(xiàn)頁面的全部回調(diào)。
下面是簡單例子:
復(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)題頁</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ā)的控件和事件
例:
復(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)題頁</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í)間
上面的例子也可以動態(tài)更新UpdatePanel的一些源代碼:
具體例子就不寫了下面 大概寫點(diǎn)主要代碼:
復(fù)制代碼 代碼如下:
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 gridview分頁:第一頁 下一頁 1 2 3 4 上一頁 最末頁
這篇文章主要介紹了asp.net gridview分頁:第一頁 下一頁 1 2 3 4 上一頁 最末頁,可使用上下鍵選中行,選中后點(diǎn)擊修改,textbox獲得gridview中的代碼的數(shù)據(jù),需要的朋友可以參考下2014-12-12Asp.Net實(shí)現(xiàn)的通用分頁函數(shù)
這篇文章主要介紹了Asp.Net實(shí)現(xiàn)的通用分頁函數(shù),結(jié)合實(shí)例形勢分析了asp.net分頁函數(shù)的功能,定義及使用技巧,需要的朋友可以參考下2016-04-04blog程序新版本V2.0 Beta完成,提供V1.0全部源碼下載
blog程序新版本V2.0 Beta完成,提供V1.0全部源碼下載...2007-06-06ASP.NET Core學(xué)習(xí)之使用JWT認(rèn)證授權(quán)詳解
這篇文章主要給大家介紹了關(guān)于ASP.NET Core學(xué)習(xí)之使用JWT認(rèn)證授權(quán)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用ASP.NET Core具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08EFCore 通過實(shí)體Model生成創(chuàng)建SQL Server數(shù)據(jù)庫表腳本
這篇文章主要介紹了EFCore 通過實(shí)體Model生成創(chuàng)建SQL Server數(shù)據(jù)庫表腳本的示例,幫助大家更好的理解和學(xué)習(xí)使用.net框架,感興趣的朋友可以了解下2021-03-03Asp.net 后臺添加CSS、JS、Meta標(biāo)簽的方法
是從Asp.net 后臺添加CSS、JS、Meta標(biāo)簽的寫法,我們這里寫成函數(shù)方便以后使用,需要的朋友可以參考下2013-12-12