Yet Another Blog on ASP.NET and Some Other Stuff

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

Posted in AJAX, ASP.NET, UpdatePanel, VB.NET, Web Development by Mustafa Basgun on February 27th, 2008

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.

9 Responses to 'Create A Simple Dynamic Clock by Using UpdatePanel of ASP.NET AJAX'

Subscribe to comments with RSS or TrackBack to 'Create A Simple Dynamic Clock by Using UpdatePanel of ASP.NET AJAX'.

  1. Dan B. said, on February 27th, 2008 at 6:50 pm

    Hey Mustafa - Your download link is not working.

  2. Mustafa Basgun said, on February 27th, 2008 at 9:45 pm

    It is fixed now. Thanks for pointing that out.

  3. Yamil Bracho said, on March 6th, 2008 at 2:23 pm

    Great, but the screen flashes every second.

  4. Mustafa Basgun said, on March 6th, 2008 at 5:42 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.

  5. Not Working? said, on March 26th, 2008 at 2:33 pm

    Hi.

    The above code shows error message. I am working in C#. I think this code is only for VB.NET.

    Regards,

    - Balu

  6. Mustafa Basgun said, on March 26th, 2008 at 9:12 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;
    }

  7. Silex said, on April 23rd, 2008 at 5:05 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?

  8. Mustafa Basgun said, on April 24th, 2008 at 7:31 am

    Hi Silex,

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

    <%=upDynamicClock.ClientID%>

  9. dmitry39 said, on June 11th, 2008 at 8:03 am

    Thanks,

    Regards from Russia.

Leave a Reply