初学 ASP.NET AJAX (四)：Timer 和 UpdateProgress

1 概述

Timer 和 UpdateProgress 是 ASP.NET AJAX Extensions 1.0 中所包含的其他二个简单的服务器控件。Timer 控件用于定时触发事件，而 UpdateProgress 控件用于在局部更新时为用户显示进度条。

2 Timer 控件

Timer 控件在预定的时间间隔中执行回发。如果将 Timer 控件和 UpdatePanel 控件一起使用，就可以定时的进行局部页面的刷新。也可以使用 Timer 控件来发送整个页面。

2.1 Timer 控件的使用场景

可以在以下情况下使用 Timer 控件：

• 周期性的更新一个或多个 UpdatePanel 控件，而无须刷新整个页面。
• 每次 Timer 控件回发时都在服务器端运行代码。
• 定时的同步发送整个页面到服务器。

2.2 背景

Timer 控件是一个将 Javascript 组件嵌入到 Web 页面中的服务器控件。Javascript 组件在经过定义在 Interval 属性中定义的间隔时启动来自浏览器的回发。可以在运行在服务器上的代码中设置 Timer 控件的属性，这些属性都会被传送到 Javascript 组件。
在使用 Timer 控件时，页面中必须包含一个 ScriptManager 控件。
当 Timer 控件启动一个回发时，Timer 控件在服务器端触发 Tick 事件，可以为 Tick 事件创建一个处理程序来执行页面发送回服务器的动作。
设置 Interval 属性以指定回送发生的频率，设置 Enabled 属性以开启或关闭 Timer，Interval 属性以毫秒为单位，默认为 60000 毫秒，也即 60 秒。
注意：将 Interval 属性设置为很小的值将会导致频率的回发，从而引发性能问题，所以，要以必要的频率使用 Timer 控件来刷新内容。
如果不同的 UpdatePanel 必须以不同的间隔更新，那么就可以在同一页面中包含多个 Timer 控件。另一种选择是，单个 Timer 控件实例可以是同一页面中多个UpdatePanel 控件的触发器。

2.3 在 UpdatePanel 控件内部使用 Timer 控件

当 Timer 控件被包含在 UpdatePanel 控件的内部时，Timer 控件自动成为 UpdatePanel 控件的触发器。可以将 UpdatePanel 控件的 ChildrenAsTriggers 属性设置为 false 来覆盖这种行为。
对于在 UpdatePanel 控件内部的 Timer 控件，Javascript 时间组件仅在每次回发结束时重新创建，因此，时间间隔在页面从回发返回前不会开始。例如，如果 Interval 属性被设置为 60000 毫秒，而回送花费了3秒来完成，即下次回送在前一次回送发生后63秒之后才发生。
下列示例展示了如何在 UpdatePanel 控件内部包含一个 Timer 控件，其中指定的 Timer1_Tick 即为回发时的事件处理程序：

<asp:ScriptManager runat="server" id="ScriptManager1" />
<asp:UpdatePanel runat="server" id="UpdatePanel1"
    UpdateMode="Conditional">
  <contenttemplate>
    <asp:Timer id="Timer1" runat="server"
      Interval="120000"
      OnTick="Timer1_Tick">
    </asp:Timer>
  </contenttemplate>
</asp:UpdatePanel>

2.4 在 UpdatePanel 控件外部使用 Timer 控件

当 Timer 控件在 UpdatePanel 控件的外部时，必须显式的定义 Timer 控件为要更新的 UpdatePanel 控件的触发器。
如果 Timer 控件在 UpdatePanel 控件的外部，Javascript 时间组件会像回发已被处理一样继续运行。例如，如果 Interval 属性被设置为 60000 毫秒（60秒），回发需要3秒来完成，则下次回发将在上次回发的后60秒后回发，而用户看到的在 UpdatePanel 控件中的更新内容只有57秒。
必须设置 Interval 属性为使一个异步回发在下次回发启动前可以完成的值，如果新的回发在更早的回发处理期间启动的话，早期的回发将被取消。
下列示例展示了如何在 UpdatePanel 控件外部使用 Timer 控件。

<asp:ScriptManager runat="server" id="ScriptManager1" />
<asp:Timer ID="Timer1" runat="server" Interval="120000"
  OnTick="Timer1_Tick">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="Timer1"
        EventName="Tick" />
    </Triggers>
    <ContentTemplate>
      <asp:Label ID="Label1" runat="server" ></asp:Label>
  </ContentTemplate>

</asp:UpdatePanel>

3 UpdateProgress 控件

UpdateProgress 控件提供 UpdatePanel 控件中局部页面更新时的状态信息。可以定制 UpdateProgress 控件的默认内容和布局。要防止在局部页面更新时发生闪屏，可以设置 UpdateProgress 控件在显示前的延迟。

3.1 场景

当一个页面中包含一个或多个 UpdatePanel 控件用于局部页面输出时，使用 UpdateProgress 控件可以设计一个更为直观的界面。如果局部页面更新很慢，就可以用 UpdateProgress 控件来提供一个更新状态的可视化反馈。可以在一个页面上放置多个 UpdateProgress 控件，每个关联不同的 UpdatePanel 控件。另一种选择是，只使用一个 UpdateProgress 控件，而让它与页面中的所有 UpdatePanel 控件相关联。

3.2 背景

UpdateProgress 控件输出为一个 <div> 元素，它的显示或隐藏依赖于关联的 UpdatePanel 控件是否导致异步回发。对于原始页面和同步回发，UpdateProgress 控件不会显示。

3.3 将一个 UpdateProgress 控件与一个 UpdatePanel 控件相关联

可以设置 UpdateProgress 控件的 AssociatedUpdatePanelID 属性来将它与 UpdatePanel 控件相关联。当一个回发源自 UpdatePanel 控件时，所有关联的 UpdateProgress 控件都会显示。如果不将 UpdateProgress 控件与特定的 UpdatePanel 控件关联，则 UpdateProgress 控件将为所有回发显示进度。
如果 UpdatePanel 控件的 ChildrenAsTriggers 属性设置为 false ，并且异步回发源自 UpdatePanel 控件的内部时，所有关联的 UpdateProgress 控件都将显示。

3.4 创建 UpdateProgress 的内容

用 ProgressTemplate 属性来以声明的方式指定由 UpdateProgress 控件显示的消息。<ProgressTemplate> 元素可以包含 HTML 和标记。下列示例演示了如何为 UpdateProgress 控件指定一条消息：

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
  An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>

3.5 指定内容布局

当 DynamicLayout 属性设置为 true 时，UpdateProgress 控件初始时不占用页面的空间，页面在需要时动态的显示 UpdateProgress 控件。为支持动态显示，控件输出的 <div> 元素的 display 样式属性初始被设置为 none。
当 DynamicLayout 属性设置为 false 时，UpdateProgress 控件将在页面显示时占用空间，即使控件不显示。在这种情况下，控件的 <div> 元素的 displey 样式属性被设置为 block ，而 visibility 初始设置为 hidden 。

3.6 在页面中放置 UpdateProgress 控件

可以将 UpdateProgress 控件放在 UpdatePanel 控件的外部或内部。UpdateProgress 控件随着它关联的 UpdatePanel 控件更新为一个异步回发的返回而显示，即使 UpdateProgress 控件被包含在另一个 UpdatePanel 控件中也一样。
如果 UpdatePanel 控件在另一个更新面板内部，源自子面板内部的回发将导致关联子面板的 UpdateProgress 控件的显示。同时，关联父面板的所有 UpdateProgress 控件也将显示。如果回发源自父面板的直接子控件，则仅有与父面板相关联的 UpdateProgress 控件显示。这与回发如何被触发时一样的逻辑。

3.7 指定 UpdateProgress 控件显示的时机

可以使用 Javascript 的 PageRequestManager 类的 beginRequest 和 endRequesst 事件来编程控制 UpdateProgress 控件显示的时机。在beginRequest 事件处理程序中，显示表示 UpdateProgress 控件的 DOM 元素，在 endRequest 的事件处理程序中隐藏元素。
在下列情形下必须提供客户端脚本来显示或隐藏 UpdateProgress 控件：

• 在源自一个注册为更新面板的异步回发触发器的回发期间，而它并没有与 UpdateProgress 控件关联。
• 在源自以编程的方式使用 ScriptManager 控件的 RegisterAsyncPostBackControl(Control) 方法注册为异步回发控件的控件回发期间，在这种情况下，UpdateProgress 控件无法自动确定异步回发已被触发。

3.8 其他属性

DisplayAfter ：

以毫秒为单位指定 UpdateProress 控件显示的延迟时间。

4 总结

至此，ASP.NET AJAX Extensions 1.0 中所包含的几个服务器控件已都学习完毕，使用这些服务器控件，我们就可以开发出具有基本的 AJAX 特性的 Web 应用程序，以为用户提供更好的客户端体验。