UpdatePanel可以用來創建豐富的局部更新Web應用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一個控件，其強大之處在於不用編寫任何客戶端腳本，只要在一個頁面上添加幾個UpdatePanel控件和一個ScriptManager控件就可以自動實現局部更新。通過本文來學習一下UpdatePanel簡單的使用方法（第一篇）。
主要內容
1．UpdatePanel控件概述
2．UpdatePanel工作原理
3．ContentTemplate屬性
4．ContentTemplateContainer屬性
5．Triggers屬性
一．UpdatePanel控件概述
UpdatePanel可以用來創建豐富的局部更新Web應用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一個控件，其強大之處在於不用編寫任何客戶端腳本，只要在一個頁面上添加幾個UpdatePanel控件和一個ScriptManager控件就可以自動實現局部更新。通過本文來學習一下UpdatePanel工作原理和使用方法。簡單的UpdatePanel定義如下：重要的屬性如下：
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <!--
--> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger /> <asp:PostBackTrigger /> </Triggers></asp:UpdatePanel>UpdatePanel
|
屬性
|
說明
|
|
ChildrenAsTriggers |
當UpdateMode屬性爲Conditional時，UpdatePanel中的子控件的異步回送是否會引發UpdatePanle的更新。 |
|
RenderMode |
表示UpdatePanel最終呈現的HTML元素。Block（默認）表示<div>，Inline表示<span> |
|
UpdateMode |
表示UpdatePanel的更新模式，有兩個選項：Always和Conditional。Always是不管有沒有Trigger，其他控件都將更新該UpdatePanel，Conditional表示只有當前UpdatePanel的Trigger，或ChildrenAsTriggers屬性爲true時當前UpdatePanel中控件引發的異步回送或者整頁回送，或是服務器端調用Update()方法纔會引發更新該UpdatePanel。 |
二．UpdatePanel工作原理
UpdatePanel的工作依賴於ScriptManager服務端控件（ASP.NET AJAX入門系列（2）：使用ScriptManager控件）和客戶端PageRequestManager類（Sys.WebForms.PageRequestManager，在後面的客戶端類中會專門說到），當ScriptManager中允許頁面局部更新時，它會以異步的方式回傳給服務器，與傳統的整頁回傳方式不同的是隻有包含在UpdatePanel中的頁面部分會被更新，在從服務端返回HTML之後，PageRequestManager會通過操作DOM對象來替換需要更新的代碼片段。
看一下官方網站提供的UpdatePanel工作原理圖：
三．ContentTemplate屬性
Contente Template標籤用來定義UpdatePanel的內容，在它裏面可以放任何ASP.NET元素。如果你想要使用編程的手法來控制UpdatePanel中的內容，就需要使用ContenteTemplateContainer，下面會說到，先來看一個簡單的ContentTemplate的例子。四．ContentTemplateContainer屬性
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Calendar ID="Calendar1" ShowTitle="True" runat="server" /> <div> Background: <br /> <asp:DropDownList ID="ColorList" AutoPostBack="True" OnSelectedIndexChanged="DropDownSelection_Change" runat="server"> <asp:ListItem Selected="True" Value="White"> White </asp:ListItem> <asp:ListItem Value="Silver"> Silver </asp:ListItem> <asp:ListItem Value="DarkGray"> Dark Gray </asp:ListItem> <asp:ListItem Value="Khaki"> Khaki </asp:ListItem> <asp:ListItem Value="DarkKhaki"> D ark Khaki </asp:ListItem> </asp:DropDownList> </div> </ContentTemplate></asp:UpdatePanel>事件代碼：
<script runat="server">
void DropDownSelection_Change(Object sender, EventArgs e)
{
Calendar1.DayStyle.BackColor = System.Drawing.Color.FromName(ColorList.SelectedItem.Value);
}
</script>
如果要使用編程的手法去設置UpdatePanel中的內容，需要創建一個UpdatePanel，並且添加控件到ContentTemplateContainer，而不能直接添加控件到ContentTemplate，如果想直接設置ContentTemplate，則需要編寫一個自定義的Template，並去實現位於System.Web.UI命名空間下的接口ITemplate。看一個簡單的來自於官方網站的例子：
<%@ Page Language="C#" %><script runat="server"> protected void Page_Load(object sender, EventArgs e) { UpdatePanel up1 = new UpdatePanel(); up1.ID = "UpdatePanel1"; up1.UpdateMode = UpdatePanelUpdateMode.Conditional; Button button1 = new Button(); button1.ID = "Button1"; button1.Text = "Submit"; button1.Click += new EventHandler(Button_Click); Label label1 = new Label(); label1.ID = "Label1"; label1.Text = "A full page postback occurred."; up1.ContentTemplateContainer.Controls.Add(button1); up1.ContentTemplateContainer.Controls.Add(label1); Page.Form.Controls.Add(up1); } protected void Button_Click(object sender, EventArgs e) { ((Label)Page.FindControl("Label1")).Text = "Panel refreshed at " + DateTime.Now.ToString(); }</script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>UpdatePanel Added Programmatically Example</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="TheScriptManager" runat="server" /> </div> </form></body></html>五．Triggers屬性
在ASP.NET AJAX中有兩種Triggers：分別爲AsyncPostBackTrigger和PostBackTrigger，AsyncPostBackTrigge用來指定某個服務器端控件以及其將觸發的服務器端事件作爲該UpdatePanel的異步更新觸發器，它需要設置的屬性有控件ID和服務端控件的事件；PostBackTrigger用來指定在UpdatePanel中的某個服務端控件，它所引發的回送不使用異步回送，而仍然是傳統的整頁回送。這一點跟Atlas有很大的區別，大家需要注意。看一個小例子，雖然兩個Button都放在了UpdatePanel中，但是由於在PostBackTrigger中指定了Button2，所以它使用的仍然是整頁回送。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><script runat="server"> void Button1_Click(object sender, EventArgs e) { this.Label1.Text = "更新時間：" + System.DateTime.Now.ToString(); } void Button2_Click(object sender, EventArgs e) { this.Label1.Text = "更新時間：" + System.DateTime.Now.ToString(); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>UpdatePanel Trigger Sample</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div> <asp:Button ID="Button1" runat="server" Text="異步回送" OnClick="Button1_Click"/> <asp:Button ID="Button2" runat="server" Text="整頁回送" OnClick="Button2_Click"/><br /> <br /> <asp:Label ID="Label1" runat="server" Text="當前時間" Font-Bold="True" Font-Size="Large"></asp:Label></div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1"/> <asp:PostBackTrigger ControlID="Button2" /> </Triggers> </asp:UpdatePanel> </form></body></html>
（未完待續）
示例代碼下載：http://www.cnblogs.com/Files/Terrylee/ASPNETAJAXUpdatePanelDemo1