ASP.NET - Timer 控件概述

ASP.NET AJAX Timer 控件按定义的时间间隔执行回发。如果将 Timer 控件用于 UpdatePanel 控件,则可以按定义的时间间隔启用部分页更新。也可以使用 Timer 控件来发送整个页面。

当您要执行以下操作时,请使用 Timer 控件:

·定期更新一个或多个 UpdatePanel 控件的内容,而无需刷新整个网页。

·每当 Timer 控件导致回发时运行服务器上的代码。

·按定义的时间间隔将整个网页同步发布到 Web 服务器上。

一、介绍

Timer 控件是一个服务器控件,它会将一个 JavaScript 组件嵌入到网页中。当经过 Interval 属性中定义的时间间隔时,该 JavaScript 组件将从浏览器启动回发。您可以在运行于服务器上的代码中设置 Timer 控件的属性,这些属性将传递到该 JavaScript 组件。

使用 Timer 控件时,必须在网页中包括 ScriptManager 类的实例。

若回发是由 Timer 控件启动的,则 Timer 控件将在服务器上引发 Tick 事件。当页发送到服务器时,可以创建 Tick 事件的事件处理程序来执行一些操作。

设置 Interval 属性可指定回发发生的频率,而设置 Enabled 属性可打开或关闭 TimerInterval 属性是以毫秒为单位定义的,其默认值为 60,000 毫秒(即 60 秒)。

说明: Timer 控件的 Interval 属性设置为一个较小值会产生发送到 Web 服务器的大量通信。使用 Timer 控件可以仅按所需的频率刷新内容。

如果不同的 UpdatePanel 控件必须以不同的时间间隔更新,则可以在网页上包含多个 Timer 控件。或者,可以将 Timer 控件的单个实例用作网页中多个 UpdatePanel 控件的触发器。

1.1、在 UpdatePanel 控件内部使用 Timer 控件

Timer 控件包含在 UpdatePanel 控件内部时,Timer 控件将自动用作 UpdatePanel 控件的触发器。可以通过将 UpdatePanel 控件的 ChildrenAsTriggers 属性设置为 false 来重写此行为。

对于 UpdatePanel 控件内部的 Timer 控件,仅在每个回发完成时重新创建 JavaScript 计时组件。因此,在页从回发返回之前,计时时间间隔不会开始。例如,如果 Interval 属性设置为 60,000 毫秒(60 秒),但完成回发需要 3 秒,则下一个回发将在上一个回发的 63 秒之后发生。

下面的示例演示如何将 Timer 控件包含在 UpdatePanel 控件中。

<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>

1.2、在 UpdatePanel 控件外部使用 Timer 控件

Timer 控件在 UpdatePanel 控件外部时,必须将 Timer 控件显式定义为要更新的 UpdatePanel 控件的触发器。

如果 UpdatePanel 控件在 Timer 控件外部,则 JavaScript 计时组件会在处理回发时继续运行。例如,如果 Interval 属性设置为 60,000 毫秒(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>

二、代码示例

下面的示例演示一个 UpdatePanel 控件,该控件显示一个随机生成的股票价格以及该股票价格的生成时间。默认情况下,Timer 控件每 10 秒更新一次 UpdatePanel 中的内容。用户可以决定每 10 秒、每 60 秒更新一次股票价格,或根本不更新股票价格。当用户选择不更新股票价格时,Enabled 属性将设置为 false

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html >

<head id="Head1" runat="server">

<title>Timer Example Page</title>

<script runat="server">

protected void Page_Load(object sender, EventArgs e)

{

OriginalTime.Text = DateTime.Now.ToLongTimeString();

}

protected void Timer1_Tick(object sender, EventArgs e)

{

StockPrice.Text = GetStockPrice();

TimeOfPrice.Text = DateTime.Now.ToLongTimeString();

}

private string GetStockPrice()

{

double randomStockPrice = 50 + new Random().NextDouble();

return randomStockPrice.ToString("C");

}

protected void RadioButton1_CheckedChanged(object sender, EventArgs e)

{

Timer1.Enabled = true;

Timer1.Interval = 10000;

}

protected void RadioButton2_CheckedChanged(object sender, EventArgs e)

{

Timer1.Enabled = true;

Timer1.Interval = 60000;

}

protected void RadioButton3_CheckedChanged(object sender, EventArgs e)

{

Timer1.Enabled = false;

}

</script>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="10000" />

<asp:UpdatePanel ID="StockPricePanel" runat="server" UpdateMode="Conditional">

<Triggers>

<asp:AsyncPostBackTrigger ControlID="Timer1" />

</Triggers>

<ContentTemplate>

Stock price is <asp:Label id="StockPrice" runat="server"></asp:Label><BR />

as of <asp:Label id="TimeOfPrice" runat="server"></asp:Label>

<br />

</ContentTemplate>

</asp:UpdatePanel>

<div>

<br />

Update stock price every:<br />

<asp:RadioButton ID="RadioButton1" AutoPostBack="true" GroupName="TimerFrequency" runat="server" Text="10 seconds" OnCheckedChanged="RadioButton1_CheckedChanged" /><br />

<asp:RadioButton ID="RadioButton2" AutoPostBack="true" GroupName="TimerFrequency" runat="server" Text="60 seconds" OnCheckedChanged="RadioButton2_CheckedChanged" /><br />

<asp:RadioButton ID="RadioButton3" AutoPostBack="true" GroupName="TimerFrequency" runat="server" Text="Never" OnCheckedChanged="RadioButton3_CheckedChanged" />

<br />

Page loaded at <asp:Label ID="OriginalTime" runat="server"></asp:Label>

</div>

</form>

</body>

</html>

你可能感兴趣的:(JavaScript,.net,浏览器,asp.net,asp)