當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Ajax updatepanel用法

發(fā)布時(shí)間：2023/12/15 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 Ajax updatepanel用法小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

局部更新是ajax技術(shù)的最基本，也是最重要的用法，今天把a(bǔ)sp.net ajax中的局部更新控件 updatepanel的用法總結(jié)下，大家可以共同探討

UpdatePanel控制頁面的局部更新，這個(gè)更新功能依賴于scriptManger控件的EnablePartialRendering屬性，如果這個(gè)屬性設(shè)置為false局部更新會(huì)失去作用(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>

<asp:AsyncPostBackTrigger />

<asp:PostBackTrigger />

</Triggers>

</asp:UpdatePanel>

主要屬性：

1，ChildrenAsTriggers : 內(nèi)容模板內(nèi)的子控件的回發(fā)是否更新本模板(和UpdateMode的conditional有關(guān)) asp.net源碼

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)和普通的一養(yǎng)，不管是否使用了局部更新控件，都會(huì)引起頁面的全部更新。

asp.net 教程

下面是幾個(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">

</head>

<body>

<div>

</div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">

<% =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í)候頁面顯示回發(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">

</head>

<body>

<div>

</div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">

<% =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í)。它只會(huì)更新模版內(nèi)的數(shù)據(jù)，模板外的控件不會(huì)發(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">

</head>

<body>

<div>

</div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">

<% =DateTime.Now.ToString()%>

<asp:Button ID="Button1" runat="server" Text="UpdatePanelButton" />

</ContentTemplate>

</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">

</head>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">

<% =DateTime.Now.ToString()%>

</ContentTemplate>

<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);

}

武漢asp.net培訓(xùn)

轉(zhuǎn)載于:https://blog.51cto.com/huwlnew/567304

總結(jié)

以上是生活随笔為你收集整理的Ajax updatepanel用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：还呗怎么协商还款还呗协商还款怎么协商
下一篇：无线路由器的WDS功能如何配置?