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

Article
12/04/2014

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

Create a new page and switch to Design view.
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.
In the toolbox, double-click the Timer control to add it to the Web page.

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.
In the toolbox, double-click the UpdatePanel control to add one panel to the page, and then set its UpdateMode property to Conditional.
Double-click the UpdatePanel control again to add a second panel to the page, and then set its UpdateMode property to Conditional.
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.
Set the label's Text property to UpdatePanel1 not refreshed yet.
Add a Label control to UpdatePanel2.
Set the second label's Text property to UpdatePanel2 not refreshed yet.
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.
Double-click the Timer control to create a handler for the Tick event.

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();
    }
}

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>

Save your changes and press CTRL+F5 to view the page in a browser.
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.

Share via

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

Prerequisites

To refresh UpdatePanel controls at a timed interval

Review

See Also

Reference

Concepts

Additional resources