ASP.NET AJAX : Timed Refreshes

Using the two controls you've seen so far—the UpdatePanel and UpdateProgress controls—you can create self-contained regions on your page that refresh themselves when certain actions take place. Of course, in order for this technique to work, the user needs to initiate an action that would ordinarily cause a postback, such as clicking a button, selecting an item in an AutoPostBack list, checking an AutoBostBack check box, and so on.

In some situations, you might want to force a full or partial page refresh without waiting for a user action. For example, you might create a page that includes a stock ticker, and you might want to refresh this ticker periodically (say, every five minutes) to ensure it doesn't become drastically outdated. ASP.NET includes a Timer control that allows you to implement this design easily.

The Timer control is refreshingly straightforward. You simply add it to a page and set its Interval property to the maximum number of milliseconds that should elapse before an update. For example, if you set Interval to 60000, the timer will force a postback after one minute elapses.

<asp:Timer ID="Timer1" runat="server" Interval="60000" />

NOTE

Obviously, the timer has the potential to greatly increase the overhead of your web application and reduce its scalability. Think carefully before introducing timed refreshes, and make the intervals long rather than short.

The Timer control works by rendering a bit of client-side script that starts a JavaScript timer. When the JavaScript timer fires (at the interval you specify), the client-side script triggers a postback and raises a server-side Tick event.

On its own, this behavior is fairly inefficient (because it causes the page to completely refresh itself, possibly while the user is in the midst of another task). But if you place the Timer in an UpdatePanel, the result is much better. The UpdatePanel converts the postback to a seamless callback and uses partial rendering to update just part of the page. Unlike a full postback, a callback with partial rendering won't cause flicker and won't interrupt the user in the middle of a task.

To use the timer with partial rendering, wrap the updateable portions of the page in UpdatePanel controls with the UpdateMode property set to Conditional. Then, add a trigger that forces the UpdatePanel to update itself whenever the Timer.Tick event occurs. Here's the markup you need:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
  <ContentTemplate>
    ...
  </ContentTemplate>
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
  </Triggers>
</asp:UpdatePanel>

All the other portions of the page can be left as is, or you can wrap them in conditional UpdatePanel controls with different triggers if you need to update them in response to other actions.

NOTE

You must use triggers with the Timer control. You can't simply place the timer inside an UpdatePanel and expect it to work without a trigger (unlike other controls). If you don't use a trigger, the timer will force a full postback, with flicker.

To stop the timer, you simply need to set the Enabled property to False in server-side code. For example, here's how you could disable the timer after ten updates:

Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As EventArgs) _
  Handles Timer1.Tick

    ' Update the tick count and store it in view state.
    Dim tickCount As Integer = 0
    If ViewState("TickCount") IsNot Nothing Then
        tickCount = CType(ViewState("TickCount"), Integer)
    End If

    tickCount += 1
    ViewState("TickCount") = tickCount

    ' Decide whether to disable the timer.
    If tickCount > 10 Then
        Timer1.Enabled = False
    End If
End Sub