UpdatePanel是Atlas中一個很重要的控制項，功能強大且容易使用，可以使我們只做很小的改動就可以向已有的ASP.NET網站添加Ajax。採用Dflying的建議，我也是由UpdatePanel進入Atlas的世界。本文將通過可視化和代碼兩種方式來實現向已有的ASP.NET應用程式中添加UpdatePanel。
主要內容
1．UpdatePanel概述
2．使用可視化方式
3．使用代碼方式
一．UpdatePanel概述
UpdatePanel是Atlas中一個很重要的控制項，功能強大且容易使用，可以使我們只做很小的改動就可以向已有的ASP.NET網站添加Ajax。採用Dflying的建議，我也是由UpdatePanel進入Atlas的世界。本文將通過可視化和代碼兩種方式來實現向已有的ASP.NET應用程式中添加UpdatePanel。看一小段UpdatePanel的樣本程式：
<Atlas:UpdatePanel ID="UpdatePanel1" runat="server" Mode="Always">
<Triggers>
<Atlas:ControlEventTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Width="164px" Font-Bold="True"></asp:Label>
</ContentTemplate>
</Atlas:UpdatePanel>
我們需要注意的是：
1．UpdatePanel的更新方式有兩種，即上面的Mode
更新方式 |
說明 |
Always |
每次AJAX PostBack或是普通PostBack的時候都會更新該Panel的內容
Mode="Always" |
Conditional |
只有滿足如下某一條件時才更新該Panel的內容：
當Panel中的某個控制項引發了PostBack時
當Panel所指定的某個Trigger被引發時
當Panel的Update()方法在Codebehind中被調用時
Mode=" Conditional" |
2．Triggers元素指定了發生動作的事件來源，UpdatePanel提供兩種引發非同步PostBack的Trigger：
Triggers |
說明 |
ControlValueTrigger |
當某個控制項的某個指定的屬性變化時更新。
<Atlas:ControlValueTrigger ControlID="DropDownList1" PropertyName="SelectedValue" /> |
ControlEventTrigger |
當某個控制項發出指定事件時更新。
<Atlas:ControlEventTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" /> |
3．ContentTemplate元素中指定了希望更新的部分，我們把需要動態更新的控制項等都放在ContentTemplate中。下面我們將通過通過可視化和代碼兩種方式來看一下如何使用UpdatePanel。
二．使用可視化方式添加
1．建立Web Site項目，添加一個DropDownList和一個Label，並為DropDownList添加一些簡單的Item：
<asp:DropDownList ID="DropDownList1" runat="server" Width="167px" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem>Nancy</asp:ListItem>
<asp:ListItem>Andrew</asp:ListItem>
<asp:ListItem>Janet</asp:ListItem>
<asp:ListItem>Margaret</asp:ListItem>
</asp:DropDownList>
設定DropDownList的AutoPostBack屬性為True，在SelectedIndexChanged事件中添加如下代碼：
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
this.Label1.Text = "Selected : " + this.DropDownList1.SelectedValue;
}
2．運行程式，這是一個標準的ASP.NET應用程式，Label將根據DropDownList的選擇不同顯示不同的文本，但是這個頁面是完全重新整理的，在選擇的時候，瀏覽器的狀態列將會顯示一個進度條，如下圖所示：
下面我們將通過可視化的方式為該應用程式添加上Atlas UpdatePanel。
3．托拽一個UpdatePanel控制項到頁面上，如何添加Atlas控制項到工具箱請參考Add“Atlas”controls to the toolbox，這時將會自動添加Microsoft.Web.Atlas.dll到項目中。
4．添加ScriptManager到頁面。
5．設定EnablePartialRendering屬性為True。
6．拖拽Label控制項到UpdatePanel中，並設定UpdatePanel的屬性和Triggers。
至此，我們就通過可視化的方式完成了對UpdatePanel的添加，運行程式就會看到效果了。
三．使用代碼方式添加
接上面的第二步，我們看看添加具體的代碼。添加完Microsoft.Web.Atlas.dll的引用後，在頁面中先添加：
<%@ Register Assembly="Microsoft.Web.Atlas" Namespace="Microsoft.Web.UI" TagPrefix="Atlas" %>
添加ScriptManager控制項，並設定EnablePartialRendering屬性為true，這一點切記！關於ScriptManager的詳細介紹可以參考Atlas學習手記（2）：全面瞭解ScriptManager。
<Atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
</Atlas:ScriptManager>
下面就該主角UpdatePanel登場了，在這裡需要設定Triggers，Triggers指定了發生動作的事件來源，也可以設定UpdatePanel的更新方式。
<Atlas:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<Atlas:ControlValueTrigger ControlID="DropDownList1" PropertyName="SelectedValue" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Width="164px" Font-Bold="True"></asp:Label>
</ContentTemplate>
</Atlas:UpdatePanel>
這裡我們設定的是ControlValueTrigger，如果要設定ControlEventTrigger，代碼如下：
<Atlas:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<Atlas:ControlEventTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Width="164px" Font-Bold="True"></asp:Label>
</ContentTemplate>
</Atlas:UpdatePanel>
到這兒所有的步驟都做完了，運行就可以體會到效果了。在這個過程中，我們並沒有考慮任何的XMLHTTPRequest或者ActiveX對象，也沒有編寫任何的用戶端指令碼代碼，這一切Atlas已經完全為我們做好了。
<
