當(dāng)前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

ASP.NET中AJAX的UpdatePannel控件的用法

發(fā)布時(shí)間：2025/5/22 asp.net 136 豆豆

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

ScriptManager和UpdatePanel控件聯(lián)合使用可以實(shí)現(xiàn)頁面異步局部更新的效果。其中的UpdatePanel就是設(shè)置頁面中異步局部更新區(qū)域，它必須依賴于ScriptManager存在，因?yàn)镾criptManger控件提供了客戶端腳本生成與管理UpdatePanel的功能。

幾個(gè)重要的屬性：

ScriptManager控件的EnablePartialRendering屬性：true-實(shí)現(xiàn)頁面的異步局部更新;false-實(shí)現(xiàn)全頁面的刷新。
UpdatePanel控件的RenderMode屬性：InLine-UpdatePanel控件被解析成HTML的<span>標(biāo)記;Block-UpdatePanel控件被解析成HTML控件的<DIV>。
UpdatePanel控件的UpdateMode屬性：Always-UpdatePanel頁面上任何一處發(fā)生的回發(fā)操作都會(huì)產(chǎn)生頁局部更新;Conditional-只在特定的情況下才產(chǎn)頁面的回發(fā)，如執(zhí)行UpdatePanel控件的update()方法或在指定的觸發(fā)器的操作下。
UpdatePanel控件的ChildAsTrigger屬性：指示UpdatePanel內(nèi)部控件引起的回發(fā)是否產(chǎn)生當(dāng)前UpdatePanel控件的局部更新。如果UpdateMode設(shè)為Always的話，那ChildAsTrigger局性必須設(shè)為True，否則運(yùn)行出錯(cuò)。

一、UpdatePanel內(nèi)部的控件引起的回發(fā)，來更新當(dāng)前UpdatePanel內(nèi)部的控件內(nèi)容：
1.向頁面中加入ScriptManager、UpdatePanel控件和一個(gè)Label控件(Label2)。
2.在UpdatePanel中加入一個(gè)Button、一個(gè)Label(Label1)。
3.雙擊Button在事件處理程序中寫入下列代碼：Label1.Text = DateTime.Now.ToString();
4.在Page_Load事件中寫入下列代碼：Label2.Text = DateTime.Now.ToString();
5.運(yùn)行頁面，發(fā)現(xiàn)每次點(diǎn)擊按鈕都會(huì)產(chǎn)生異步局步刷新，只有Label1的內(nèi)容發(fā)生更改，頁面上的Label2時(shí)間沒有發(fā)生更改。

代碼如下：

<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="True"> <ContentTemplate> <asp:Label ID="Label1" runat="server"></asp:Label> <br /> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /> </ContentTemplate> </asp:UpdatePanel> protected void Button1_Click(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); ; } protected void Page_Load(object sender, EventArgs e) { Label2.Text = DateTime.Now.ToString(); }

注意：此時(shí)的ScriptManager的EnablePartialRendering屬性應(yīng)設(shè)為true。UpdatePanel的UpdateMode屬性應(yīng)設(shè)為Always。ChildAsTrigger屬性應(yīng)設(shè)為true。

二、UpdatePanel控件外部的控件引起的回發(fā)，來異步更新UpdatePanel內(nèi)部的內(nèi)容：
雖然上面的方式能夠很簡(jiǎn)單地實(shí)現(xiàn)異步局部更新的功能，但就性能方面考慮，我們應(yīng)當(dāng)只將數(shù)據(jù)確實(shí)會(huì)發(fā)生變化的控件擺放在UpdatePanel中，這就可能會(huì)出現(xiàn)引起回發(fā)的控件不在UpdatePanel內(nèi)的情況。
有兩種方式實(shí)現(xiàn)這種效果：
a.在Page_Load方法中用ScriptManager1.RegisterAsyncPostBackControl()來注冊(cè)一下要實(shí)現(xiàn)異步更新的控件。
b.用觸發(fā)器來實(shí)現(xiàn)。

1、ScriptManager1.RegisterAsyncPostBackControl()注冊(cè)的控件可以實(shí)現(xiàn)對(duì)所有的UpdatePanel控件的異步更新。
如：ScriptManager1.RegisterAsyncPostBackControl(this.Button2);實(shí)現(xiàn)對(duì)Button2的注冊(cè)，那此時(shí)Button2的回發(fā)就變成一個(gè)異步回發(fā)（頁面不會(huì)刷新），它會(huì)導(dǎo)致頁面上所有的UpdatePanel的內(nèi)容的更新。
注意：此時(shí)的ScriptManager的EnablePartialRendering屬性應(yīng)設(shè)為true。UpdatePanel的UpdateMode屬性應(yīng)設(shè)為Always。
2、ScriptManager1.RegisterAsyncPostBackControl()注冊(cè)的控件可以實(shí)現(xiàn)針對(duì)特定UpdatePanel控件的異步更新。
a.把頁面上所有的UpdatePanel控件的UpdateMode設(shè)為Conditional。
b.ScriptManager1.RegisterAsyncPostBackControl(this.Button2);實(shí)現(xiàn)對(duì)Button2的注冊(cè)。
c.在Button2控件的Click事件中后面加入后面的代碼：UpdatePanel1.Update();
這樣Button2按鈕只對(duì)UpdatePanel1控件實(shí)現(xiàn)的異步的局部刷新。
注意：這里的UpdatePanel的屬性要設(shè)為Conditional，如果還是Always的話，會(huì)出現(xiàn)所有的UpdatePanel都刷新的效果。
3、觸發(fā)器
如果頁面上有多個(gè)UpdatePanel控件，如果要實(shí)現(xiàn)外部的控件的回發(fā)引發(fā)指定UpdatePanel的更新的話，那應(yīng)當(dāng)為要實(shí)現(xiàn)刷新的UpdatePanel控件建立一個(gè)觸發(fā)器。
a.選中要進(jìn)行局部更新的UpdatePanel控件。
b.在其屬性頁中點(diǎn)擊Triggers集合屬性右邊的小按鈕。
c.在彈出的對(duì)話框中，的成員列表中添加一個(gè)AsyncPostBackTriggers成員。
d.指定AsyncPostBackTriggers成員的ControlID和EventName，即引發(fā)異步回送的控件的ID和該控件的事件。
完成以上步驟后，切換到HTML頁面就會(huì)出現(xiàn)下列代碼:

<asp:UpdatePanel ID="UpdatePanel2" runat="server" RenderMode="Inline" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click"/> </Triggers> </asp:UpdatePanel> <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="ButtonOut" />

這里需要大家注意的是：
把所有的UpdatePanel控件的UpdateMode設(shè)為"Conditional"，這樣才能夠針對(duì)建有相關(guān)觸發(fā)器的UpdatePanel更新。
一個(gè)UpdatePanel上可以建有多個(gè)觸發(fā)器，實(shí)現(xiàn)在不同的情況下對(duì)該UpdatePanel控件內(nèi)容的更新。

三、兩個(gè)UpdatePanel控件，其中一個(gè)UpdatePanel內(nèi)的控件引發(fā)兩個(gè)UpdatePanel控件的同時(shí)刷新。
a.在頁面上放入兩個(gè)UpdatePanel和一個(gè)ScriptManager控件。
b.在UpdatePanel1中加入一個(gè)標(biāo)簽Label1、一個(gè)按鈕Button1 ，在UpdatePanel2中加入一個(gè)標(biāo)簽Label2。
c.將UpdatePanel1和UpdatePanel2兩個(gè)控件的的UpdateMode屬性設(shè)為"Always"
c.在Button1的Click事件中加入下面的代碼：

protected void Button1_Click(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); Label2.Text = DateTime.Now.ToString(); }

四、兩個(gè)UpdatePanel控件，其中一個(gè)UpdatePanel內(nèi)的控件引發(fā)當(dāng)前的UpdatePanel控件的刷新，而另一個(gè)不刷新。
a.步驟和上面的（三）一樣
b.要把UpdatePanel1和UpdatePanel2兩個(gè)控件的UpdateMode屬性設(shè)為Conditional??

<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <br /> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="更新兩個(gè)UpdatePanel" /> </ContentTemplate> </asp:UpdatePanel> <asp:UpdatePanel ID="UpdatePanel2" runat="server"UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label> </ContentTemplate> </asp:UpdatePanel>

五、兩個(gè)UpdatePanel控件，其中一個(gè)UpdatePanel內(nèi)的控件引發(fā)另一個(gè)UpdatePanel控件的刷新，而本身不刷新。
a.步驟和上面的（四）一樣
b.把UpdatePanel1和UpdatePanel2的ChildrenAsTriggers屬性設(shè)為false
c.在UpdatePanel2控件中加入一個(gè)觸發(fā)器，觸發(fā)源設(shè)到UpdatePanel1控件內(nèi)的Button1的Click事件上。

<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False"> <ContentTemplate> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <br /> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="更新兩個(gè)UpdatePanel" /> </ContentTemplate> </asp:UpdatePanel> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label> </ContentTemplate> <Triggers> <asp:AsyncPostBackTriggerControlID="Button1" EventName="Click"/> </Triggers> </asp:UpdatePanel>

在開發(fā)過程中難免會(huì)用到UpdatePanel控件的一些復(fù)雜的使用。如：UpdatePanel控件的嵌套、在母版頁中使用UpdatePanel、在用戶控件中使用UpdatePanel以及在GridView中使用UpdatePanel等。
其實(shí)這些操作也免不了對(duì)UpdatePanel控件的UpdateMode屬性、ChildrenAsTrigger屬性以及觸發(fā)器的使用，下面是系統(tǒng)地說明。

一、兩個(gè)嵌套的UpdatePanel控件，外部的UpdatePanel內(nèi)的控件回發(fā)引發(fā)二者同時(shí)更新

在頁面上放一個(gè)ScriptManager和UpdatePanel控件（UpdatePanel1），在UpdatePanel1中放入一個(gè)標(biāo)簽控件（lblOut）、一個(gè)按鈕（Button1）和另一個(gè)UpdatePanel控件（UpdatePanel2），在UpdatePanel2控件中放一個(gè)標(biāo)簽控件lblIn。

<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="lblOut" runat="server"></asp:Label> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click2" Text="Button" /> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="lblIn" runat="server"></asp:Label> </ContentTemplate> </asp:UpdatePanel> </ContentTemplate> </asp:UpdatePanel>

在Button1控件中的Click事件中加入下面的代碼：

protected void Button1_Click2(object sender, EventArgs e) { lblIn.Text = DateTime.Now.ToString(); lblOut.Text = DateTime.Now.ToString(); }

要實(shí)現(xiàn)外部UpdatePanel內(nèi)控件的回發(fā)引起內(nèi)部和外部?jī)蓚€(gè)UpdatePanel控件的同時(shí)刷新的話，需要把兩個(gè)UpdatePanel控件的 UpdateMode都設(shè)為Conditional，這樣外部UpdatePanel內(nèi)的控件回發(fā)會(huì)自動(dòng)引起內(nèi)部UpdatePanel控件的刷新。

注意： 外部UpdatePanel控件的ChildrenAsTrigger屬性要設(shè)為True，兩個(gè)UpdatePanel控件的UpdateMode要都設(shè)為 Conditional，如果UpdateMode設(shè)為Always的話也會(huì)出現(xiàn)兩個(gè)UpdatePanel同時(shí)刷新的效果，但樣這會(huì)導(dǎo)致頁面上其它的 UpdatePanel控件也發(fā)生刷新。

二、兩個(gè)嵌套的UpdatePanel控件，內(nèi)部的UpdatePanel內(nèi)的控件回發(fā)引發(fā)二者同時(shí)更新

在頁面上放一個(gè)ScriptManager和UpdatePanel控件（UpdatePanel1），在UpdatePanel1中放入一個(gè)標(biāo)簽控件（lblOut）和另一個(gè)UpdatePanel控件（UpdatePanel2），在UpdatePanel2控件中放一個(gè)標(biāo)簽控件lblIn和一個(gè)按鈕（Button1）。

<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="lblOut" runat="server" Width="158px"></asp:Label> <br /> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="lblIn" runat="server" Width="148px"></asp:Label> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click2" Text="Button" /> </ContentTemplate> </asp:UpdatePanel> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> </Triggers> </asp:UpdatePanel>

在按鈕的Click事件中和（一）中的一樣。

注意：把兩個(gè)UpdatePanel控件的UpdateMode屬性設(shè)為Conditional，要把內(nèi)部控件ChildrenAsTrigger設(shè)為 True。但這樣內(nèi)部UpdatePanel內(nèi)的控件只引發(fā)自身的刷新，不會(huì)引發(fā)外部的UpdatePanel控件的刷新，不會(huì)刷新外部的 UpdatePanel控件，因此我們還需要為外部UpdatePanel控件加入一個(gè)觸發(fā)器，觸發(fā)源指定為Button1控件的Click事件上。

三、兩個(gè)嵌套的UpdatePanel控件，外部的UpdatePanel內(nèi)的控件回發(fā)只引發(fā)內(nèi)部控件的更新

<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"ChildrenAsTriggers="False"> <ContentTemplate> <asp:Label ID="lblOut" runat="server" Width="158px"></asp:Label> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click2" Text="Button" /><br /> <asp:UpdatePanel ID="UpdatePanel2" runat="server"UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="lblIn" runat="server" Width="148px"></asp:Label>  </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> </Triggers> </asp:UpdatePanel> </ContentTemplate> </asp:UpdatePanel>

在按鈕的Click事件中和（一）中的一樣。

注意：要把兩個(gè)UpdatePanel控件的UpdateMode設(shè)為Conditional，把外部UpdatePanel控件的 ChildrenAsTrigger設(shè)為false。這樣兩個(gè)UpdatePanel控件都不會(huì)刷新，所以還要為內(nèi)部的UpdatePanel控件建立觸發(fā)器，觸發(fā)源指向外部UpdatePanel中的的Button1的Click事件上。

四、母版頁中使用UpdatePanel控件

如果將ScriptManager控件添加在母版頁上的話，那么各內(nèi)容頁面就沒必要再添加ScriptManager控件了，只需添加UpdatePanel控件就可以了，因?yàn)槟赴骓摵蛢?nèi)容頁面將來生成的是一個(gè)頁面的實(shí)例，而在一個(gè)頁面上是不允許同時(shí)存在兩個(gè)ScriptManager控件的。如果ScriptManager控件沒有添加在母版頁上的話，那只能把ScriptManager控件添加在其中一個(gè)內(nèi)容頁面里。不要向每一個(gè)內(nèi)容頁面中添加ScriptManager控件。

1、內(nèi)容頁面中的UpdatePanel內(nèi)的控件引起回發(fā)，只更新當(dāng)前內(nèi)容頁面的內(nèi)容。

此時(shí)按鈕分別在各自的UpdatePanel控件內(nèi)。

將兩個(gè)內(nèi)容頁面內(nèi)的兩個(gè)UpdatePanel控件的UpdateMode設(shè)為Conditional，ChildrenAsTrigger設(shè)為True。

在按鈕的Click事件中和（一）中的一樣。這樣就出現(xiàn)各內(nèi)容頁的UpdatePanel內(nèi)的按鈕只對(duì)當(dāng)前內(nèi)容頁起作用。

2、在母版頁中的按鈕引起回發(fā)，更新指定內(nèi)容頁的信息。

此時(shí)有兩個(gè)按鈕：ButtonOuter在母版頁中，ButtonInner在內(nèi)容頁面1中。

當(dāng)點(diǎn)擊ButtonOuter時(shí)，異步更新兩個(gè)內(nèi)容頁面的信息。

當(dāng)點(diǎn)擊ButtonInner時(shí)，異步更新母版面中的UpdatePanel1中的信息。

母版頁HTML代碼如下：

內(nèi)容頁面的HTML代碼如下：

<%@ Page Language="C#" MasterPageFile="~/MasterPage3.master" AutoEventWireup="true" CodeFile="Child3.aspx.cs" Inherits="Child3" Title="Untitled Page" %> <%@ MasterType VirtualPath="~/MasterPage3.master" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="Label1" runat="server" Font-Bold="True" ForeColor="White" Text="Label"></asp:Label> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="ButtonInner" /> </ContentTemplate> </asp:UpdatePanel> </asp:Content> <asp:Content ID="Content2" runat="server" ContentPlaceHolderID="ContentPlaceHolder2"> <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <asp:Label ID="Label2" runat="server" Font-Bold="True" ForeColor="White" Text="Label"></asp:Label> </ContentTemplate> </asp:UpdatePanel> </asp:Content>

母版頁的CS代碼如下：

protected void Page_Load(object sender, EventArgs e) { ScriptManager1.RegisterAsyncPostBackControl(this.Button1); } protected void Button1_Click(object sender, EventArgs e) { Label lbl1 = (Label)this.ContentPlaceHolder1.FindControl("Label1"); lbl1.Text = DateTime.Now.ToString(); Label lbl2 = (Label)this.ContentPlaceHolder2.FindControl("Label2"); lbl2.Text = DateTime.Now.ToString(); } public string TitleInfo { get { return lbl.Text; } set { lbl.Text = value; } }

內(nèi)容頁面的CS代碼如下：

protected void Button1_Click(object sender, EventArgs e) { Label1.Text = Master.TitleInfo; Master.TitleInfo = "ContentPage1's Action"; ((UpdatePanel)Master.FindControl("UpdatePanel1")).Update(); ; }

五、用戶控件中使用UpdatePanel控件
如果父頁面中存在ScriptManager控件，那用戶控件的頁面中不應(yīng)再放入ScriptManager控件了，只在用戶控件中加入U(xiǎn)pdatePanel。

轉(zhuǎn)載于:https://www.cnblogs.com/yangpan/p/3625045.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的ASP.NET中AJAX的UpdatePannel控件的用法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：判断字符串1是否在字符串2中出现的方法
下一篇：阿里云太不靠谱了