asp.net 实现无刷新计时器

无刷新计时器

ASP.NET AJAX提供了被称为计时器控件的Timer控件。该控件能够指定一个时间间隔和Tick事件,在每一次时间间隔到达之后,将触发其Tick事件。因此,该控件能够定时执行事先指定的一些操作。

实现目标

本实例介绍使用ASP.NET AJAX中Timer控件实现无刷新计时器的功能。该计时器每间隔1秒钟就显示当前时间。

技术实现

1.创建AjaxTimer.aspx页面

在Sample_21应用程序中创建AjaxTimer.aspx页面,并在该页面上创建1个ScriptManager控件、一个 UpdatePanel控件、一个Label控件和一个Timer控件。这些控件的ID属性的值分别为sm、up、lbTime和tTime。其中,sm 和up控件共同提供无刷新的Web环境。tTime控件是一个计时器控件,实现计数功能,并把计数器的值显示在lbTime控件中。 AjaxTimer.aspx页面的部分HTML设计代码如下:

<%@ Page Language="C#" AutoEventWireup="true" StylesheetTheme="Aspnet3DBWeb"CodeFile="UpdateData.aspx.cs" Inherits="UpdateData" %><%@ Page Language="C#" AutoEventWireup="true" StylesheetTheme="Aspnet3DBWeb" CodeFile="AjaxTimer.aspx.cs" Inherits="AjaxTimer" %>

2.AjaxTimer.aspx页面初始化

AjaxTimer.aspx页面初始化功能由其Page_Load(object sender, EventArgs e)事件实现。如果计数器的值大于或等于10,则该事件把计数器置为0。实现上述功能的程序代码如下:

<%@ Page Language="C#" AutoEventWireup="true" StylesheetTheme="Aspnet3DBWeb" CodeFile="AjaxWeb.aspx.cs" Inherits="AjaxWeb" %>static int count = 0; protected void Page_Load(object sender, EventArgs e){   ///重置计数器if(count >= 10) count = 0;}

3.AjaxTimer.aspx页面事件设计

tTime控件定义了其Tick事件:tTime_Tick(object sender,EventArgs e)。该事件每隔1秒钟被触发一次。它首先把计数器(count)的值增加1,然后显示AjaxTimer.aspx页面等待的时间。如果 AjaxTimer.aspx页面等待的时间为0,则刷新该页面。tTime_Tick(object sender,EventArgs e)事件的程序代码如下:

<%@ Page Language="C#" AutoEventWireup="true" StylesheetTheme="Aspnet3DBWeb"CodeFile="LinqProcedure.aspx.cs" Inherits="LinqProcedure" %>protected void tTime_Tick(object sender,EventArgs e){   ///计数器增加1count++;///显示计数器的值lbTime.Text = "该页面将在【 " + (10 - count).ToString() + " 】秒钟之后刷新。";if(count == 10){   ///刷新页面Response.Redirect("~/AjaxTimer.aspx");}}

把AjaxTimer.aspx页面设置为Sample_21应用程序的起始页面,并运行该应用程序。AjaxTimer.aspx页面在某一个时刻,显示“该页面将在【 5 】秒钟之后刷新。”信息,如图21-7所示。

你可能感兴趣的:(asp.net 实现无刷新计时器)