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

Introduction to the Timer Control

Introduction

In this tutorial you will update part of a Web page at a timed interval by using three Microsoft ASP.NET 2.0 AJAX Extensions server controls: the ScriptManager control, the UpdatePanel control, and the Timer control. Adding these controls to a page eliminates the need to refresh the whole page with each postback. Only the contents of the UpdatePanel control will be updated. 

For more information about partial-page rendering, see Partial-Page Rendering Overview.

To implement the procedures in this tutorial you need:

  • Microsoft Visual Studio 2005 or 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 an UpdatePanel control 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 UpdatePanel control to add it to the page.

  4. Click inside the UpdatePanel control and then double-click the Timer control to add it to the UpdatePanel control.

    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 inside an UpdatePanel control. For an example of using a Timer control as a trigger outside an UpdatePanel control, see Using the Timer Control with Multiple UpdatePanel Controls.

  5. Set the Interval property of the Timer control to 10000.

    The Interval property is defined in milliseconds, so that setting the Interval property to 10,000 milliseconds will refresh the UpdatePanel control 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 applications, you should set the interval to the longest time that is still practical for your application.

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

    note

    Make sure that you add the Label control inside the UpdatePanel control.

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

  8. Click outside the UpdatePanel control and double-click the Label control to add a second label outside the UpdatePanel control.

    note

    Make sure that you add the second Label control outside the UpdatePanel control.

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

  10. Add code that sets the Text property of the Label1 control to the current time.

  11. Create a Page_Load handler and add code that sets the Text property of the Label2 control to the time that the page is created.

  12. Switch to Source view.

    Make sure that the markup for the page resembles the following:

    cs

    public partial class _Default : System.Web.UI.Page 
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Label2.Text = "Page created at: " +
              DateTime.Now.ToLongTimeString();
        }
        protected void Timer1_Tick(object sender, EventArgs e)
        {
            Label1.Text = "Panel refreshed at: " +
              DateTime.Now.ToLongTimeString();
        }
    }
    
    

    vb

    Partial Class _Default
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Label2.Text = "Page created at: " & _
              DateTime.Now.ToLongTimeString()
        End Sub
    
        Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs)
            Label1.Text = "Panel refreshed at: " & _
              DateTime.Now.ToLongTimeString()
    
        End Sub
    End Class
    
    
  13. Save your changes and press CTRL+F5 to view the page in a browser.

  14. Wait at least 10 seconds for panel to refresh.

    The text inside the panel changes to display the last time that the panel's content was refreshed. However, the text outside the panel is not refreshed.

Review

This tutorial introduced the basic concepts of using a Timer control and an UpdatePanel control to enable partial-page updates. You must add a ScriptManager control to any page that contains an UpdatePanel control or Timer control. By default, a Timer control inside the panel will cause just the panel to refresh during an asynchronous postback. A Timer control outside a panel can cause the UpdatePanel to be refreshed if it is configured as a trigger for the panel.

The next step is to learn about how to use the Timer control outside an UpdatePanel control and about how to use the timer to update more than one UpdatePanel control. For information about these tasks, see Using the Timer Control with Multiple UpdatePanel Controls.