asp.net 實現無刷新計時器

時間 2019-12-06

標籤 asp.net asp 實現刷新計時器欄目 ASP 简体版

原文原文鏈接

無刷新計時器spa

ASP.NET AJAX提供了被稱爲計時器控件的Timer控件。該控件可以指定一個時間間隔和Tick事件，在每一次時間間隔到達以後，將觸發其Tick事件。所以，該控件可以定時執行事先指定的一些操做。設計

實現目標code

本實例介紹使用ASP.NET AJAX中Timer控件實現無刷新計時器的功能。該計時器每間隔1秒鐘就顯示當前時間。事件

技術實現ip

1．建立AjaxTimer.aspx頁面ci

在Sample_21應用程序中建立AjaxTimer.aspx頁面，並在該頁面上建立1個ScriptManager控件、一個 UpdatePanel控件、一個Label控件和一個Timer控件。這些控件的ID屬性的值分別爲sm、up、lbTime和tTime。其中，sm 和up控件共同提供無刷新的Web環境。tTime控件是一個計時器控件，實現計數功能，並把計數器的值顯示在lbTime控件中。 AjaxTimer.aspx頁面的部分HTML設計代碼以下：it

<%@ 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頁面初始化table

AjaxTimer.aspx頁面初始化功能由其Page_Load(object sender, EventArgs e)事件實現。若是計數器的值大於或等於10，則該事件把計數器置爲0。實現上述功能的程序代碼以下：object

<%@ 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頁面事件設計date

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所示。