Tuesday, July 8, 2008

A Count Down Asp.NET User Control

Download Example Here:

Count Down Test Web Application

Recently at work, I did some work on our website that would alert our users that the website would be going down soon.  The customer wanted "count down" functionality that would give users an idea of how long they have until the site goes down as the time to take the website down approaches.

image

I figured there would be someone who had already done this sort of thing, so I went to Google.  I found an article by Robert Hashemian at http://www.hashemian.com/tools/javascript-countdown.htm that explains how you would create a count down timer with JavaScript.  His example was pretty slick, but I wanted to create a user control in .NET that I could just set the time of when the timer should expire and forget about all the JavaScript under the covers.  So I did just that.

At first I tried to use Mr. Hashemian's way of setting the ending time in the JavaScript and figuring out how much time was left there, but the problem I found was that the time was dependant on the browser's time, so I decided to change the way the initial number of seconds is determined.  Instead of setting the time in JavaScript, I decided to count how many seconds were left until the target time and just set the number of seconds in JavaScript, so the functionality wouldn't be disrupted by time zone differences.

Anyway, after some work, all I had to do was put the user control tag in my page and set the time in the code behind like so:


            this.countDown1.TimeToEnd = DateTime.Now.AddHours(1.02);

            this.countDown2.TimeToEnd = new DateTime(2050, 1, 1);

I've created a sample web app that uses this control shown in the examples above.

Download Here:

Count Down Test Web Application

7 comments:

Bomin said...

I happened to come to your blog to find countdown timer. I want to ask you to re-upload VS2005 compatible version of your work.

Crimson^ said...

my friend.. thank you for the nice control.. I implemented in my site..

but after finishing.. i discovered a serious bug..

when the user right click on the page.. or when the PC have some problem.. (like running another program (CPU got busy))
the counter stops..

for example if i was a student in exam.. i can stop the time by opening the context menu of the page..

any suggestions ?

Crimson^ said...

PS. although i did some updates on the control

like i set the TimeToEnd as static.. to keep the time on the post back..

and the start of the counter on a function to be called from the form (not on the preRender)..

the problems occurs on the old version also (before my updates)

Sam Walker said...

Crimson,

That's awesome you're using the control on your site. This was just a proof of concept and isn't being used as a critical part of any application, so here's my advice:

I would suggest to have the javascript work off of an exact time in the future instead of just counting down. You could use the length of time that is passed in to the control to figure out the time in the future to stop the timer. You could then work off of that time (javascript) and make the javascript figure out the time left on each tick of the timer.

I hope this helps.

Piyush Kacha said...

Thank you for such a wonderful script, it save a lot of my time.

Ayeye said...

good morning,

How do I perform a redirect when the countdown ends?

thank you very much
NaK

1 said...

hi,thank u for nice control but i have a problem with it.
i use your control in repeater and the repeater is in a update panel.
I set "TimeToEnd" from database and after asyncPostback it shoud be change but it still work with old value.
i trace your code and it has new value in "script" in this code
this.litScript.Text = script;
but it show old value :(
can you help me please