Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

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.

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
    NoteNote:

    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.

    NoteNote:

    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.

    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="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>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.

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.

Community Additions

ADD
Show:
© 2015 Microsoft