Personal Blog of Mustafa Basgun

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

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

Advertisements

Written by Mustafa Basgun

February 27, 2008 at 4:00 PM

23 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

  18. This is nice example. I have tried to use this code to update the browser screen from time to time to eliminate the browser Timeouts condition in long processing operations, but this long process start working the Dynamic Clock stop working. Any ideas will be helpful.

    Thanks in advance.

    Dmitriy

    December 29, 2009 at 8:38 AM

  19. Hello,

    I have somehow managed to get this code in my ASP.NET page with some struggles (code is in VB and I used C#). However the dynamic clock doesn’t refresh itself. If I want the time to update, I need to refresh the page and I don’t want to do that.

    So what can I do to refresh the clock every second without refreshing the page?

    Thanks for the help in advance!

    John

    July 30, 2010 at 4:27 PM

  20. I would recommend downloading the sample code (which is provided at the end of the post) and trying it first.

    C# version of the server script was also provided in one of the above comments.

    Mustafa Basgun

    July 30, 2010 at 10:26 PM

  21. Thanks. It is as simple as copy paste. And best of all it works!

    Gunbilegt Byambadorj

    December 15, 2010 at 5:03 AM

  22. Thank you very much. Nice tutorial.

    Midhun Suraj

    July 22, 2011 at 1:56 AM

  23. Hi,

    Thank you for the article. Is there any way to get a dynamic procedure like a “real time” clock, without using JavaScript or another front-end solution?

    – Jan

    Kroschke

    February 27, 2012 at 12:47 PM


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: