Create A Simple Dynamic Clock by Using UpdatePanel of ASP.NET AJAX
If you are developing web applications for different customer scenarios in which timestamping matters, there is a chance that you will be asked to put a real-time dynamic clock on the page depending on your real estate limitations on the UI. Any search result would give you several remedies to this purpose, but I wanted to have something short, neat and cross-browser compatible.
Here is the solution that I came up with by using an UpdatePanel and a few lines of JavaScript code.
First, create the UpdatePanel as in the following sample form:
OnLoad event of upDynamicClock will be handled in the server side:
Create a listener function (DisplayDynamicClock) by using the native setInterval function of JavaScript in order to update the content of lblDynamicClock and tell the page to run this function via window.onload:
Notice the usage of “__doPostBack” function as a bridge between JavaScript and ASP.NET for triggering a postback at upDynamicClock.
Conclusion
I have tested the outcome with the latest versions of IE and Firefox, and it worked fine with both of them:
Download
Sample code for this post can be found here.
Hey Mustafa – Your download link is not working.
Dan B.
February 27, 2008 at 6:50 PM
It is fixed now. Thanks for pointing that out.
Mustafa Basgun
February 27, 2008 at 9:45 PM
Great, but the screen flashes every second.
Yamil Bracho
March 6, 2008 at 2:23 PM
Probably, it is because you are using a content page (via master page) or a control (.ascx file). If that is the case, then you need to use <%=upDynamicClock.ClientID%> instead of upDynamicClock inside the __doPostBack function.
When the upDynamicClock’s DIV is created (while HMTL is rendered), its ID is set to something different than upDynamicClock due to being nested under a content page or a control. ClientID property would give you the right ID in every condition.
Mustafa Basgun
March 6, 2008 at 5:42 PM
Hi.
The above code shows error message. I am working in C#. I think this code is only for VB.NET.
Regards,
- Balu
Not Working?
March 26, 2008 at 2:33 PM
Yes, sample code is in VB.NET. For C#, simply change the server script as:
public void upDynamicClock_OnLoad(object sender, System.EventArgs e)
{
lblDynamicClock.Text = DateTime.Now.ToString;
}
Mustafa Basgun
March 26, 2008 at 9:12 PM
Hello I use a Masterpage and in the function wrote
function DisplayDynamicClock(){
setInterval(“__doPostBack(‘upDynamicClock.ClientID’, ”);”, 1000);
}
window.onload = DisplayDynamicClock;
but continue the flashes every second? Why?
Silex
April 23, 2008 at 5:05 PM
Hi Silex,
You need to embrace the upDynamicClock.ClientID with server tags:
<%=upDynamicClock.ClientID%>
Mustafa Basgun
April 24, 2008 at 7:31 AM
Thanks,
Regards from Russia.
dmitry39
June 11, 2008 at 8:03 AM
Thanks, it’s working. But problem is when we run this script for a long time, it is causing my local IIS to crash, error message says that “too many user connected …”. After that I am not be able to access my ASP.NET application, and I have to restart my system.
null
September 18, 2008 at 10:17 PM
Hi,
It is not working in Windows Mobile 5.0. Any idea? Thanks.
Regards from Argentina
Walter
November 11, 2008 at 7:25 AM
It can be because IE in WM 5.0 may not support AJAX.
Mustafa Basgun
November 15, 2008 at 8:00 AM
Nice example!
HS
December 10, 2008 at 10:39 AM
Cool example. But isn’t this highly inefficient? Doesn’t it post a call back to the server every second?
Brian
January 26, 2009 at 2:47 PM
Brian, you’re right. Keep in mind that this is more likely a Proof-of-Concept sample.
Mustafa Basgun
January 27, 2009 at 4:43 PM
Hi. I am having the same problem as Silex. I am using the clock inside a Master Page and trying to fix flashing problem but I have no idea where to put.
Tyler
March 22, 2009 at 7:53 PM
Very good. I tried this and it worked the first time.
Very nice article.
Steve
August 26, 2009 at 2:20 PM