Tuesday, October 4, 2011

Timer control AJAX



Timer controls allow you to do postbacks at certain intervals. If used together with UpdatePanels, which is the most common approach, it allows for timed partial updates of your page, but it can be used for posting back the entire page as well. In this chapter we will focus on using timers with UpdatePanels, so if you haven't already read the chapter on UpdatePanels, please do so now.

Here is a small example of using the Timer control. It simply updates a timestamp every 5 seconds. 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Timers</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:Timer runat="server" id="UpdateTimer" interval="5000" ontick="UpdateTimer_Tick" />
        <asp:UpdatePanel runat="server" id="TimedPanel" updatemode="Conditional">
            <Triggers>
                <asp:AsyncPostBackTrigger controlid="UpdateTimer" eventname="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Label runat="server" id="DateStampLabel" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>
We only have a single CodeBehind function, which you should add to your CodeBehind file: 
protected void UpdateTimer_Tick(object sender, EventArgs e)
{
    DateStampLabel.Text = DateTime.Now.ToString();
}
This is all very simple. We have a normal UpdatePanel, which carries a Trigger reference to our new Timer control. This means that the panel is updated when the Timer "ticks", that is, fires the Tick event. The Timer control uses the interval attribute to define the number of milliseconds to occur before firing the Tick event. As you can see from our CodeBehind code listing, we just update the DateStampLabel each time the Timer fires. This could be done more efficient with a simple piece of JavaScript, which updates the time on the clientside instead of involving the server. The example is only used to demonstrate the potential of the Timer control.

Another approach is including the Timer inside the UpdatePanel. Doing so would save us from defining a trigger, but you should be aware of the fact that the behavior will be different, depending on whether you have the Timer inside or outside an UpdatePanel. When a Timer is inside an UpdatePanel, the Timer is not re-constructed until the UpdatePanel is fully updated. That means that if you have a Timer with an interval of 60 seconds, and the update takes 5 seconds, the next event won't be fired 60 seconds after the previous, but 65 seconds after. On the other hand, if the Timer is outside the UpdatePanel, the user will only look at the content of the panel for 55 seconds before it's updated again.

You should always remember that even though partial updates are not as heavy on the server as real postbacks, the server is still contacted, and when using timers, you may get a lot of partial postbacks, which can slow things down. Always use as high intervals as possible, and consider if contacting the server is really necessary or not.