Walkthrough: Using the ASP.NET Timer Control with Multiple UpdatePanel Controls

In this walkthrough you will use a Timer control to update the contents of two UpdatePanel controls. The Timer control will be positioned outside the two UpdatePanel controls and it will be configured as a trigger for both panels.

Prerequisites

To implement the procedures in this walkthrough you need:

  • Microsoft Visual Studio 2005 or Microsoft Visual Web Developer Express.

  • An AJAX-enabled ASP.NET Web site.

To refresh UpdatePanel controls at a timed interval

  1. Create a new page and switch to Design view.

  2. If the page does not already contain a ScriptManager control, in the AJAX Extensions tab of the toolbox, double-click the ScriptManager control to add it to the page.

    Timer Control Tutorial Step 1

  3. In the toolbox, double-click the Timer control to add it to the Web page.

    Timer Control Tutorial Step 2

    Note

    The Timer control can work as a trigger either inside or outside an UpdatePanel control. This example shows how to use the Timer control outside an UpdatePanel control. For an example of using a Timer control inside an UpdatePanel control, see Walkthrough: Introduction to the Timer Control.

  4. In the toolbox, double-click the UpdatePanel control to add one panel to the page, and then set its UpdateMode property to Conditional.

    Timer Control Tutorial Step 3

  5. Double-click the UpdatePanel control again to add a second panel to the page, and then set its UpdateMode property to Conditional.

    Timer Control Tutorial Step 4

  6. Click inside the UpdatePanel control named UpdatePanel1, and in the Standard tab of the toolbox, double-click the Label control to add it to UpdatePanel1.

  7. Set the label's Text property to UpdatePanel1 not refreshed yet.

    Timer Control Tutorial Step 5

  8. Add a Label control to UpdatePanel2.

  9. Set the second label's Text property to UpdatePanel2 not refreshed yet.

    Timer Control Tutorial Step 6

  10. Set the Interval property of the Timer to 10000.

    The Interval property is defined in milliseconds, so that setting the Interval property to 10,000 milliseconds will refresh the UpdatePanel controls every 10 seconds.

    Note

    In this example, the timer interval is set to 10 seconds. That way, when you run the example, you do not have to wait a long time to see the results. However, each timer interval causes a postback to the server and causes network traffic. Therefore, in a production application you should set the interval to the longest time that is still practical for your application.

  11. Double-click the Timer control to create a handler for the Tick event.

  12. Add code to the handler that sets the Text property of the Label1 and Label2 controls to the current time.

    Partial Class _Default
        Inherits System.Web.UI.Page
    
        Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer1.Tick
            Label1.Text = "UpdatePanel1 refreshed at: " & _
              DateTime.Now.ToLongTimeString()
            Label2.Text = "UpdatePanel2 refreshed at: " & _
              DateTime.Now.ToLongTimeString()
        End Sub 
    End Class
    
    public partial class _Default : System.Web.UI.Page 
    {
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
        protected void Timer1_Tick(object sender, EventArgs e)
        {
            Label1.Text = "UpdatePanel1 refreshed at: " +
              DateTime.Now.ToLongTimeString();
            Label2.Text = "UpdatePanel2 refreshed at: " +
              DateTime.Now.ToLongTimeString();
        }
    }
    
  13. Specify Timer1 as the trigger for UpdatePanel1 and UpdatePanel2 by adding a AsyncPostBackTrigger control to both UpdatePanel controls. You can do this declaratively as shown in the following code:

    <Triggers>
      <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
    

    The following example shows the markup for the complete page.

    <%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="https://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <div>
                <asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="10000">
                </asp:Timer>
            </div>
            <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                </Triggers>
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server" Text="UpdatePanel1 not refreshed yet."></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                </Triggers>
                <ContentTemplate>
                    <asp:Label ID="Label2" runat="server" Text="UpdatePanel2 not refreshed yet."></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
    
        </form>
    </body>
    </html>
    
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="https://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <div>
                <asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="10000">
                </asp:Timer>
            </div>
            <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                </Triggers>
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server" Text="UpdatePanel1 not refreshed yet."></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                </Triggers>
                <ContentTemplate>
                    <asp:Label ID="Label2" runat="server" Text="UpdatePanel2 not refreshed yet."></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
    
        </form>
    </body>
    </html>
    
  14. Save your changes and press CTRL+F5 to view the page in a browser.

  15. Wait at least 10 seconds until the UpdatePanel controls are refreshed.

    Both panels show the time when updated.

Review

This walkthrough showed how to use a Timer control with multiple UpdatePanel controls to enable partial-page updates. You must add a ScriptManager control, and then add the UpdatePanel controls. A Timer control updates the contents of the panels when you configure it as a trigger for the panels.

For information about how to use a Timer control inside an UpdatePanel control, see Walkthrough: Introduction to the Timer Control.

See Also

Reference

Timer

UpdatePanel

ScriptManager

Concepts

Timer Control Overview

Partial-Page Rendering Overview