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>
（未完待續）
