演练：对多个 UpdatePanel 控件使用 ASP.NET Timer 控件

项目
10/22/2014

更新：2007 年 11 月

在本演练中，将使用一个 Timer 控件来更新两个 UpdatePanel 控件的内容。将 Timer 控件放置在两个 UpdatePanel 控件之外，并将其配置为这两个面板的触发器。

先决条件

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

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

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

创建新页并切换到“设计”视图。
如果页面尚未包含 ScriptManager 控件，请在工具箱的**“AJAX Extensions”**选项卡中双击 ScriptManager 控件以将其添加到页面中。

在工具箱中双击 Timer 控件以将其添加到网页上。

Timer 控件教程步骤 2

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

在工具箱中双击 UpdatePanel 控件以添加一个面板到页面上，然后将该面板的 UpdateMode 属性设置为 Conditional。
再次双击 UpdatePanel 控件以添加另一个面板到页面上，然后将该面板的 UpdateMode 属性设置为 Conditional。
单击名为 UpdatePanel1 的 UpdatePanel 控件内部，然后在工具箱的**“标准”**选项卡中双击 Label 控件，将其添加到 UpdatePanel1。
将该标签的 Text 属性设置为“UpdatePanel1 尚未刷新”。
将 Label 控件添加到 UpdatePanel2。
将第二个标签的 Text 属性设置为“UpdatePanel2 尚未刷新”。

将 Timer 的 Interval 属性设置为 10000。

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

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

双击 Timer 控件以便为 Tick 事件创建处理程序。

向创建的处理程序中添加代码，以便将 Label1 和 Label2 控件的 Text 属性设置为当前时间。

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer1.Tick
        Label1.Text = "UpdatePanel1 refreshed at: " & _
          DateTime.Now.ToLongTimeString()
        Label2.Text = "UpdatePanel2 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)
    {

    }
    protected void Timer1_Tick(object sender, EventArgs e)
    {
        Label1.Text = "UpdatePanel1 refreshed at: " +
          DateTime.Now.ToLongTimeString();
        Label2.Text = "UpdatePanel2 refreshed at: " +
          DateTime.Now.ToLongTimeString();
    }
}

通过将 AsyncPostBackTrigger 控件添加到两个 UpdatePanel 控件中，将 Timer1 指定为 UpdatePanel1 和 UpdatePanel2 的触发器。这可以通过声明的方式来实现，如以下代码所示：

<Triggers>
  <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>

下面的示例演示完整页的标记。

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="10000">
            </asp:Timer>
        </div>
        <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="UpdatePanel1 not refreshed yet."></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Label ID="Label2" runat="server" Text="UpdatePanel2 not refreshed yet."></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>

    </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="10000">
            </asp:Timer>
        </div>
        <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="UpdatePanel1 not refreshed yet."></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Label ID="Label2" runat="server" Text="UpdatePanel2 not refreshed yet."></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>

    </form>
</body>
</html>