先給一個簡單的例子,後面給一個比較復雜的例子。
改進後的UpdatePanel使頁面部分更新(Partial-Page Updates)實現起來非常容易。
要想在已有web頁面或新建頁面中加入部分更新內容,都十分容易,下面幾個步驟:
<1>在頁面中加入ScriptManager控件。並保證ScriptManager控件的EnablePartialRendering屬性值為true。若EnablePartialRendering=false,那麼下面所做的對頁面部分更新的任何設置都不能實現。EnablePartialRendering的默認值是true,不作修改就行。
<ASP:ScriptManager ID="ScriptManager1" runat="server">
</ASP:ScriptManager>
<2>把UpdatePanel控件加到頁面中。在 <ContentTemplate></ContentTemplate>中加入想部分更新的內容就行了。
<ASP:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<fIEldset>
<legend>In UpdatePanel</legend>
UpdatePanel content refreshed at <%=DateTime.Now.ToString() %>
<ASP:Button ID="Button1" Text="RefreshUpdatePanel" runat="server" />
</fIEldset>
</ContentTemplate>
</ASP:UpdatePanel>
為了對比,在UpdatePanel外面加一行代碼
<div>Out of UpdatePanel,refreshed at <%=DateTime.Now.ToString() %></div>
這樣部分更新功能就實現了,或許都不敢相信。
看看效果吧。
兩部分更新時間不一樣!
UpdatePanel控件的功能是很強大的。這是最簡單的應用。
部分更新時,提交給服務器的數據跟一般的postback沒有什麼區別,所有數據包括vIEwstate中的數據被傳回服務器。不同的地方在於從服務器只返回部分更新部分的數據。由於UpdatePanel控件的引入,postback被分為兩種,asynchronous postback和normal postback,asynchronous postback引起UpdatePanel的更新,normal postback引發整個頁面的更新。使用ScriptManager的IsInAsyncPostBack屬性可以判斷回傳的類型。
介紹一下UpdatePanel的屬性。
<1>Triggers
有兩種AsyncPostBackTrigger,PostBackTrigger。
AsyncPostBackTrigger
來指定某個控件的某個事件引發異步回傳(asynchronous postback),即部分更新。屬性有ControlID和EventName。分別用來指定控件ID和控件事件,若沒有明確指定EventName的值,則自動采用控件的默認值,比如button就是click。把ContorlID設為UpdatePanel外部控件的ID,可以使外部控件控制UpdatePanel的更新。
PostBackTrigger
來指定UpdatePanel內的某個控件引發整個頁面的更新(normal postback)。
<Triggers>
<ASP:PostBackTrigger ControlID="Button1"/>
<ASP:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
</Triggers>
<2>UpdateMode
有兩個值:Always,Conditional。總是更新,有條件更新。
確定當asynchronous postbacks發生時,是否總是更新。若頁面中只有一個UpdatePanel控件,這個值好像沒有什麼意義。但是當頁面中存在多個UpdatePanel,或者UpdatePanel中包含UpdatePanel的復雜情況時,這個值的設定就可以使各個UpdatePanel在各種合適時機更新。
<3>ChilderAsTriggers
bool值,默認是true。若設為false,則UpdatePanel的子控件引發異步回傳(asynchronous postback),但是不更新當前UpdatePanel(在多個UpdatePanel的頁面中發現的)。這裡比較難於理解,甚至我理解的是錯誤的。請高手指點。
該屬性只在UpdateMode=Conditional條件下有意義。右UpdateMode為Always,ChilderAsTriggers=false就則引發異常。
另外UpdatePanel還提供了一個方法Update(),可以通過代碼控件部分更新。
先說這麼多。下面給個代碼,使用了這些屬性。
<%@ Page Language="C#" %>
<!DOCTYPE Html PUBLIC "-//W3C//DTD XHtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
<script runat="server">
protected void Button4_Click(object sender, EventArgs e)
{
UpdatePanel1.Update();
}
</script>
<html XMLns="http://www.w3.org/1999/xHtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/CSS">
.UpdatePanelTitle
{
color:red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<ASP:ScriptManager ID="ScriptManager1" runat="server">
</ASP:ScriptManager>
<fIEldset>
<legend class="UpdatePanelTitle">UpdatePanel控件外</legend>
<ASP:Button runat="server" ID="Button5" Text="引發常規回傳" /><br />
<ASP:Button runat="server" ID="Button1" Text="引發異步回傳" /><br />
Refrest at <%=DateTime.Now.ToUniversalTime()%>
</fIEldset>
<ASP:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<Triggers>
<ASP:PostBackTrigger ControlID="Button2" />
</Triggers>
<ContentTemplate>
<fIEldset>
<legend class="UpdatePanelTitle">UpdatePanel1</legend>
<ASP:Button runat="server" ID="Button2" Text="引發常規回傳" />
Refresh at <%=DateTime.Now.ToUniversalTime()%>
</fIEldset>
</ContentTemplate>
</ASP:UpdatePanel>
<ASP:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<Triggers>
<ASP:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<fIEldset>
<legend class="UpdatePanelTitle">UpdatePanel2</legend>
<ASP:Button runat="server" ID="Button3" Text="InPanel2" />
Refresh at <%=DateTime.Now.ToUniversalTime() %><br />
<ASP:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Always">
<ContentTemplate>
<fIEldset>
<legend class="UpdatePanelTitle">UpdatePanel3:I'm Child of UpdatePanel2</legend>
<ASP:Button runat="server" ID="Button4" Text="InPanel3" />
Refresh at <%=DateTime.Now.ToUniversalTime()%>
</fIEldset>
</ContentTemplate>
</ASP:UpdatePanel>
</fIEldset>
</ContentTemplate>
</ASP:UpdatePanel>
<ASP:UpdatePanel ID="UpdatePanel4" UpdateMode="Conditional" runat="server" ChildrenAsTriggers="false">
<ContentTemplate>
<fIEldset>
<legend class="UpdatePanelTitle">UpdatePanel4</legend>
<ASP:Button runat="server" ID="Button6" Text="引發常規回傳,但不更新自己" />
Refresh at <%=DateTime.Now.ToUniversalTime()%>
</fIEldset>
</ContentTemplate>
</ASP:UpdatePanel>
</div>
</form>
</body>
</Html>