首頁 > 開發者 > ASP

asp.net UpdatePanel的簡單用法

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

UpdatePanel控制頁面的局部更新，這個更新功能依賴於scriptManger控制項的EnablePartialRendering屬性，如果這個屬性設定為false局部更新會失去作用(scriptManger控制項的EnablePartialRendering屬性的預設值為true不必刻意去設定)
下面是一個完整的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的時候頁面顯示回傳而已 ！
1,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="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的觸發器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">
<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>

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

先記錄這些~還望多多大蝦們多多指教

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關文章
ASP學習總結：錯誤碼
反爬蟲：利用ASP.NET MVC的Filter和緩衝（入坑出坑）
ASP.NET Core 2.0利用MassTransit整合RabbitMQ
實戰中的asp.net core結合Consul叢集&Docker實現服務治理
asp DateDiff實現文字在特定時間後消失
設定和讀取ASP.Net全域變數的方法

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More