Matt Berseth

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

Live Demo | Download

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:

1. Place the Timer inside an UpdatePanel
2. 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.  In the example above, when all of the Operations are have a status of 'Complete', there is no need to continue running the Timer.

Implementation

Like I mentioned earlier, as far as code goes, there isn't much to add to you page.  You just need to make sure you understand the considerations I outlined above.  With that said, here is the code ...

Here is the markup for the UpdatePanel.  Notice it contains both the GridView and Timer controls

<asp:UpdatePanel runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <%--Typical GridView--%>
        <asp:GridView 
            ID="gvOperations" runat="server" 
            GridLines="None" Width="100%"
            AllowSorting="true" DataSourceID="odsOperations"
            OnRowDataBound="GvOperations_RowDataBound">
            <AlternatingRowStyle BackColor="aliceBlue" />
            <HeaderStyle HorizontalAlign="Left" />
        </asp:GridView>
        <%--The Timer that causes the partial postback--%>
        <asp:Timer runat="server" Interval="1500" OnTick="Timer_Tick" />                
    </ContentTemplate>
</asp:UpdatePanel>  

And here is the Timer's OnTick event handler.  The calls to UpdateStatus are just there to move the records through the Waiting -> Running -> Complete status's.  Typically, you would just rebind the GridView by calling DataBind which would requery the database to get the most up to date version of the status.

private void Timer_Tick(object sender, EventArgs args)
{
    //  update the data (only here for demo purposes)
    if (DateTime.Now.Millisecond % 2 == 0)
    {
        UpdateStatus("Waiting", "Running");
    }

    if (DateTime.Now.Millisecond % 3 == 0)
    {
        UpdateStatus("Running", "Complete");
    }
    
    //  refresh the grid
    this.gvOperations.DataBind();
}

That's it. Enjoy.