Documentation for: ASP.NET Ajax Version 1.0

This documentation is for a previous version. For the current released version, see the ASP.NET Ajax documentation on MSDN.

 

 

 

 

 

 

 

Skip Navigation Links.
Tutorials
Sample ASP.NET AJAX Application
ASP.NET AJAX and JavaScript
Extending JavaScript with ASP.NET AJAX
Creating Custom Client Script in ASP.NET AJAX
Dynamically Assigning ASP.NET AJAX Script References
Globalizing a Date by Using Client Script
Embedding a JavaScript File as a Resource in an Assembly
Embedding Localized Resources for a JavaScript File
Adding Localized Resources to a JavaScript File
Creating Custom Client Events
The UpdatePanel Control
Introduction to the UpdatePanel Control
Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls
Using the UpdatePanel Control with Data-Bound Controls
Using the UpdatePanel Control with Master Pages
Using the UpdatePanel Control with User Controls
Using the UpdatePanel Control with a Web Service
Customizing Error Handling for UpdatePanel Controls
Animating UpdatePanel Controls
Canceling an Asynchronous Postback
Giving Precedence to a Specific Asynchronous Postback
Working with PageRequestManager Events
The UpdateProgress Control
Introduction to the UpdateProgress Control
Programming UpdateProgress Controls in Client Script
The Timer Control
Introduction to the Timer Control
Using the Timer Control with Multiple UpdatePanel Controls
ASP.NET Application Services
Using Forms Authentication
Using Profile Information
Web Services
Exposing Web Services to Client Script
Calling Web Services from Client Script
ASP.NET AJAX Extensibility
Creating Custom ASP.NET AJAX Non-Visual Client Components
Creating Custom ASP.NET AJAX Client Controls
Creating an Extender Control
Adding Client Capabilities to a Web Server Control
Creating a Client Component Class Using the Prototype Model
Defining Custom Component Properties and Raising PropertyChanged Events
Releasing Component Resources

Using the ASP.NET Timer Control with Multiple UpdatePanel Controls

Introduction

In this tutorial 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 tutorial you need:

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

  • The latest release of Microsoft ASP.NET AJAX installed and configured. For more information, see Installing ASP.NET AJAX.

  • An ASP.NET AJAX 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.

  3. 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 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.

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

  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.

  8. Add a Label control to UpdatePanel2.

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

  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.

    cs

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

    vb

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

    cs

    <%@ 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>
    
    

    vb

    <%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" 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 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>
    
    
  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 tutorial 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 Introduction to the Timer Control.