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