Reflections on Software Development

Personal Blog of Mustafa Basgun

Create A Simple Dynamic Clock by Using UpdatePanel of ASP.NET AJAX

with 17 comments

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.

Written by Mustafa Basgun

February 27, 2008 at 4:00 PM

17 Responses

Subscribe to comments with RSS.

  1. Hey Mustafa – Your download link is not working.

    Dan B.

    February 27, 2008 at 6:50 PM

  2. It is fixed now. Thanks for pointing that out.

    Mustafa Basgun

    February 27, 2008 at 9:45 PM

  3. Great, but the screen flashes every second.

    Yamil Bracho

    March 6, 2008 at 2:23 PM

  4. 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

  5. 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

  6. 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

  7. 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

  8. Hi Silex,

    You need to embrace the upDynamicClock.ClientID with server tags:

    <%=upDynamicClock.ClientID%>

    Mustafa Basgun

    April 24, 2008 at 7:31 AM

  9. Thanks,

    Regards from Russia.

    dmitry39

    June 11, 2008 at 8:03 AM

  10. 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

  11. Hi,

    It is not working in Windows Mobile 5.0. Any idea? Thanks.

    Regards from Argentina

    Walter

    November 11, 2008 at 7:25 AM

  12. It can be because IE in WM 5.0 may not support AJAX.

    Mustafa Basgun

    November 15, 2008 at 8:00 AM

  13. Nice example!

    HS

    December 10, 2008 at 10:39 AM

  14. 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

  15. 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

  16. 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

  17. Very good. I tried this and it worked the first time.

    Very nice article.

    Steve

    August 26, 2009 at 2:20 PM


Leave a Reply