Automatic Updates with the Timer

The question that immediately follows when someone sees what that they can easily update parts of the page asynchronously using a trigger is “How can I make it update automatically?” The Timer control makes this easy! Instead of requiring the user to perform an action in order to trigger updates, the Timer control will initiate the postback automatically. Listing 2-6 (Timer.aspx) shows the primary controlling property; the interval is set to 1000 milliseconds. The Timer will initiate a postback every second.

Listing 2-6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<script language="C#" runat="server">
    protected override void  OnLoad(EventArgs e) {
        base.OnLoad(e);
        System.Threading.Thread.Sleep(100);
        string theTime = DateTime.Now.ToLongTimeString();
        for(int i = 0; i < 3; i++) {
            theTime += "<br />" + theTime;
        }
        time1.Text = theTime;
        time2.Text = theTime;
    }
</script>

    <title>Timer</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
    <ContentTemplate>
        <div style="border-style:solid;background-color:gray;">
        <asp:Label runat="server" ID="time1"></asp:Label><br />        
        </div><br />
                <asp:Timer ID="timer1" runat="server" Interval="1000"   >
        </asp:Timer>
    </ContentTemplate>
</asp:UpdatePanel><br />

</div>
</form>
</body>
</html>

The Timer can be placed directly inside the UpdatePanel to act as a child control trigger. It can also be placed anywhere and configured as the AsyncPostBackTrigger explicitly. A single timer can be the trigger for multiple UpdatePanels.

Listing 2-7 (SingleTimer.aspx) shows a modification of a previous example that has two UpdatePanels, and this time we’ll add a Timer. The first UpdatePanel has Always for the UpdateMode, so the Timer inside it will make it update on every Tick event. The second UpdatePanel set the UpdateMode to conditional and therefore requires that a trigger be defined. So it is wired up to the Timer from the first UpdatePanel.

Listing 2-7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<script language="C#" runat="server">
    protected override void  OnLoad(EventArgs e) {
        base.OnLoad(e);
        System.Threading.Thread.Sleep(100);
        string theTime = DateTime.Now.ToLongTimeString();
        for(int i = 0; i < 3; i++) {
            theTime += "<br />" + theTime;
        }
        time1.Text = theTime;
        time2.Text = theTime;
    }
</script>

    <title>Timer</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">

<ContentTemplate>

<asp:Timer ID="timer1" runat="server" Interval="1000"   ></asp:Timer>
    <div style="border-style:solid;background-color:gray;">
    <asp:Label runat="server" ID="time1"></asp:Label><br />        
    </div><br />
</ContentTemplate>
</asp:UpdatePanel><br />

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
    <div style="border-style:solid;background-color:gray;">
    <asp:Label runat="server" ID="time2"></asp:Label><br />
    </div><br />
</ContentTemplate>
</asp:UpdatePanel>

</div>
</form>
</body>
</html>

And, of course, you can also place the Timer outside the UpdatePanel to trigger a full postback at regular intervals. I picked an interval of one second to demonstrate that a one-second interval does not mean the refresh will occur every second. The Timer instructs the browser to trigger an event after one second. This accuracy is determined by the granularity of the specific browser, so there will normally be a small additional delay. Once the Timer is signaled by the browser, it can raise its Tick event and the refresh will occur. You can see that the combination of different interactions will result in the refresh occurring at approximately one second, but it is not exact.