思洋互动网站建设学前班

UpdatePanel控件UpdatePanel控件是创建无闪烁页面的关键组件。在它最基础的应用程序中，只需将要更新的内容包含在该控件内，并将ScriptManager添加到页面就行了。当UpdatePanel内的某个控件产生到服务器的回送时，只会刷新UpdatePanel里面的内容。
UpdatePanel控件工作原理如图10-2所示。广州网站建设

（点击查看大图）图10-2  UpdatePanel工作原理

UpdatePanel控件的工作依赖于ScriptManager控件和客户端PageRequestManager类，当ScriptManager允许页面局部更新时，它会以异步的方式回传给服务器，与传统的整页回传方式不同的是只有包含在UpdatePanel中的页面部分会被更新，在从服务器返回XHTML之后，PageRequestManager会通过操作DOM对象来替换需要更新的代码片段。
UpdatePanel控件主要属性如表10-2所示。它们能够影响UpdatePanel的行为。广州网站建设
表10-2  UpdatePanel控件主要属性

属    性	属 性 描 述
ContentTemplate	定义UpdatePanel的内容。尽管在UpdatePane l的Properties窗口中不可见，但<ContentTemplate> 是UpdatePanel的一个重要属性。它是一个容器， 可以将控件作为UpdatePanel的子控件放置在 该容器里面。如果忘记了这个必需的 ContentTemplate，VWD会发出一条警告信息

(续表)

属    性	属 性 描 述
ChildrenAsTriggers	这个属性确定位于UpdatePanel内的控件能否刷新 UpdatePanel。默认值是True，如前面的练习所示。 当将这个值设置为False时，必须将UpdateMode设 置为Conditional。 注意，当设置为False时，UpdatePanel内定义的 控件仍然会导致到服务器的回送；它们只是不再自 动更新面板而已
Triggers	Triggers集合包含PostBackTrigger和 AsyncPostBackTrigger元素。如果要实现完整 的页面刷新，那么就可以用第一个，而如果要使 用在面板之外定义的控件更新UpdatePanel， 那么第二个就很有用
RenderMode	这个属性可以设置为Block(默认)或Inline 来表示UpdatePanel将它自己呈现为<div>元素 还是<span>元素
UpdateMode	表示UpdatePanel的更新模式，有两个选项：Always 和Conditional。Always是不管有没有Trigger， 其他控件都将更新该UpdatePanel，Conditional 表示只有当前UpdatePanel的Trigger，或 ChildrenAsTriggers属性为true时当前UpdatePanel 中控件引发的异步回送或者整页回送，或是服务 器端调用Update()方法才会引发更新该UpdatePanel

下面举例说明UpdatePanel控件的使用。
【例10-1】创建一个无闪烁页面：将Label和Button控件添加到页面，当单击浏览器中的按钮时，Label控件的Text属性会更新为服务器的当前日期和时间。
(1) 新建一个Web站点Ex10_1。
(2) 在Default.aspx中的<Title>标记中输入如下内容：

广州网站设计

1. <title>UpdatePanel控件的使用示例</title>

(3) 切换到Default.aspx的【设计】视图窗口，从【工具箱】的AJAX  Extensions类别中拖放一个ScriptManager控件到页面中；再拖放一个UpdatePanel控件到页面中；并将一个Label和一个Button控件从【工具箱】的【标准】类别中拖入UpdatePanel控件内。设置Button控件的Text属性为【无闪烁刷新时间】。之后，再在UpdatePanel控件外添加一个Button控件到页面，设置其Text属性为【闪烁刷新时间】。
(4) 清除Label控件的Text属性。要做到这一点，请右击其【属性】窗口中的Text属性，然后选择【重置】。
(5) 双击Button控件，为它们添加默认的事件处理程序如下：

1. protected void Button1_Click(object sender, EventArgs e)  
2.     {  
3.         Label1.Text = DateTime.Now.ToString();  
4.     }  
5.     protected void Button2_Click(object sender, EventArgs e)  
6.     {  
7.         Label1.Text = DateTime.Now.ToString();  
8. }  

(6) 切换到Default.aspx的【源】视图窗口，将看到VWD自动在<div>标记间生成了如下代码：

广州网站设计

1.     <div>
2.         <asp:ScriptManager ID="ScriptManager1" runat="server">
3.         </asp:ScriptManager>
4.         <asp:UpdatePanel ID="UpdatePanel1" runat="server">
5.             <ContentTemplate>
6.                 当前的日期和时间是：<asp:Label  ID="Label1"runat="server"></asp:Label>
7.                 <br />
8.                 <br />
9.                 <asp:Button ID="Button1" runat= "server" onclick="Button1_Click"
10.                     Text="无闪烁刷新页面" />
11.             </ContentTemplate>
12.         </asp:UpdatePanel>
13.         <br />
14.         <asp:Button ID="Button2" runat="server"  onclick="Button2_Click"
15. Text="闪烁刷新页面" />
16.     </div>

(7) 保存修改，然后在浏览器中请求页面。多次轮流单击2个按钮，将标签更新为当前日期和时间。注意现在单击2个按钮时的区别。当单击第一个按钮时页面没有闪烁。似乎只是更新了页面上的标签而已。但单击第二个按钮时页面会有闪烁，并且速度也似乎慢一点。
虽然使用UpdatePanel和ScriptManager已经足以创建无闪烁页面，但ASP.NET AJAX提供了更多控件来增强用户在Ajax激活的Web站点中的体验。改进用户体验的方法之一是使用UpdateProgress控件。另一种选择是使用Timer控件。