Click here to Skip to main content
15,300,338 members
Articles / Web Development / ASP.NET
Posted 27 Jul 2012


6 bookmarked

Create Count Down Timer using ASP.NET Timer Control and Ajax

Rate me:
Please Sign up or sign in to vote.
4.57/5 (5 votes)
27 Jul 2012CPOL2 min read
Create count down timer using ASP.NET Timer Control and Ajax


With the advent of VS2008, we have the ASP timer control which we can use as a countdown timer. This tip will help in creating a countdown timer using ASP.NET and Ajax.


We get plethora of examples or code samples which show how to use the timer control with Ajax Update panel. These examples will show that the label which is inside the Update panel gets updated with every tick event of the timer. But, if we have to show the duration or the amount of time left, we have to do some work around. The below mentioned description and code snippets will help you or at least give you an idea to approach the situation.

Using the Code

I have used the default website template that ships in with VS2010.

On the Default.aspx page, I have inserted the following lines of code:

// Add the ScriptManager and Timer Control.
<asp:ScriptManager ID= "SM1" runat="server"></asp:ScriptManager>
<asp:Timer ID="timer1" runat="server" 
Interval="1000" OnTick="timer1_tick"></asp:Timer>
//   Add the update panel, 
//a label to show the time remaining and the AsyncPostBackTrigger.   
<asp:UpdatePanel id="updPnl" 
runat="server" UpdateMode="Conditional">
<asp:Label ID="lblTimer" runat="server"></asp:Label>
<asp:AsyncPostBackTrigger ControlID="timer1" EventName ="tick" />

On the Default.aspx.cs page, I have the following lines of code:

protected void timer1_tick(object sender, EventArgs e)
        if (0 > DateTime.Compare(DateTime.Now, 
            lblTimer.Text = "Number of Minutes Left: " + 

In the Default.aspx.cs page in the page load event, I had written the following lines of code to create a session variable and ensure that the value of the session variable doesn't get updated due to the async post back caused by the AsyncPostBackTrigger.

protected void Page_Load(object sender, EventArgs e)
        if (!SM1.IsInAsyncPostBack)
            Session["timeout"] = DateTime.Now.AddMinutes(120).ToString();

If we do not include the IsAsyncPostBack check, our Session variable will always get updated with the latest or current date time value.

protected void Page_Load(object sender, EventArgs e)
        // This will not give desired result.                                                          
        Session["timeout"] = DateTime.Now.AddMinutes(120).ToString();      

In this example, I have hard coded the duration as 120 minutes. This can be fetched from config file. Also, instead of session, one can store the initial time in a hidden label.

Points of Interest

One mistake I made while I was coding is that I did not include the IsAsyncPostBack check. So, whenever one is dealing with AsyncPostBackTrigger, please make sure you handle IsAsyncPostBack of the page properly.


  • 27th July, 2012: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

No Biography provided

Comments and Discussions

QuestionChange of the code Pin
Member 119736389-Sep-15 23:47
MemberMember 119736389-Sep-15 23:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.