ASPNETAJAX入門系列：使用UpdatePanel控件

1、ASP.NET AJAX入門系列 ：使用UpdatePanel控件 UpdatePanel可以用來創(chuàng)建豐富的局部更新Web應(yīng)用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一個控件，其強大之處在于不用編寫任何客戶端腳本，只要在一個頁面上添加幾個UpdatePanel控件和一個ScriptManager控件就可以自動實現(xiàn)局部更新。通過本文來學(xué)習(xí)一下UpdatePanel簡單的使用方法（第一篇）。主要內(nèi)容1UpdatePanel控件概述2UpdatePanel工作原理3ContentTemplate屬性4ContentTemplateContainer屬性5Trigge

2、rs屬性一UpdatePanel控件概述UpdatePanel可以用來創(chuàng)建豐富的局部更新Web應(yīng)用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一個控件，其強大之處在于不用編寫任何客戶端腳本，只要在一個頁面上添加幾個UpdatePanel控件和一個ScriptManager控件就可以自動實現(xiàn)局部更新。通過本文來學(xué)習(xí)一下UpdatePanel工作原理和使用方法。簡單的UpdatePanel定義如下： ContentTemplate Triggersasp:UpdatePanelUpdatePanel重要的屬性如下：屬性說明ChildrenAsTriggers當(dāng)Upda

3、teMode屬性為Conditional時，UpdatePanel中的子控件的異步回送是否會引發(fā)UpdatePanle的更新。RenderMode表示UpdatePanel最終呈現(xiàn)的HTML元素。Block（默認）表示， Inline 表示 UpdateMode表示UpdatePanel的更新模式，有兩個選項：Always和Conditional。Always是不管有沒有Trigger，其他控件都將更新該UpdatePanel，Conditional表示只有當(dāng)前UpdatePanel的Trigger，或ChildrenAsTriggers屬性為true時當(dāng)前UpdatePanel中控件引發(fā)的異

4、步回送或者整頁回送，或是服務(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

5、之后，PageRequestManager會通過操作DOM對象來替換需要更新的代碼片段?？匆幌鹿俜骄W(wǎng)站提供的UpdatePanel工作原理圖：三ContentTemplate屬性Contente Template標(biāo)簽用來定義UpdatePanel的內(nèi)容，在它里面可以放任何ASP.NET元素。如果你想要使用編程的手法來控制UpdatePanel中的內(nèi)容，就需要使用ContenteTemplateContainer，下面會說到，先來看一個簡單的ContentTemplate的例子。Background:White asp:ListItemSilver asp:ListItemDarkGray as

6、p:ListItemKhaki asp:ListItemDarkKhaki asp:ListItem asp:DropDownList div ContentTemplateasp:UpdatePanel事件代碼：voidDropDownSelection_Change(Objectsender,EventArgseCalendar1.DayStyle.BackColor=System.Drawing.Color.FromName(ColorList.SelectedItem.Value;script四ContentTemplateContainer屬性如果要使用編程的手法去設(shè)置UpdateP

7、anel中的內(nèi)容，需要創(chuàng)建一個UpdatePanel，并且添加控件到ContentTemplateContainer，而不能直接添加控件到ContentTemplate，如果想直接設(shè)置ContentTemplate，則需要編寫一個自定義的Template，并去實現(xiàn)位于System.Web.UI命名空間下的接口ITemplate?？匆粋€簡單的來自于官方網(wǎng)站的例子：protectedvoidPage_Load(objectsender,EventArgseUpdatePanelup1=newUpdatePanel(;up1.ID=UpdatePanel1;up1.UpdateMode=Update

8、PanelUpdateMode.Conditional;Buttonbutton1=newButton(;button1.ID=Button1;button1.Text=Submit;button1.Click+=newEventHandler(Button_Click;Labellabel1=newLabel(;label1.ID=Label1;label1.Text=Afullpagepostbackoccurred.;up1.ContentTemplateContainer.Controls.Add(button1;up1.ContentTemplateContainer.Control

9、s.Add(label1;Page.Form.Controls.Add(up1;protectedvoidButton_Click(objectsender,EventArgse(LabelPage.FindControl(Label1.Text=Panelrefreshedat+DateTime.Now.ToString(;scriptUpdatePanelAddedProgrammaticallyExample titlehead div formbodyhtml五Triggers屬性在ASP.NET AJAX中有兩種Triggers：分別為AsyncPostBackTrigger和Pos

10、tBackTrigger，AsyncPostBackTrigge用來指定某個服務(wù)器端控件以及其將觸發(fā)的服務(wù)器端事件作為該UpdatePanel的異步更新觸發(fā)器，它需要設(shè)置的屬性有控件ID和服務(wù)端控件的事件；PostBackTrigger用來指定在UpdatePanel中的某個服務(wù)端控件，它所引發(fā)的回送不使用異步回送，而仍然是傳統(tǒng)的整頁回送。這一點跟Atlas有很大的區(qū)別，大家需要注意?？匆粋€小例子，雖然兩個Button都放在了UpdatePanel中，但是由于在PostBackTrigger中指定了Button2，所以它使用的仍然是整頁回送。voidButton1_Click(objectse

11、nder,EventArgsethis.Label1.Text=更新時間：+System.DateTime.Now.ToString(;voidButton2_Click(objectsender,EventArgsethis.Label1.Text=更新時間：+System.DateTime.Now.ToString(;scriptUpdatePanelTriggerSample titlehead asp:ScriptManager div asp:Label div ContentTemplate Triggers asp:UpdatePanel formbodyhtmlUpdatePa

12、nel可以用來創(chuàng)建豐富的局部更新Web應(yīng)用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一個控件，其強大之處在于不用編寫任何客戶端腳本，只要在一個頁面上添加幾個UpdatePanel控件和一個ScriptManager控件就可以自動實現(xiàn)局部更新。通過本文來學(xué)習(xí)一下UpdatePanel其他的一些使用方法（第二篇）。主要內(nèi)容1用編程的方法控制UpdatePanel的更新2UpdatePanel的嵌套使用3同一頁面上使用多個UpdatePanel一用編程的方法控制UpdatePanel的更新對于UpdatePanel，我們也可以使用編程的方法來控制它的更新，可以通過Sc

13、riptManager的RegisterAsyncPostBackControl(方法注冊一個異步提交的控件，并且調(diào)用UpdatePanel的Update(方法來讓它更新。再次用我在前面的文章中用到的一個無聊的時間更新例子來看一下，有時候我覺得例子過于復(fù)雜更加不好說明白所要講的內(nèi)容，如下代碼所示，注意Button1并不包含在UpdatePanel中：voidButton1_Click(objectsender,EventArgsethis.Label2.Text=DateTime.Now.ToString(;scriptRefreshinganUpdatePanelProgrammatical

14、ly titlehead asp:Label asp:Label ContentTemplate asp:UpdatePanel div formbodyhtml這時候不用多說，肯定是整頁提交了，運行如下圖所示：再次修改上面的例子，使用ScriptManager的RegisterAsyncPostBackControl(注冊Button1為一個異步提交控件，并且調(diào)用UpdatePanel的Update(方法：voidPage_Load(objectsender,EventArgseScriptManager1.RegisterAsyncPostBackControl(Button1;voidB

15、utton1_Click(objectsender,EventArgsethis.Label2.Text=DateTime.Now.ToString(;this.UpdatePanel1.Update(;scriptRefreshinganUpdatePanelProgrammatically title head asp:Label asp:Label ContentTemplate asp:UpdatePanel div form body html這時候可以看到，已經(jīng)是異步提交了：二 UpdatePanel的嵌套使用UpdatePanel還可以嵌套使用，即在一個UpdatePanel的C

16、ontentTemplate中還可以放入另一個UpdatePanel。當(dāng)最外面的UpdatePanel被觸發(fā)更新時，它里面的子UpdatePanel也隨著更新，里面的UpdatePanel觸發(fā)更新時，只更新它自己，而不會更新外層的UpdatePanel?？聪旅娴睦樱簊criptUpdatePanelUpdateModeExample titlediv.NestedPanelposition:relative;margin:2%5%2%5%; styleheadOuterPanel legendLastupdatedonNestedPanel1 legendLastupdatedon fiel

17、dset div ContentTemplate asp:UpdatePanel fieldset div ContentTemplate asp:UpdatePanel div formbodyhtml運行后如下：三同一頁面上使用多個UpdatePanel使用UpdatePanel的時候并沒有限制在一個頁面上用多少個UpdatePanel，所以我們可以為不同的需要局部更新的頁面區(qū)域加上不同的UpdatePanel。由于UpdatePanel默認的UpdateMode是Always，如果頁面上有一個局部更新被觸發(fā)，則所有的UpdatePanel都將更新，這是我們不愿看到的，我們只需要Updat

18、ePanel在它自己的觸發(fā)器觸發(fā)的時候更新就可以了，所以需要把UpdateMode設(shè)置為Conditional。來看一下官方網(wǎng)站上提供的一個例子：包括兩個UpdatePanel，其中一個用來用戶輸入而另一個則用來顯示數(shù)據(jù)，每一個UpdatePanel的UpdateMode屬性都設(shè)置為Conditional。當(dāng)我們單擊Cancel按鈕時，只有用來用戶輸入的那個UpdatePanel刷新，當(dāng)單擊Insert按鈕時，兩個UpdatePanel都刷新。代碼如下：EnterNewEmployees titleprivateList EmployeeList; protectedvoidPage_Load

19、(if(!IsPostBackEmployeeList=newList (; EmployeeList.Add(newEmployee(1,Jump,Dan;EmployeeList.Add(newEmployee(2,Kirwan,Yvette;ViewStateEmployeeList=EmployeeList;elseEmployeeList=(List ViewStateEmployeeList; EmployeesGridView.DataSource=EmployeeList;EmployeesGridView.DataBind(;protectedvoidInsertButton

20、_Click(objectsender,EventArgseif(String.IsNullOrEmpty(FirstNameTextBox.Text|String.IsNullOrEmpty(LastNameTextBox.Textreturn;intemployeeID=EmployeeListEmployeeList.Count-1.EmployeeID+1;stringlastName=Server.HtmlEncode(FirstNameTextBox.Text;stringfirstName=Server.HtmlEncode(LastNameTextBox.Text;FirstNameTextBox.Text=String.Empty;LastNameTextBox.Text=String.Empty;EmployeeList.Add(newEmployee(employeeID,lastName,firstName;ViewStateEmployeeList=E