Ajax : TimerControl

4 Timer Control

Timer control performs postbacks at the defined intervals. This is generally used to update the content of UpdatePanel at a defined interval. Apart from this it can be used to post the whole page at defined interval.

There are few properties that are used more frequetly, these are

Interval	Gets or sets the time interval in milliseconds after OnTick event of Timer control will fire.
OnTick	Used to specifiy the method name that will after specified time interval.

Timer control can be used in two ways.

DEMO : Timer Control
1. Inside an UpdatePanel control When the timer control is used inside an UpdatePanel control, the Timer control automatically works as a trigger for the UpdatePanel control, however we can override this behavior by setting the ChildrenAsTriggers property of UpdatePanel as false. In this case lets say server takes 7 seconds to process the request then following message will change after every 12 (5+7) seconds as I have specified Timer interval property as 5000 milliseconds (5 seconds). Following message will change after every 5 seconds 634804680362449375 - Timer control from inside UpdatePanel ticked <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">     <ContentTemplate>         <asp:Label runat="Server" ID="lblMessage1" Text="Please wait ..." SkinID="FormValueMessage" />         // Timer control inside UpdatePanel         <asp:Timer runat="Server" ID="Timer1" OnTick="Timer1_Tick" Interval="5000" />     </ContentTemplate>    </asp:UpdatePanel>
2. Timer Control Outside UpdatePanel When the Timer control is outside an UpdatePanel control, we must explicitely define the Timer control as trigger for the UpdatePanel control to be updated.  In this case Timer, Timer OnTick event will fire after every 3 seconds irrespective of how many seconds server takes to process the request as I have specified Interval as 3000 Milliseconds. Following message will change after every 3 seconds 634804680373777500 - Timer control from outside UpdatePanel ticked <asp:UpdatePanel runat="server" ID="UpdatePanel2" UpdateMode="Conditional">     <Triggers>         <asp:AsyncPostBackTrigger ControlID="Timer2" EventName="Tick" />     </Triggers>     <ContentTemplate>         <asp:Label runat="Server" ID="lblMessage2" SkinID="FormValueMessage" />     </ContentTemplate>    </asp:UpdatePanel> // Timer control outside UpdatePanel <asp:Timer runat="Server" ID="Timer2" OnTick="Timer2_Tick" Interval="3000" />

Source code                        timer.aspx

<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderHeader" Runat="Server">
</asp:Content>
<asp:Content ID="Content2"ContentPlaceHolderID="PlaceHolderForTitleAndIntro" Runat="Server">
<div class="ArticleTitle"><h1>Timer Control</h1></div>
<div class="ArticleContents">Timer control performs postbacks at the defined intervals. This is generally used to update the content of UpdatePanel at a defined interval. Apart from this it can be used to post the whole page at defined interval. </div></asp:Content>
<asp:Content ID="Content3"ContentPlaceHolderID="PlaceHolderForContents"Runat="Server">
There are few properties that are used more frequetly, these are <br /><br />
<table width="100%" class="TutoPropPlaceHolder" border="1" cellpadding="2" cellspacing="1">
<tr>    <td class="DemoCP">Interval</td>
    <td>Gets or sets the time interval in milliseconds after OnTick event of Timer control will fire. </td>
</tr><tr>   <td class="DemoCP">OnTick</td>
    <td> Used to specifiy the method name that will after specified time interval.    </td></tr>
</table><br /><br />
<div class="ArticleContents">
Timer control can be used in two ways.<br /><br />
<!-- START - Demo Section -->
<table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
    <tr>  <td class="DemoTitle">      DEMO : Timer Control        </td>
        <td align="right"> <a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/ajax/timer.aspx" target="_blank">Show Source Code</a>   </td>    </tr>
    <tr> 

 <td>
        <b>1. Inside an UpdatePanel control</b><br />
When the timer control is used inside an <a href="UpdatePanel.aspx">UpdatePanel</a> control, the Timer control automatically works as a trigger for <br />the UpdatePanel control, however we can override this behavior by setting the ChildrenAsTriggers property of UpdatePanel as false.
        <br /><br />In this case lets say server takes 7 seconds to process the request then following message <br />will change after every 12 (5+7) seconds as I have specified Timer interval property as 5000 milliseconds (5 seconds).        <br /><br />
        Following message will change after every 5 seconds<br />
        <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
        <ContentTemplate>            <br />
            <asp:Label runat="Server" ID="lblMessage1" Text="Please wait Timer Control from inside UpdatePanel will fire in 5 seconds" ForeColor="Green" />
            <asp:Timer runat="Server" ID="Timer1" OnTick="Timer1_Tick" Interval="5000" />
        </ContentTemplate>   
    </asp:UpdatePanel>
<pre>&lt;asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional"&gt;
    &lt;ContentTemplate&gt;        &lt;asp:Label runat="Server" ID="lblMessage1" Text="Please wait ..." SkinID="FormValueMessage" /&gt;
        // Timer control inside UpdatePanel
        &lt;asp:Timer runat="Server" ID="Timer1" OnTick="Timer1_Tick" Interval="5000" /&gt;
    &lt;/ContentTemplate&gt;      &lt;/asp:UpdatePanel&gt;</pre>          </td>
        <td><a href="../../userfiles/samples/dotnetfundaaspajax.zip">Download Sample project with Source Code</a></td>     </tr>
        <tr>         <td><b>2. Timer Control Outside UpdatePanel</b><br />
        When the Timer control is outside an UpdatePanel control, we must explicitely define the Timer control as trigger <br />for the UpdatePanel control to be updated.
        <br /><br />In this case Timer, Timer OnTick event will fire after every 3 seconds irrespective of<br /> how many seconds server takes to process the request as I have specified Interval as 3000 milliseconds.    <br /><br />
      Following message will change after every 3 seconds<br />
      <asp:UpdatePanel runat="server" ID="UpdatePanel2" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer2" EventName="Tick" />
        </Triggers>
        <ContentTemplate>    <br />   <asp:Label runat="Server"  ID="lblMessage2" Text=   "Please wait Timer Control from outside UpdatePanel will fire in 3 seconds" ForeColor="Blue" />
        </ContentTemplate>   
    </asp:UpdatePanel>   
    <asp:Timer runat="Server" ID="Timer2" OnTick="Timer2_Tick" Interval="3000" />   
<pre>&lt;asp:UpdatePanel runat="server" ID="UpdatePanel2" UpdateMode="Conditional"&gt;
    &lt;Triggers&gt;   &lt;asp:AsyncPostBackTrigger ControlID="Timer2" EventName="Tick" /&gt;
    &lt;/Triggers&gt;     &lt;ContentTemplate&gt;
        &lt;asp:Label runat="Server" ID="lblMessage2" SkinID="FormValueMessage" /&gt;
    &lt;/ContentTemplate&gt;     &lt;/asp:UpdatePanel&gt;
// Timer control outside UpdatePanel &lt; asp:Timer runat="Server" ID="Timer2"  OnTick="Timer2_Tick"  Interval="3000" /&gt;</pre>      </td>
        <td><a href="../../userfiles/samples/dotnetfundaaspajax.zip">Download Sample project with Source Code</a></td>     </tr> </table>     </div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" Runat="Server">
</asp:Content>

Timer.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class tutorials_Ajax_timer : System.Web.UI.Page         {
    protected void Page_Load(object sender, EventArgs e)            {
        try                   {
            impFunctions.WriteMetaTags(this, "timer, asp:timer, timer tutorials, online timer control tutorials", "Free online ASP.NET Ajax Timer control tutorials with live demo, source code and downloadable sample project.", false);
            Label lblSiteMap = (Label)this.Master.FindControl("lblSiteMap");
            lblSiteMap.Text = "<a href=\"/default.aspx\" class=\"siteMap\">Home</a> > <a href=\"/tutorials/\" class=\"siteMap\" title=\"Tutorials Home\">Tutorials</a> > <a href=\"/tutorials/ajax\" class=\"siteMap\">ASP.NET AJAX Tutorials</a> > Timer Control ";                    }
        catch { }     }
    /// <summary>
    /// Fires when Timer Control from inside UpdatePanel ticks
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void Timer1_Tick(object sender, EventArgs e)        {
        lblMessage1.Text = "<b>" + DateTime.Now.Ticks + "</b> - Timer control from inside UpdatePanel ticked";                                       }
    /// <summary>
    /// Fires when Timer control of outside panel ticks
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void Timer2_Tick(object sender, EventArgs e)        {
        lblMessage2.Text = "<b>" + DateTime.Now.Ticks + "</b> - Timer control from outside UpdatePanel ticked";             }
}