演练：Timer 控件简介

项目
10/22/2014

更新：2007 年 11 月

在本演练中，将使用三个 ASP.NET AJAX 服务器控件（ScriptManager 控件、UpdatePanel 控件和 Timer 控件）按固定的时间间隔更新部分网页。通过将这些控件添加到网页上，可消除在每次回发时刷新整个页面的需要。将只需更新 UpdatePanel 控件的内容。

有关部分页呈现的更多信息，请参见部分页呈现概述。

先决条件

若要在本演练中实现这些过程，您需要：

Microsoft Visual Studio 2005 或 Visual Web Developer 速成版。
一个支持 AJAX 的 ASP.NET 网站。

按固定的时间间隔刷新 UpdatePanel 控件

在 Microsoft Visual Studio 2005 或 Visual Web Developer 速成版中，创建新的支持 AJAX 的 ASP.NET 网页，然后切换到“设计”视图。
如果页面尚未包含 ScriptManager 控件，请在工具箱的**“AJAX Extensions”**选项卡中双击 ScriptManager 控件以将其添加到页面中。
在工具箱中，双击 UpdatePanel 控件以将其添加到页面中。

单击 UpdatePanel 控件内部，然后双击 Timer 控件以将其添加到 UpdatePanel 控件。

Timer 控件教程步骤 3

说明：
Timer 控件可在 UpdatePanel 控件的内部或外部用作一个触发器。本示例演示如何在 UpdatePanel 控件内部使用 Timer 控件。有关在 UpdatePanel 控件外部将 Timer 控件用作触发器的示例，请参见演练：对多个 UpdatePanel 控件使用 ASP.NET Timer 控件。

将 Timer 控件的 Interval 属性设置为 10000。

Interval 属性是以毫秒为单位定义的，因此，若将 Interval 属性设置为 10,000 毫秒，则会每 10 秒刷新一次 UpdatePanel 控件。

说明：
在此示例中，计时器时间间隔设置为 10 秒。这样，在运行示例时，您无需等待很长时间就可以看到结果了。但是，每个计时器时间间隔都会导致向服务器回发，从而引起网络通信。因此，在成品应用程序中，应将此时间间隔设置为在应用中仍可行的最长时间。

单击 UpdatePanel 控件内部，然后在工具箱的**“标准”**选项卡中双击 Label 控件，将其添加到 UpdatePanel 控件。

说明：

确保将 Label 控件添加到 UpdatePanel 控件内部。
将该标签的 Text 属性设置为“面板尚未刷新”。
单击 UpdatePanel 控件外部，然后双击 Label 控件以将另一个标签添加到 UpdatePanel 控件外部。

说明：

确保将第二个 Label 控件添加到 UpdatePanel 控件外部。
双击 Timer 控件以便为 Tick 事件创建处理程序。
添加代码以将 Label1 控件的 Text 属性设置为当前时间。
创建 Page_Load 处理程序并添加代码，以将 Label2 控件的 Text 属性设置为创建页的时间。

说明：
确保将 Label 控件添加到 UpdatePanel 控件内部。

说明：
确保将第二个 Label 控件添加到 UpdatePanel 控件外部。

切换到“源”视图。

确保页的标记与以下所示类似：

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Label2.Text = "Page created at: " & _
          DateTime.Now.ToLongTimeString()
    End Sub

    Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Panel refreshed at: " & _
          DateTime.Now.ToLongTimeString()

    End Sub
End Class

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Label2.Text = "Page created at: " +
          DateTime.Now.ToLongTimeString();
    }
    protected void Timer1_Tick(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at: " +
          DateTime.Now.ToLongTimeString();
    }
}

保存更改，然后按 Ctrl+F5 在浏览器中查看页面。
要刷新面板，至少需要等待 10 秒钟。

面板内部的文本将变为显示上次刷新面板内容的时间。但是，不刷新面板外部的文本。

回顾

本演练介绍了使用 Timer 控件和 UpdatePanel 控件来启用部分页更新的基本概念。必须向任何包含 UpdatePanel 控件或 Timer 控件的页上添加 ScriptManager 控件。默认情况下，面板内部的 Timer 控件将只导致面板在异步回发期间刷新。面板外部的 Timer 控件在配置为面板触发器的情况下可以导致 UpdatePanel 进行刷新。

下一步是了解如何使用 UpdatePanel 控件外部的 Timer 控件以及如何使用计时器来更新多个 UpdatePanel 控件。有关这些任务的信息，请参见演练：对多个 UpdatePanel 控件使用 ASP.NET Timer 控件。