程式師世界 >> 編程語言 >> .NET網頁編程 >> C# >> 關於C# >> UpdatePanel的用法詳解

UpdatePanel的用法詳解

編輯：關於C#

一、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的時候頁面顯示回發而已！

2、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>


</Triggers>
</asp:UpdatePanel>
<br />
<% =DateTime.Now.ToString()%>
<asp:Button ID="Button2" runat="server" Text="Button" />
</form>
</body>
</html>