Thursday, September 18, 2008

Using the AJAX Timer Control as an UpdatePanel Trigger

Matt Berseth
A .Net Developer's Blog

In the web application I am currently developing there is a page which allows user's to start an off-line process. There are a number of parameters the user can configure that will effect how long each of the processes take to complete. When the system in under a typical load an operation can take anywhere from 30 seconds to 30 minutes depending upon how it is configured. After the user kicks off the operation, we redirect them to a status page that contains a list of all of the finished, queued and currently executing operations in the system. The idea being that the user could see where there process is in the queue so they could get an idea of when it might complete.

After the page was in production for a few months, we started getting feedback from our users saying they would like it if this status page would automatically refresh every 30 seconds or so so they can continuously view the most up to date state of the jobs running within the system.

I figured it would be pretty simple to meet the user's requirements by adding an ASP.NET AJAX Timer control to the page. The Timer Control will automatically postback the page at a specified interval. If I use the Timer as an AsyncPostBack trigger for an UpdatePanel (which I believe it the primary use case for the Timer control), it should provide exactly the functionality I need. Here are the steps I followed and few items that I learned along the way ...

Overview of the ASP.NET AJAX Timer
The ASP.NET AJAX Timer Control will perform postbacks at a predefined interval. The Timer has an Interval property that determines how often the Timer fires. When the Timer Elapsed period passes the Timer's Tick event fires on the server.

If you want the complete page to postback (a full postback), you can just place the Timer on the page just like normal. If you want the Timer to trigger an partial postback, you have 2 options:

Place the Timer inside an UpdatePanel
Place the Timer outside of an UpdatePanel and explicitly register it as an AsyncPostBackTrigger
Additionally, the Timer properties (primarily Enabled and Elapsed) can be modified within the Timer's Tick event handler. Allowing you to modify these values at runtime if you detect that you need to.

As far as adding the Timer to the page, that's pretty much it. However, there are a few considerations you should think about when using the Timer.

AJAX Timer Considerations
The behavior of the Timer differs slightly depending upon if it is contained inside or outside of an UpdatePanel
Depending upon where the Timer is on the page dictates how the Elapsed value is calculated.

If the Timer is outside of an UpdatePanel it continues to run during a partial postback. So if the Elapsed property is set to 5 seconds, and the partial postback takes 3 seconds, the timer will fire again 2 seconds after the partial postback completes.

When the Timer is contained within an UpdatePanel, it stops running while the postback is executing and starts again when it finishes.

Set the Elapsed property to a value that is large enough to allow the Tick server event handler to finish executing. Because the Timer's placed outside of an UpdatePanel continue to run during the partial postback, if the partial postback doesn't complete before Elapsed passes again, the currently executing request is canceled and a new one is initiated. This is probably not what you want to happen.

Turn off the Timer when it isn't needed anymore
The Timer will continue to run until the user navigates away from the page or until you programmatically set the Enabled property of the Timer to 'false'. If you have a way to determine that the Timer is not needed anymore, go ahead and save the network some bandwidth and turn off the Timer.


ASP.Net Feeds