UpdatePanel可以用來創(chuàng)建豐富的局部更新Web應(yīng)用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一個控件，其強大之處在于不用編寫任何客戶端腳本，只要在一個頁面上添加幾個UpdatePanel控件和一個ScriptManager控件就可以自動實現(xiàn)局部更新。通過本文來學(xué)習(xí)一下UpdatePanel簡單的使用方法（第一篇）。
主要內(nèi)容
1．UpdatePanel控件概述
2．UpdatePanel工作原理
3．ContentTemplate屬性
4．ContentTemplateContainer屬性
5．Triggers屬性
一．UpdatePanel控件概述
UpdatePanel可以用來創(chuàng)建豐富的局部更新Web應(yīng)用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一個控件，其強大之處在于不用編寫任何客戶端腳本，只要在一個頁面上添加幾個UpdatePanel控件和一個ScriptManager控件就可以自動實現(xiàn)局部更新。通過本文來學(xué)習(xí)一下UpdatePanel工作原理和使用方法。簡單的UpdatePanel定義如下：
<asp:UpdatePanel ID="UpdatePanel_Test" runat="server"> <ContentTemplate> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger /> <asp:PostBackTrigger /> </Triggers> </asp:UpdatePanel>
UpdatePanel重要的屬性如下：
屬性
說明
ChildrenAsTriggers
當(dāng)UpdateMode屬性為Conditional時，UpdatePanel中的子控件的異步回送是否會引發(fā)UpdatePanle的更新。
RenderMode
表示UpdatePanel最終呈現(xiàn)的HTML元素。Block（默認(rèn)）表示<div>，Inline表示<span>
UpdateMode
表示UpdatePanel的更新模式，有兩個選項：Always和Conditional。Always是不管有沒有Trigger，其他控件都將更新該UpdatePanel，Conditional表示只有當(dāng)前UpdatePanel的Trigger，或ChildrenAsTriggers屬性為true時當(dāng)前UpdatePanel中控件引發(fā)的異步回送或者整頁回送，或是服務(wù)器端調(diào)用Update()方法才會引發(fā)更新該UpdatePanel。
二．UpdatePanel工作原理
UpdatePanel的工作依賴于ScriptManager服務(wù)端控件（
ASP.NET AJAX入門系列（2）：使用ScriptManager控件）和客戶端PageRequestManager類（Sys.WebForms.PageRequestManager，在后面的客戶端類中會專門說到），當(dāng)ScriptManager中允許頁面局部更新時，它會以異步的方式回傳給服務(wù)器，與傳統(tǒng)的整頁回傳方式不同的是只有包含在UpdatePanel中的頁面部分會被更新，在從服務(wù)端返回HTML之后，PageRequestManager會通過操作DOM對象來替換需要更新的代碼片段。
看一下官方網(wǎng)站提供的UpdatePanel工作原理圖：
三．ContentTemplate屬性
Contente Template標(biāo)簽用來定義UpdatePanel的內(nèi)容，在它里面可以放任何ASP.NET元素。如果你想要使用編程的手法來控制UpdatePanel中的內(nèi)容，就需要使用ContenteTemplateContainer，下面會說到，先來看一個簡單的ContentTemplate的例子。
<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>
事件代碼：
void DropDownSelection_Change(Object sender, EventArgs e) { Calendar1.DayStyle.BackColor =System.Drawing.Color.FromName(ColorList.SelectedItem.Value); }</script>
四．ContentTemplateContainer屬性
如果要使用編程的手法去設(shè)置UpdatePanel中的內(nèi)容，需要創(chuàng)建一個UpdatePanel，并且添加控件到ContentTemplateContainer，而不能直接添加控件到ContentTemplate，如果想直接設(shè)置ContentTemplate，則需要編寫一個自定義的Template，并去實現(xiàn)位于System.Web.UI命名空間下的接口ITemplate?？匆粋€簡單的來自于官方網(wǎng)站的例子：
<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用來指定某個服務(wù)器端控件以及其將觸發(fā)的服務(wù)器端事件作為該UpdatePanel的異步更新觸發(fā)器，它需要設(shè)置的屬性有控件ID和服務(wù)端控件的事件；PostBackTrigger用來指定在UpdatePanel中的某個服務(wù)端控件，它所引發(fā)的回送不使用異步回送，而仍然是傳統(tǒng)的整頁回送。這一點跟Atlas有很大的區(qū)別，大家需要注意?？匆粋€小例子，雖然兩個Button都放在了UpdatePanel中，但是由于在PostBackTrigger中指定了Button2，所以它使用的仍然是整頁回送。
View Code
