Atlas UpdatePanel简要介绍
英文版见:http://dflying.dflying.net/1/archive/96_introduction_to_atlas_updatepanel.html
UpdatePanel是ASP.NET Atlas中很重要的一个控件。它把传统的ASP.NET程序与最新的Web 2.0 AJAX无缝的连接在一起。如果你已经有一些基于ASP.NET的网站,UpdatePanel可以让你通过很小的修改轻松的实现AJAX。如果你并不很熟悉AJAX相关的技术比如JavaScript/DOM等,UpdatePanel更是可以让你不用书写一行客户端脚本而实现酷酷的AJAX应用。所需要的就是把需要动态更新的部分放置于一个UpdatePanel中,这一点与MagicAjax Framework有着异曲同工之妙。
使用UpdatePanel很简单,只需要如下几个步骤:
- 用ASP.NET实现你的设计,此刻你并不需要考虑任何有关AJAX的问题,就像普通的ASP.NET程序一样。
- 在页面上添加一个ScriptManager对象,并设定属性EnablePartialUpdates=true
- 将你希望动态更新的部分用UpdatePanel包围起来
- 为你添加的UpdatePanel设定Event Trigger
只要这些步骤就够了,不需要考虑XMLHTTPRequest或者ActiveX对象,也不需要书写客户端的脚本或者考虑如何与服务器通信,所有的细节,Atlas已经为你做好了。
Atlas UpdatePanel的实现也很简单:浏览器如同普通PostBack一样Post回服务器,服务器处理后再次发送给浏览器,这个过程就和传统的页面模型一样。但到达客户端时ScriptManager只更新位于UpdatePanel中的内容和ViewState。
使用UpdatePanel中应该注意的几个问题:
必须指定ScriptManager 中的属性EnablePartialUpdates=true,这样ScriptManager才会将普通的PostBack转化为对服务器的异步调用,也就是AJAX的方法。否则页面只会与传统的ASP.NET一样刷新。
其次,UpdatePanel提供两种引发异步PostBack的Trigger:
- ControlValueTrigger:当某个控件的某个指定的属性变化时更新。例如:ControlID="dropDownList1" PropertyName="SelectedValue"
- ControlEventTrigger:当某个控件发出指定事件时更新。例如:ControlID="button1" EventName="Click"
最后,每个UpdatePanel都有两种更新的方式:
- Always:每次AJAX PostBack或是普通PostBack的时候都会更新该Panel的内容
- Conditional:只有满足如下某一条件时才更新该Panel的内容:
- 当Panel中的某个控件引发了PostBack时
- 当Panel所指定的某个Trigger被引发时
- 当Panel的Update()方法在Codebehind中被调用时
一小段UpdatePanel的例子
1<atlas:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" />
2<atlas:UpdatePanel ID="up1" runat="server">
3<Triggers>
4 <atlas:ControlValueTrigger ControlID="dropDownList1" PropertyName="SelectedValue" />
5 <atlas:ControlEventTrigger controlID="button1" EventName="Click" />
6</Triggers>
7<ContentTemplate>
8 Content Here. e.g. TextBox, GridView
9</ContentTemplate>
10</atlas:UpdatePanel>
另外还有两个有用的Atlas特性:UpdateProgress控件可以在更新的等待时间自动显示一段提示信息,可以是一段“更新中……”文字也可以是GIF图像或者是更复杂的定制的内容。还有Atlas提供的错误处理机制,以便集中处理更新中可能发生的错误。目前有很多AJAX程序的错误处理机制设计的并不是很好,包括Windows Live Mail。 2<atlas:UpdatePanel ID="up1" runat="server">
3<Triggers>
4 <atlas:ControlValueTrigger ControlID="dropDownList1" PropertyName="SelectedValue" />
5 <atlas:ControlEventTrigger controlID="button1" EventName="Click" />
6</Triggers>
7<ContentTemplate>
8 Content Here. e.g. TextBox, GridView
9</ContentTemplate>
10</atlas:UpdatePanel>