ASP.NET AJAX Overview

ASP.NET AJAX
Introduction

Microsoft ASP.NET AJAX documentation includes overviews, tutorials, and API reference topics. We suggest the following progression of documentation to help you to get started.
ASP.NET AJAX Overview
Introduction

Microsoft ASP.NET AJAX enables you to quickly create Web pages that include a rich user experience with responsive and familiar user interface (UI) elements. ASP.NET AJAX provides client-script libraries that incorporate cross-browser ECMAScript (JavaScript) and dynamic HTML (DHTML) technologies, and it integrates them with the ASP.NET 2.0 server-based development platform. By using ASP.NET AJAX, you can improve the user experience and the efficiency of your Web applications.
Why Use ASP.NET AJAX?

ASP.NET AJAX enables you to build rich Web applications that have many advantages over Web applications that are completely server-based. ASP.NET AJAX applications offer:

*

Improved efficiency by performing significant parts of a Web page's processing in the browser.
*

Familiar UI elements such as progress indicators, tooltips, and pop-up windows.
*

Partial-page updates that refresh only the parts of the Web page that have changed.
*

Client integration with ASP.NET application services for forms authentication and user profiles.
*

Integration of data from different sources through calls to Web services.
*

A framework that simplifies customization of server controls to include client capabilities.
*

Support for the most popular and generally used browsers, which includes Microsoft Internet Explorer, Mozilla Firefox, and Apple Safari.

ASP.NET AJAX Architecture

ASP.NET AJAX consists of client-script libraries and of server components that are integrated to provide a robust development framework. In addition to ASP.NET AJAX, you can use the ASP.NET AJAX Control Toolkit and the features in the ASP.NET AJAX Futures releases, which are both community supported.

The following illustration shows the functionality that is included in the client-script libraries and server components.
ASP.NET AJAX Server and Client Architecture
ASP.NET AJAX server and client architecture

The illustration shows the functionality of the client-based Microsoft AJAX Library, which includes support for creating client components, browser compatibility, and networking and core services. The illustration also shows functionality of server-based ASP.NET 2.0 AJAX Extensions, which includes script support, Web services, application services, and server controls.
ASP.NET AJAX Server Architecture

The ASP.NET AJAX server components consist of ASP.NET Web server controls and components to manage the UI and flow of an application, and to manage serialization, validation, control extensibility, and so on. There are also ASP.NET Web services that enable you to access ASP.NET application services for forms authentication and user profiles.
ASP.NET AJAX Server Controls

The ASP.NET AJAX server controls consist of server and client code that integrate to produce AJAX-like behavior. The following list describes the most frequently used ASP.NET AJAX server controls.

ScriptManager

Manages script resources for client components, partial-page rendering, localization, globalization, and custom user scripts. The ScriptManager control is required in order to use the UpdatePanel, UpdateProgress, and Timer controls.
UpdatePanel

Enables you to refresh selected parts of the page, instead of refreshing the whole page by using a synchronous postback.
UpdateProgress

Provides status information about partial-page updates in UpdatePanel controls.
Timer

Performs postbacks at defined intervals. You can use the Timer control to post the whole page, or use it together with the UpdatePanel control to perform partial-page updates at a defined interval.

ASP.NET AJAX Web Services

ASP.NET AJAX provides Web services that you can use from client script to work with ASP.NET application services for forms authentication and user profiles. This enables you to use client script to help protect resources by using forms authentication and to persist user-specific settings on the server. In addition, ASP.NET AJAX includes network components that make it easy to return results from any Web service call. For information and examples, see Asynchronous Communication Layer Overview and ASP.NET Application Services.
ASP.NET AJAX Server Control Extensibility

ASP.NET AJAX enables you to create custom ASP.NET AJAX server controls that include client behaviors. For more information, see the tutorials in ASP.NET AJAX Extensibility and the Microsoft ASP.NET AJAX Control Toolkit.
ASP.NET AJAX Client Architecture

The ASP.NET AJAX client-script libraries consist of JavaScript (.js) files that provide features for object-oriented development. The object-oriented features included in the ASP.NET AJAX client-script libraries enable a high level of consistency and modularity in client scripting. The following layers are included in the ASP.NET AJAX script libraries:

*

A browser compatibility layer. This provides compatibility across the most frequently used browsers (including Microsoft Internet Explorer, Mozilla Firefox, and Apple Safari) for your ASP.NET AJAX scripts.
*

ASP.NET AJAX core services, which include extensions to JavaScript, such as classes, namespaces, event handling, inheritance, data types, and object serialization.
*

An ASP.NET AJAX base class library, which includes components such as string builders and extended error handling.
*

A networking layer that handles communication with Web-based services and applications, and that manages asynchronous remote method calls.
*

Support for JavaScript libraries that are either embedded in an assembly or are provided as standalone JavaScript (.js) files. Embedding JavaScript libraries in an assembly can make it easier to deploy applications and can solve versioning issues.
*

Support for accessing server-based forms authentication and profile information in client script. This support is also available to Web applications that are not created by using ASP.NET, as long as the application has access to the Microsoft AJAX Library.
*

Support for release and debug modes and localization support for both assembly-embedded and standalone JavaScript files. For more information, see the ASP.NET AJAX Debugging and Tracing Overview and Localizing Resources for Component Libraries Overview.

Debugging

The ASP.NET AJAX architecture provides a model for release and debug modes. Release mode provides error checking and exception handling optimized for performance, with minimized script size. Debug mode provides more robust debugging features, such as type and argument checking. If you create debug versions of custom client scripts or script resources, ASP.NET runs the debug versions when the application is in debug mode. This enables you to throw exceptions in debug scripts while minimizing the size of release code.

A debug helper class, Sys.Debug, provides methods for displaying objects in readable form at the end of a Web page. It also shows trace messages, enables you to use assertions, and lets you break into the debugger. An extended Error Object object API provides helpful exception details with support for release and debug modes.

*

For more information, see the ASP.NET AJAX Debugging and Tracing Overview and Localizing Resources for Component Libraries Overview.

Localization and Globalization

The ASP.NET AJAX server and client architecture provides a model for localizing and globalizing client script. This enables you to design applications that use a single code base to provide UI for many locales (languages and cultures). For example, ASP.NET AJAX enables JavaScript code to format Date or Number objects automatically according to culture settings of the user's browser, without requiring a postback to the server

ASP.NET AJAX builds on the foundation of the ASP.NET 2.0 localization model. It provides additional support for localized script files that are embedded in an assembly or that are provided as .js files on disk. ASP.NET AJAX can serve localized client scripts and resources automatically for specific languages and regions.

For more information, see the following topics:

*

Localizing Resources for Component Libraries Overview
*

Embedding Localized Resources for a JavaScript File
*

Globalizing a Date by Using Client Script

ASP.NET AJAX Control Toolkit

The ASP.NET AJAX Control Toolkit is a collection of samples and components that show you some of the experiences you can create with rich client ASP.NET AJAX controls and extenders. The Control Toolkit provides samples and a powerful SDK to make it simple to create and reuse custom controls and extenders. You can download the ASP.NET AJAX Control Toolkit from the ASP.NET Ajax Web site. The ASP.NET AJAX Control Toolkit is community supported.
ASP.NET AJAX Community-supported Futures Releases

The ASP.NET AJAX community-supported Futures releases provide features that extend the core ASP.NET AJAX platform with functionality that remains under development and that is not included in the Microsoft ASP.NET AJAX release. This includes additional extender controls, support for client declarative syntax (xml-script), and more. To download and learn more about the Futures release, see the ASP.NET AJAX Web site.
Sample ASP.NET AJAX Application
Introduction

This tutorial creates a basic sample application that uses features of Microsoft ASP.NET AJAX. You can read more about what ASP.NET AJAX is, what technical issues it is designed to solve, and what its important components are in the following introductory ASP.NET AJAX documents:

*

Overview
*

ASP.NET AJAX Roadmap

In this tutorial you will build an application that displays pages of employee data from the AdventureWorks sample database. The application uses the UpdatePanel control to refresh only the part of the page that has changed, without the page flash that occurs with a postback. This is referred to as a partial-page update. The sample application also uses the UpdateProgress control to display a status message while the partial-page update is processing.

You can see the code in action in this tutorial by clicking the Run It button. To implement the procedures in your own development environment 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.
*

The AdventureWorks sample database. You can download and install the AdventureWorks database from the Microsoft Download Center. (Search for "SQL Server 2005 Samples and Sample Databases (December 2006)").

Creating an ASP.NET AJAX-Enabled Web Site

You can create ASP.NET AJAX-enabled Web sites in Visual Studio by using the template installed with ASP.NET AJAX.
To create an ASP.NET AJAX-enabled Web Site

1.

Start Visual Studio.
2.

In the File menu, click New Web Site.

The New Web Site dialog box is displayed.
3.

Under Visual Studio installed templates, select ASP.NET AJAX-Enabled Web Site.
4.

Enter a location and a language, and then click OK.

Adding an UpdatePanel Control to an ASP.NET Web Page

After you create an AJAX-enabled Web site, you create an ASP.NET Web page that includes an UpdatePanel control. Before you add an UpdatePanel control to the page, you must add a ScriptManager control. The UpdatePanel control relies on the ScriptManager control to manage partial-page updates.
To create a new ASP.NET Web page

1.

In Solution Explorer, right-click the name of the site and then click Add New Item.

The Add New Item dialog box is displayed.
2.

Under Visual Studio installed templates, select Web Form.
3.

Name the new page Employees.aspx and clear the Place code in separate file check box.
4.

Select the language you want to use.
5.

Click Add.
6.

Switch to Design view.
7.

In the AJAX Extensions tab of the toolbox, double-click the ScriptManager control to add it to the page.
UpdatePanel Tutorial
8.

Drag an UpdatePanel control from the toolbox and drop it underneath the ScriptManager control.
UpdatePanel Tutorial

Adding Content to an UpdatePanel Control

The UpdatePanel control performs partial-page updates and identifies content that is updated independently of the rest of the page. In this part of the tutorial, you will add a data-bound control that displays data from the AdventureWorks database.
To add content to an UpdatePanel control

1.

From the Data tab of the toolbox, drag a GridView control into the editable area of the UpdatePanel control.
2.

In the GridView Tasks menu, click Auto Format.
3.

In the Auto Format panel, under Select a scheme, select Colorful and then click OK.
4.

In the GridView Tasks menu, select from the Choose Data Source list.

The Data Source Configuration wizard is displayed.
5.

Under Where will the application get data from, select Database and then click OK.
6.

In the Configure Data Source wizard, for the Choose Your Data Connection step, configure a connection to the AdventureWorks database and then click Next.
7.

For the Configure the Select Statement step, select Specify a custom SQL statement or stored procedure and then click Next.
8.

In the SELECT tab of the Define Custom Statement or Stored Procedures step, enter the following SQL statement:

SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName

9.

Click Next.
10.

Click Finish.
11.

In the GridView Tasks menu, select the Enable paging check box.
12.

Save your changes, and then press CTRL+F5 to view the page in a browser.

Notice that there is no page flash when you select different pages of data. This is because the page is not performing a postback and updating the whole page every time.

Adding an UpdateProgress Control to the Page

The UpdateProgress control displays a status message while new content for an UpdatePanel control is being requested.
To add an UpdateProgress control to the page

1.

From the AJAX Extensions tab of the toolbox, drag an UpdateProgress control onto the page and drop it underneath the UpdatePanel control.
2.

Select the UpdateProgress control, and in the Properties window, set the AssociatedUpdatePanelID property to UpdatePanel1.

This associates the UpdateProgress control with the UpdatePanel control that you added previously.
3.

In the editable area of the UpdateProgress control, type Getting Employees ... .
4.

Save your changes, and then press CTRL+F5 to view the page in a browser.

If there is a delay while the page runs the SQL query and returns the data, the UpdateProgress control displays the message that you entered into the UpdateProgress control.

Adding a Delay to the Sample Application

If your application updates each page of data quickly, you might not see the content of the UpdateProgress control on the page. The UpdateProgress control supports a DisplayAfter property that enables you to set a delay before the control is displayed. This prevents the control from flashing in the browser if the update occurs very fast. By default, the delay is set to 500 milliseconds (.5 second), meaning that the UpdateProgress control will not be displayed if the update takes less than half a second.

In a development environment, you can add an artificial delay to your application to make sure that the UpdateProgress control is functioning as intended. This is an optional step and is only for testing your application.
To add a delay to the sample application

1.

Inside the UpdatePanel control, select the GridView control.
2.

In the Properties window, click the Events button.
3.

Double-click the PageIndexChanged event to create an event handler.
4.

Add the following code to the PageIndexChanged event handler to artificially create a three-second delay:
CS

//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);

VB

'Include three second delay for example only.
System.Threading.Thread.Sleep(3000)

note

The handler for the PageIndexChanged event intentionally introduces a delay for this tutorial. In practice, you would not introduce a delay. Instead, the delay would be the result of server traffic or of server code that takes a long time to process, such as a long-running database query.
5.

Save your changes, and then press CTRL+F5 to view the page in a browser.

Because there is now a three-second delay every time that you move to a new page of data, you will be able to see the UpdateProgress control.


Introduction to the UpdatePanel Control
Introduction

In this tutorial you will add partial-page update support to a Web page by using two Microsoft ASP.NET 2.0 AJAX Extensions server controls: the ScriptManager control and the UpdatePanel control. These controls remove the requirement to refresh the whole page with each postback, which improves the user experience. For more background on partial-page updates, see Partial-Page Rendering Overview.

You can see the code in action in this tutorial by clicking the Run It buttons. To implement the procedures in your own development environment 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 use an UpdatePanel control

1.

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

In the AJAX Extensions tab of the toolbox, double-click the ScriptManager control to add it to the page.
UpdatePanel Tutorial
3.

Double-click the UpdatePanel control to add it to the page.
UpdatePanel Tutorial
4.

Click inside the UpdatePanel control and then in the Standard tab of the toolbox, double-click the Label and Button controls to add them to the UpdatePanel control.
note

Make sure that you add the Label and Button controls inside the UpdatePanel control.
5.

Set the Text property of the Label to Panel created.
UpdatePanel Tutorial
6.

Double-click the Button control to add a handler for the button's Click event.
7.

Add the following code to the Click handler, which sets the value of the label in the panel to the current time.
CS

protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Refreshed at " +
DateTime.Now.ToString();
}

VB

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Label1.Text = "Refreshed at " & _
DateTime.Now.ToString()
End Sub

8.

Save your changes and press CTRL+F5 to view the page in a browser.
9.

Click the button.

Notice that the text in the panel changes to display the last time the panel's content was refreshed. This text is set in the button's Click event handler.

To see the full example in action, click the Run It button. The example is styled to better show the region of the page that the UpdatePanel represents.
Run View

The panel content changes every time that you click the button, but the whole page is not refreshed. By default, the ChildrenAsTriggers property of an UpdatePanel control is true. When this property is set to true, controls inside the panel participate in partial-page updates when any control in the panel causes a postback.

Understanding the Benefits of the UpdatePanel Control

You can understand the benefits of the UpdatePanel control best by adding some controls to the page that are not included in the update panel. You can then see how their behavior differs from the controls inside the update panel.
To demonstrate the benefits of using UpdatePanel control

1.

Create a new page and switch to in Design view.
2.

In the AJAX Extensions tab of the toolbox, double-click the ScriptManager control to add it to the page.
3.

Double-click the UpdatePanel control to add it to the page.
UpdatePanel Tutorial
4.

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

Make sure that you add the Calendar control inside the UpdatePanel control.
UpdatePanel Tutorial
5.

Click outside the UpdatePanel control and then add a second Calendar control to the page.

This control will not be part of the UpdatePanel control.
UpdatePanel Tutorial
6.

Save your changes and then press CTRL+F5 view the page in a browser.
7.

Navigate to the previous or next month in the calendar that is inside the UpdatePanel control.

The displayed month changes without refreshing the whole page.
8.

Navigate to the previous or next month in the calendar that is outside the UpdatePanel control

The whole page is refreshed.

To see the full example in action, click the Run It button. The example is styled to better show the region of the page that the UpdatePanel represents.
Run View

Refreshing an UpdatePanel Control with an External Button

By default, a postback control (such as a button) inside an UpdatePanel control causes a partial-page update. By default, a button or other control outside an UpdatePanel control causes the whole page to be refreshed, as you have seen.

You can also configure a control outside the update panel to be a trigger that refreshes just the update panel.
To refresh of an UpdatePanel control with an external button

1.

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

In the AJAX Extensions tab of the toolbox, double-click the ScriptManager and UpdatePanel controls to add one of each control to the page.
UpdatePanel Tutorial
3.

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

Set the Text property of the label to Panel created.
UpdatePanel Tutorial
5.

Click outside the UpdatePanel control and then add a Button control.
UpdatePanel Tutorial
6.

Double-click the Button control to add a handler for the button's Click event.
7.

Add the following code to the Click handler, which sets the value of the label in the panel to the current time.
CS

protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Refreshed at " +
DateTime.Now.ToString();
}

VB

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Label1.Text = "Refreshed at " & _
DateTime.Now.ToString()
End Sub

8.

Switch to Design view, select the UpdatePanel, and then view the Properties window.
UpdatePanel Tutorial
note

If the Properties window is not displayed, press F4.
9.

In the Triggers field, double-click the ellipsis (…) button.

The UpdatePanelTrigger Collection Editor dialog box is displayed.
UpdatePanel Tutorial
10.

Click Add to add a new trigger.
11.

In the ControlID field of the trigger properties, use the drop-down list to select Button1.
UpdatePanel Tutorial

In this example, the EventName property of the trigger was not specified. Therefore, the button's default event (the Click event) will trigger the refresh of the UpdatePanel control.
12.

Click OK in collection editor.
13.

Save your changes and then press CTRL+F5 view the page in a browser.
14.

Click the button.

The text in the panel changes to display the time that the panel's content was refreshed.
15.

Click the button several more times.

The time changes, but the whole page is not refreshed.

Clicking the button outside the UpdatePanel refreshes the panel's content because you configured the button to be a trigger for the UpdatePanel control. A button that is a trigger performs an asynchronous postback when you click it, and causes a refresh of the associated update panel. This behavior resembles the behavior of the first example in this tutorial, where the button was inside the UpdatePanel.


Introduction to the UpdateProgress Control
Introduction

In this tutorial you will use UpdateProgress controls to display the progress of partial-page updates. If a page contains UpdatePanel controls, you can also include UpdateProgress controls to keep users informed about the status of partial-page updates. You can use one UpdateProgress control to represent the progress of partial-page updates for the whole page. Alternatively, you can include an UpdateProgress control for every UpdatePanel control. Both of these patterns are shown in this tutorial.

You can see the code in action in this tutorial by clicking the Run It buttons. To implement the procedures in your own development environment 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.

Using a Single UpdateProgress Control

You will begin by using a single UpdateProgress control to show the progress for all partial-page updates on the page.
To use a single UpdateProgress control for the whole page

1.

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

In the AJAX Extensions tab of the toolbox, double-click the ScriptManager control to add it to the page.
3.

Double click the UpdatePanel control to add it to the page.
UpdatePanel Tutorial
4.

Double-click the UpdateProgress control to add it to the page.
5.

Inside the UpdateProgress control, add the text Processing….
UpdateProgress Tutorial
6.

Inside the UpdatePanel control add a Label control and a Button control.
7.

Set the Text property of the Label control to Initial Page Rendered.
UpdateProgress Tutorial
8.

Double click the Button control to add a handler for the button's Click event.
9.

Add the following code to the Click handler, which artificially creates a three-second delay and then displays the current time.
CS

protected void Button1_Click(object sender, EventArgs e)
{
// Introducing delay for demonstration.
System.Threading.Thread.Sleep(3000);
Label1.Text = "Page refreshed at " +
DateTime.Now.ToString();
}

VB

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
' Introducing delay for demonstration.
System.Threading.Thread.Sleep(3000)
Label1.Text = "Page refreshed at " & _
DateTime.Now.ToString()
End Sub

note

The handler for the Click event intentionally introduces a delay for this tutorial. In practice, you would not introduce a delay. Instead, the delay would be the result of server traffic or of server code that takes a long time to process, such as a long-running database query.
10.

Save your changes and then press CTRL+F5 to view the page in a browser.
11.

Click the button.

After a short delay, the progress message is displayed. When the handler for the Click event has finished, the progress message is hidden and the time that is displayed in the panel is updated.

To see the full example in action, click the Run It button. The example is styled to better show the region of the page that the UpdatePanel represents.
Run View

Using Multiple UpdateProgress Controls

One UpdateProgress control on the page can show a progress message for all UpdatePanel controls on the page. Asynchronous postbacks originating inside an UpdatePanel control cause the UpdateProgress control to display its message. Postbacks from controls that are triggers for the panel also display the message.

You can associate the UpdateProgress control with a single UpdatePanel control by setting the progress control's AssociatedUpdatePanelID property. In that case, the UpdateProgress control displays a message only when a postback originates inside the associated UpdatePanel control.

In the next procedure, two UpdateProgress controls are added to a page, each associated with a different UpdatePanel control.
To use multiple UpdateProgress controls on a page

1.

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

In the AJAX Extensions tab of the toolbox, double-click the ScriptManager control to add it to the page.
3.

Double-click the UpdatePanel control two times to add two instances of the control to the page.
UpdateProgress Tutorial
4.

In each UpdatePanel control, add a Label control and a Button control.
5.

Set the Text property of both Label controls to Panel Initially Rendered.
UpdateProgress Tutorial
6.

Double-click each Button control to add a handler for each button's Click event.
7.

Add the following code to each Click handler, which artificially creates a three-second delay and then displays the current time.
CS

protected void Button1_Click(object sender, EventArgs e)
{
// Introducing delay for demonstration.
System.Threading.Thread.Sleep(3000);
Label1.Text = "Page refreshed at " +
DateTime.Now.ToString();
}

protected void Button2_Click(object sender, EventArgs e)
{
// Introducing delay for demonstration.
System.Threading.Thread.Sleep(3000);
Label2.Text = "Page refreshed at " +
DateTime.Now.ToString();

}

VB

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
' Introducing delay for demonstration.
System.Threading.Thread.Sleep(3000)
Label1.Text = "Page refreshed at " & _
DateTime.Now.ToString()
End Sub

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
' Introducing delay for demonstration.
System.Threading.Thread.Sleep(3000)
Label1.Text = "Page refreshed at " & _
DateTime.Now.ToString()
End Sub

8.

Switch to Design view.
9.

Click inside the first UpdatePanel control and add an UpdateProgress control.
10.

Inside the UpdateProgress control, add the text Panel1 Updating.

This sets the ProgressTemplate property.
11.

Select the UpdateProgress control, and in the Properties window, set the AssociatedUpdatePanelID property to UpdatePanel1.
UpdateProgress Tutorial
12.

Click inside the second UpdatePanel control and add a second UpdateProgress control.
13.

Set the text of the UpdateProgress control to Panel2 Updating and set its AssociatedUpdatePanelID property to UpdatePanel2.
UpdateProgress Tutorial
14.

Save your changes, and then press CTRL+F5 to view the page in a browser.
15.

Click the button in the first panel.

After a short delay, the progress message associated with the first panel is displayed. The other UpdateProgress control is not displayed.
16.

Click the button in the second panel.

The progress message associated with the second panel is displayed.
note

By default, starting a new asynchronous postback while an earlier one is in progress cancels the first postback. For more information, see Giving Precedence to a Specific Asynchronous Postback.
17.
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:
18.

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

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

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.


ASP.NET AJAX Server Controls


UpdatePanel Control Overview
Introduction

ASP.NET UpdatePanel controls enable you to build rich, client-centric Web applications. By using UpdatePanel controls, you can refresh selected parts of the page instead of refreshing the whole page with a postback. This is referred to as performing a partial-page update. A Web page that contains a ScriptManager control and one or more UpdatePanel controls can automatically participate in partial-page updates, without custom client script.

This topic contains information about the following:

*

Scenarios
*

Background
*

Code Examples
*

Class Reference

Scenarios

The UpdatePanel control is a server control that helps you develop Web pages with complex client behavior that makes a Web page appear more interactive to the end user. Coordinating between server and client to update only specified parts of a Web page usually requires in-depth knowledge of ECMAScript (JavaScript). However, by using the UpdatePanel control, you can enable a Web page to participate in partial-page updates without writing any client script. If you want, you can add custom client script to enhance the client user experience. When you use an UpdatePanel control, the page behavior is browser independent and can potentially reduce the amount of data that is transferred between client and server.
Background

UpdatePanel controls work by specifying regions of a page that can be updated without refreshing the whole page. This process is coordinated by the ScriptManager server control and the client PageRequestManager class. When partial-page updates are enabled, controls can asynchronously post to the server. An asynchronous postback behaves like a regular postback in that the resulting server page executes the complete page and control life cycle. However, with an asynchronous postback, page updates are limited to regions of the page that are enclosed in UpdatePanel controls and that are marked to be updated. The server sends HTML markup for only the affected elements to the browser. In the browser, the client PageRequestManager class performs Document Object Model (DOM) manipulation to replace existing HTML with updated markup. The following illustration shows a page that is loaded for the first time, and a subsequent asynchronous postback that refreshes the content of an UpdatePanel control.
Partial-Page Rendering Overview
Partial-page rendering overview
Enabling Partial-Page Updates

The UpdatePanel control requires a ScriptManager control in the Web page. By default, partial-page updates are enabled because the default value of the EnablePartialRendering property of the ScriptManager control is true.

The following example shows markup that defines a ScriptManager control and an UpdatePanel control on a page. The UpdatePanel control contains a Button control that refreshes the content inside the panel when you click it. By default, the ChildrenAsTriggers property is true. Therefore, the Button control acts as an asynchronous postback control.
Run View
Specifying UpdatePanel Control Content

You add content to an UpdatePanel control declaratively or in the designer by using the ContentTemplate property. In markup, this property is exposed as a element. To add content programmatically, you use the ContentTemplateContainer property.

When a page that contains one or more UpdatePanel controls is first rendered, all the contents of the UpdatePanel controls are rendered and sent to the browser. On subsequent asynchronous postbacks, the content of individual UpdatePanel controls might be updated. Updates depend on the panel settings, on what element caused the postback, and on code that is specific to each panel.
Specifying UpdatePanel Triggers

By default, any postback control inside an UpdatePanel control causes an asynchronous postback and refreshes the panel's content. However, you can also configure other controls on the page to refresh an UpdatePanel control. You do this by defining a trigger for the UpdatePanel control. A trigger is a binding that specifies which postback control and event cause a panel to update. When the specified event of the trigger control is raised (for example, a button's Click event), the update panel is refreshed.

The following example shows how to specify a trigger for an UpdatePanel control.
Run View

The trigger is defined by using the element inside the element of the UpdatePanel control. (If you are editing the page in Visual Studio, you can create triggers by using the UpdatePanelTrigger Collection Editor dialog box.)

A trigger's control event is optional. If you do not specify an event, the trigger event is the default event of the control. For example, for the Button control, the default event is the Click event.
How UpdatePanel Controls Are Refreshed

The following list describes the property settings of the UpdatePanel control that determine when a panel's content is updated during partial-page rendering.

*

If the UpdateMode property is set to Always, the UpdatePanel control’s content is updated on every postback that originates from anywhere on the page. This includes asynchronous postbacks from controls that are inside other UpdatePanel controls, and postbacks from controls that are not inside UpdatePanel controls.
*

If the UpdateMode property is set to Conditional, the UpdatePanel control’s content is updated when one of the following is true:
o

When the postback is caused by a trigger for that UpdatePanel control.
o

When you explicitly call the UpdatePanel control's Update() method.
o

When the UpdatePanel control is nested inside another UpdatePanel control and the parent panel is updated.
o

When the ChildrenAsTriggers property is set to true and any child control of the UpdatePanel control causes a postback. Child controls of nested UpdatePanel controls do not cause an update to the outer UpdatePanel control unless they are explicitly defined as triggers for the parent panel.

If the ChildrenAsTriggers property is set to false and the UpdateMode property is set to Always, an exception is thrown. The ChildrenAsTriggers property is intended to be used only when the UpdateMode property is set to Conditional.
Using UpdatePanel Controls in Master Pages

To use an UpdatePanel control in a master page, you must decide how to include the ScriptManager control. If you include the ScriptManager control on the master page, it can act as the ScriptManager control for all content pages. (If you want to register scripts or services declaratively in a content page, you can add a ScriptManagerProxy control to that content page.)

If the master page does not contain the ScriptManager control, you can put the ScriptManager control individually on each content page that contains an UpdatePanel control. The design choice depends on how you intend to manage client script in your application. For more information about how to manage client script, see ScriptManager Control Overview. For more information about master pages, see ASP.NET Master Pages Overview.

If the ScriptManager control is on the master page and you do not need partial-page rendering capabilities for a content page, you must programmatically set the EnablePartialRendering property of the ScriptManager control to false for that content page.

The following example shows markup for a ScriptManager control on the master page and an UpdatePanel control on a content page. In this example, a property named LastUpdate is defined on the master page and is referenced from inside the UpdatePanel control.
Run View
Using Nested UpdatePanel Controls

UpdatePanel controls can be nested. If the parent panel is refreshed, all nested panels are refreshed also.

The following example shows markup that defines an UpdatePanel control inside another UpdatePanel control. A button in the parent panel triggers an update of the content in both the parent and the child panel. The button in the child panel triggers an update of only the child panel.
Run View

The following example shows a nested UpdatePanel control with a GridView control. The GridView control is inside an UpdatePanel control, and each GridView row contains a nested GridView control inside another UpdatePanel control.
Run View

When an inner GridView control displays a new page of records, the outer panel and the panels in the other rows of the outer GridView control are not refreshed. When the outer GridView control displays a new page of records, the outer panel and the nested panels are all refreshed.
Refreshing an UpdatePanel Programmatically

The following example shows how to refresh an UpdatePanel control programmatically. In this example, a page registers a control as a trigger by calling the RegisterAsyncPostBackControl(Control) method. The code refreshes the UpdatePanel control programmatically by calling the Update() method.
Run View
Creating UpdatePanel Controls Programmatically

To add an UpdatePanel control to a page programmatically, you create a new instance of the UpdatePanel control. You then add controls to it by using the ContentTemplateContainer property and the Add(Control) method. Do not add controls directly to the ContentTemplate property.

When an UpdatePanel control is added programmatically, only postbacks from controls in the same naming container as the UpdatePanel control can be used as triggers for the panel.

The following example shows how to programmatically add an UpdatePanel control to a page. The example adds a Label and a Button control to the update panel by using the ContentTemplateContainer property. Because the ChildrenAsTriggers property is true by default, the Button control acts as a trigger for the panel.
Run View
Controls that Are Not Compatible with UpdatePanel Controls

The following ASP.NET controls are not compatible with partial-page updates, and are therefore not supported inside an UpdatePanel control:

*

TreeView and Menu controls.
*

Web Parts controls. For more information, see ASP.NET Web Parts Controls.
*

FileUpload controls when they are used to upload files as part of an asynchronous postback.
*

GridView and DetailsView controls when their EnableSortingAndPagingCallbacks property is set to true. The default is false.
*

Login, PasswordRecovery, ChangePassword, and CreateUserWizard controls whose contents have not been converted to editable templates.
*

The Substitution control.
*

Validation controls, which includes the BaseCompareValidator, BaseValidator, CompareValidator, CustomValidator, RangeValidator, RegularExpressionValidator, RequiredFieldValidator, and ValidationSummary control.

Controls that are incompatible with partial-page rendering can still be used on a page outside UpdatePanel controls. Additionally, in some cases you can use the controls in a specific way to make them compatible with partial-page updates. For example, you can use the Login, ChangePassword, or PasswordRecovery controls inside an UpdatePanel control if you can convert their contents to templates. (If you are using Visual Studio, in Design view you can convert the controls by using smart-tag menu commands such as Convert to Template or Customize Create User Step.) When you convert these controls into editable templates, the validation controls that are used in the control are defined declaratively by using markup in the page. To make the validators compatible with an UpdatePanel control, set the EnableClientScript property of the validators to false. This disables the client script that would ordinarily be used to perform validation in the browser. As a result, during an asynchronous postback, the validators perform validation on the server. However, because only the content of the UpdatePanel is refreshed, the validators can provide the kind of immediate feedback that is ordinarily provided by client script.

To use a FileUpload control inside an UpdatePanel control, set the postback control that submits the file to be a PostBackTrigger control for the panel.

All other controls work inside UpdatePanel controls. However, in some circumstances, a control might not work as expected inside an UpdatePanel control. These circumstances include the following:

*

Registering script by calling registration methods of the ClientScriptManager control.
*

Rendering script or markup directly during control rendering, such as by calling the Write(String) method.

If the control calls script registration methods of the ClientScriptManager control, you could use corresponding script registration methods of the ScriptManager control instead. In that case, the control can work inside an UpdatePanel control.
Code Examples

The following sections include examples that show how to create and use UpdatePanel controls.
How-to and Walkthrough Topics

*

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
*

Working with PageRequestManager Events
*

Animating UpdatePanel Controls
*

Canceling an Asynchronous Postback
*

Giving Precedence to a Specific Asynchronous Postback

Class Reference

The key server classes for UpdatePanel controls are shown in the following table.

Class


Description

UpdatePanel


A server control that specifies the parts of a Web page that can participate in partial-page updates.

ScriptManager


A server control that manages partial-page rendering. The ScriptManager control registers script components to send to the browser. It also overrides page rendering so that only specified regions of the page are rendered.

ScriptManagerProxy


A server control that enables nested components (such as content pages or user controls) to add script and Web-service references. This control is useful if the parent element already contains a ScriptManager control.

PageRequestManager


A class in the Microsoft AJAX Library that coordinates partial-page rendering in the browser. The PageRequestManager class asynchronously exchanges information with the server, and exposes events and methods for custom client script development.

UpdatePanel Control Tutorials
Introduction

The topics in this section provide examples of how to use the UpdatePanel control to enable partial-page rendering in an ASP.NET Web page.
In This Section

Introduction to the UpdatePanel Control

Provides examples of how to use the UpdatePanel control to enable ASP.NET Web pages to participate in partial-page rendering.
Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls

Provides examples of how to use multiple UpdatePanel controls on a page, and of how to trigger an update by using a control outside the UpdatePanel control.
Using the UpdatePanel Control with Data-Bound Controls

Provides examples of how to use data-bound controls inside UpdatePanel controls and of how to create and refresh UpdatePanel controls programmatically.
Using the UpdatePanel Control with Master Pages

Provides examples of how to use the UpdatePanel control with ASP.NET master pages, which includes how to register a control on the master page that updates content on the content page.
Using the UpdatePanel Control with User Controls

Provides examples of how to use the UpdatePanel control with ASP.NET user controls.
Using the UpdatePanel Control with a Web Service

Provides an example of how to use the UpdatePanel control with a Web service, and of how to persist data between asynchronous postbacks that is retrieved by the service.
Customizing Error Handling for UpdatePanel Controls

Provides examples of how to customize error handling when you use UpdatePanel controls.
Animating UpdatePanel Controls

Provides an example of how to handle events of the PageRequestManager class to animate a panel that was updated during an asynchronous postback.
Canceling an Asynchronous Postback

Provides an example of how to handle the initializeRequest event of the PageRequestManager class to cancel the asynchronous postback that is currently executing.
Giving Precedence to a Specific Asynchronous Postback

Provides an example of how to handle the InitializeRequest event of the PageRequestManager class to make sure that an asynchronous postback from a specified control finishes before another postback is started.
Working with PageRequestManager Events

Provides a summary of the PageRequestManager events that can be used to customize partial-page updates.


UpdateProgress Control Overview
Introduction

The UpdateProgress control provides status information about partial-page updates in UpdatePanel controls. You can customize the default content and the layout of the UpdateProgress control. To prevent flashing when a partial-page update is very fast, you can specify a delay before the UpdateProgress control is displayed.

This topic contains information about the following:

*

Scenarios
*

Background
*

Code Examples
*

Class Reference

Scenarios

The UpdateProgress control helps you design a more intuitive UI when a Web page contains one or more UpdatePanel controls for partial-page rendering. If a partial-page update is slow, you can use the UpdateProgress control to provide visual feedback about the status of the update. You can put multiple UpdateProgress controls on a page, each associated with a different UpdatePanel control. Alternatively, you can use one UpdateProgress control and associate it with all UpdatePanel controls on the page.
Background

The UpdateProgress control renders a
element that is displayed or hidden depending on whether an associated UpdatePanel control has caused an asynchronous postback. For initial page rendering and for synchronous postbacks, the UpdateProgress control is not displayed.
Associating an UpdateProgress Control with an UpdatePanel Control

You associate an UpdateProgress control with an UpdatePanel control by setting the AssociatedUpdatePanelID property of the UpdateProgress control. When a postback event originates from an UpdatePanel control, any associated UpdateProgress controls are displayed. If you do not associate the UpdateProgress control with a specific UpdatePanel control, the UpdateProgress control displays progress for any asynchronous postback.

If the ChildrenAsTriggers property of a UpdatePanel control is set to false and an asynchronous postback originates from inside that UpdatePanel control, any associated UpdateProgress controls will be displayed.
Creating Content for the UpdateProgress Control

Use the ProgressTemplate property to declaratively specify the message displayed by an UpdateProgress control. The element can contain HTML and markup. The following example shows how to specify a message for an UpdateProgress control.
CS



An update is in progress...



VB



An update is in progress...



The following example shows one UpdateProgress control that shows update status for two UpdatePanel controls.
Run View

The following example shows two UpdateProgress controls. Each shows update status for an associated UpdatePanel control.
Run View

The following example shows how to add a button to the element that the user can click to stop the asynchronous postback. Any new postbacks that are initiated while another postback is executing are canceled.
Run View

In the previous example, the onClick attribute of an HtmlButton control in the element calls the JavaScript AbortPostBack function. For more information, see the abortPostBack method and the isInAsyncPostBack property of the PageRequestManager class.
Specifying Content Layout

When the DynamicLayout property is true, the UpdateProgress control initially occupies no space in the page display. Instead, the page dynamically changes to display the UpdateProgress control contents when needed. To support dynamic display, the control is rendered as a
element that has its display style property initially set to none.

When the DynamicLayout property is false, the UpdateProgress control occupies space in the page display, even if the control is not visible. In that case, the
element for the control has its display style property set to block and its visibility initially set to hidden.
Putting UpdateProgress Controls on the Page

You can put UpdateProgress controls inside or outside UpdatePanel controls. A UpdateProgress control is displayed whenever the UpdatePanel control it is associated with is updated as a result of an asynchronous postback. This is true even if the UpdateProgress control is inside another UpdatePanel control.

If an UpdatePanel control is inside another update panel, a postback that originates inside the child panel causes any UpdateProgress controls associated with the child panel to be displayed. It also displays any UpdateProgress controls associated with the parent panel. If a postback originates from an immediate child control of the parent panel, only the UpdateProgress controls associated with the parent panel are displayed. This follows the logic for how postbacks are triggered.
Specifying When UpdateProgress Controls Are Displayed

You can programmatically control when an UpdateProgress control is displayed by using the JavaScript beginRequest and endRequest events of the PageRequestManager class. In the beginRequest event handler, display the DOM element that represents the UpdateProgress control. In the endRequest event handler, hide the element.

You must provide client script to show and hide an UpdateProgress control in the following circumstances:

*

During a postback from a control that is registered as an asynchronous postback trigger for the update panel, but that the UpdateProgress control is not associated with.
*

During postbacks from controls that are registered programmatically as asynchronous postback controls by using the RegisterAsyncPostBackControl(Control) method of the ScriptManager control. In that case, the UpdateProgress control cannot determine automatically that an asynchronous postback has been triggered.

Code Examples

The following sections include code examples for creating and using UpdateProgress controls.
How-to and Walkthrough Topics

*

Introduction to the UpdateProgress Control
*

Programming UpdateProgress Controls in Client Script

Class Reference

The following table lists the key classes for working with the UpdateProgress class.

Class


Description

UpdateProgress


Provides visual feedback in the browser when the content of UpdatePanel controls is updated.

UpdatePanel


Specifies parts of a Web page that can participate in partial-page updates.

ScriptManager


Manages partial-page rendering. The ScriptManager control registers script components to send to the browser and overrides page rendering so that only specified regions of the page are rendered.

PageRequestManager


Coordinates partial-page rendering in the browser. The PageRequestManager class asynchronously exchanges information with the server and exposes events and methods for custom client scripting.


UpdateProgress Control Tutorials
Introduction

The topics in this section provide examples of using the UpdateProgress control to display status during the partial-page rendering.
In This Section

Introduction to the UpdateProgress Control

Provides examples of how to use one UpdateProgress control to show partial-page update status for all UpdatePanel controls on the page, and two UpdateProgress controls to show status for different UpdatePanel controls.
Programming UpdateProgress Controls in Client Script

Provides examples of how to customize the behavior of the UpdateProgress control with script to cancel asynchronous postbacks and to toggle visibility of the progress message.

Timer Control Overview
Introduction

The Timer control performs postbacks at defined intervals. If you use the Timer control with an UpdatePanel control, you can enable partial-page updates at a defined interval. You can also use the Timer control to post the whole page.

This topic contains the following sections:

*

Scenarios
*

Background
*

Code Examples
*

Class Reference

Timer Control Scenarios

You use the Timer control when you want to do the following:

*

Periodically update the contents of one or more UpdatePanel controls without refreshing the whole Web page.
*

Run code on the server every time that a Timer control causes a postback.
*

Synchronously post the whole Web page to the Web server at defined intervals.

Background

The Timer control is a server control that embeds a JavaScript component into the Web page. The JavaScript component initiates the postback from the browser when the interval that is defined in the Interval property has elapsed. You set the properties for the Timer control in code that runs on the server and those properties are passed to the JavaScript component.

An instance of the ScriptManager class must be included in the Web page when you use the Timer control.

When a postback was initiated by the Timer control, the Timer control raises the Tick event on the server. You can create an event handler for the Tick event to perform actions when the page is posted to the server.

Set the Interval property to specify how often postbacks will occur, and set the Enabled property to turn the Timer on or off. The Interval property is defined in milliseconds and has a default value of 60,000 milliseconds, or 60 seconds.
note

Setting the Interval property of a Timer control to a small value can generate significant traffic to the Web server. Use the Timer control to refresh the content only as often as necessary.

You can include more than one Timer control on a Web page if different UpdatePanel controls must be updated at different intervals. Alternatively, a single instance of the Timer control can be the trigger for more than one UpdatePanel control in a Web page.
Using a Timer Control Inside an UpdatePanel Control

When the Timer control is included inside an UpdatePanel control, the Timer control automatically works as a trigger for the UpdatePanel control. You can override this behavior by setting the ChildrenAsTriggers property of the UpdatePanel control to false.

For Timer controls inside an UpdatePanel control, the JavaScript timing component is re-created only when each postback finishes. Therefore, the timed interval does not start until the page returns from the postback. For instance, if the Interval property is set to 60,000 milliseconds (60 seconds) but the postback takes 3 seconds to complete, the next postback will occur 63 seconds after the previous postback.

The following example shows how to include a Timer control inside an UpdatePanel control.



UpdateMode="Conditional">


Interval="120000"
OnTick="Timer1_Tick">



Using a Timer Control Outside an UpdatePanel Control

When the Timer control is outside an UpdatePanel control, you must explicitly define the Timer control as a trigger for the UpdatePanel control to be updated.

If the Timer controls is outside an UpdatePanel control, the JavaScript timing component continues to run as the postback is being processed. For example, if the Interval property is set to 60,000 milliseconds (60 seconds) and the postback takes 3 seconds to complete, the next postback will occur 60 seconds after the previous postback. The user will see the refreshed content in the UpdatePanel control for only 57 seconds.

You must set the Interval property to a value that enables one asynchronous postback to complete before the next postback is initiated. If a new postback is initiated while an earlier postback is being processed, the first postback is canceled.

The following example shows how to use the Timer control outside an UpdatePanel control.



OnTick="Timer1_Tick">




EventName="Tick" />





Code Examples

The following example shows an UpdatePanel control that displays a randomly generated stock price and the time that the stock price was generated. By default, the Timer control updates the content in the UpdatePanel every 10 seconds. The user can decide to update the stock price every 10 seconds, every 60 seconds, or not at all. When the user chooses not to update the stock price, the Enabled property is set to false.
cs

<%@ Page Language="C#" AutoEventWireup="true" %>


















Stock price is

as of








Update stock price every:








Page loaded at





vb

<%@ Page Language="VB" AutoEventWireup="true" %>



















Stock price is

as of











Page originally created at





ScriptManager Control Overview
Introduction

The ScriptManager control manages client script for Microsoft ASP.NET AJAX pages. By default, the ScriptManager control registers the script for the Microsoft AJAX Library with the page. This enables client script to use the type system extensions and to support features such as partial-page rendering and Web-service calls.

This topic contains the following sections:

*

Why Use the ScriptManager Control
*

Using Type System Extensions
*

Enabling Partial-Page Rendering
*

Registering Custom Script
*

Registering Web Services
*

Using Authentication and Profile Services from Client Script
*

The ScriptManagerProxy Control
*

Class Reference

Why Use the ScriptManager Control

You must use a ScriptManager control on a page to enable the following features of ASP.NET AJAX:

*

Client-script functionality of the Microsoft AJAX Library, and any custom script that you want to send to the browser. For more information, see ASP.NET AJAX and JavaScript.
*

Partial-page rendering, which enables regions on the page to be independently refreshed without a postback. The ASP.NET AJAX UpdatePanel, UpdateProgress, and Timer controls require a ScriptManager control to support partial-page rendering.
*

JavaScript proxy classes for Web services, which enable you to use client script to access Web services by exposing Web services as strongly typed objects.
*

JavaScript classes to access ASP.NET authentication and profile application services.

Enabling Partial-Page Rendering

When a page contains one or more UpdatePanel controls, the ScriptManager control manages partial-page rendering in the browser. The control interacts with the page life cycle to update the parts of the page that are inside UpdatePanel controls. For more information, see Partial-Page Rendering Overview.

The EnablePartialRendering property of the ScriptManager control determines whether a page participates in partial-page updates. By default, the EnablePartialRendering property is true. Therefore, partial-page rendering is enabled by default when you add a ScriptManager control to the page. For information about how to use the UpdatePanel control with the ScriptManager control, see Introduction to the UpdatePanel Control and Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls.
Handling Errors

During partial-page rendering, you can handle errors by doing the following:

*

Set the AllowCustomErrorsRedirect property, which determines how the custom error section of the Web.config file is used when an error occurs during an asynchronous postback.
*

Handle the ScriptManager control's AsyncPostBackError event, which is raised when there is a page error during an asynchronous postback.
*

Set the AsyncPostBackErrorMessage property, which is the error message that is sent to the browser.

Using Type System Extensions

Microsoft AJAX Library adds type-system extensions to JavaScript that provide namespaces, inheritance, interfaces, enumerations, reflection, and helper functions for strings and arrays. These extensions provide functionality in client script that is like that of the .NET Framework. They enable you to write ASP.NET 2.0 AJAX Extensions applications in a structured way that improves maintainability, makes it easier to add features, and makes it easier to layer functionality. Adding a ScriptManager control to an ASP.NET Web page automatically includes the type-system extensions so that you can use the library in client script. For more information, see Extending JavaScript with ASP.NET AJAX.
Registering Custom Script

Use the ScriptManager control to manage resources that you have created for controls that participate in partial-page updates. Resources include scripts, styles, hidden fields, and arrays. The Scripts collection of the ScriptManager control contains a ScriptReference object for each script that is available to the browser. You can specify the scripts declaratively or programmatically.

The ScriptManager control also exposes registration methods that you can use to manage client script and hidden fields programmatically. When you are registering script or hidden fields that support partial-page updates, you must call registration methods of the ScriptManager control. (To register scripts that are not needed for partial-page updates, you use methods of the ClientScriptManager class.)
note

Any scripts on the page that are registered with the ScriptManager control and all event-handling script must be inside the
element on the page. Otherwise the script will not be registered or executed.

For a list of the ClientScriptManager controls registration methods, see Creating Custom Client Script in ASP.NET AJAX and the ClientScriptManager class overview.
Registering Web Services

The ScriptManager control's Services collection contains a ServiceReference object for each Web service that is registered with the ScriptManager control. The ASP.NET AJAX framework generates a client proxy object for each ServiceReference object in the Services collection. The proxy classes and their strongly typed members simplify using Web services from client script.

You can programmatically add ServiceReference objects to the Services collection to register Web services at run time. For more information, see Web Services.
Using Authentication and Profile Services from Client Script

The Microsoft AJAX Library includes proxy classes for calling the ASP.NET 2.0 forms authentication and profile application services directly from JavaScript. If you want to use a custom authentication service, you can register it using the ScriptManager control. For more information, see ASP.NET Application Services.
The ScriptManagerProxy Class

Only one instance of the ScriptManager control can be added to the page. The page can include the control directly, or indirectly inside a nested component such as a user control, content page for a master page, or nested master page. In cases where a ScriptManager control is already on the page but a nested or parent component needs additional features of the ScriptManager control, the component can include a ScriptManagerProxy control. For example, the ScriptManagerProxy control enables you to add scripts and services that are specific to nested components.
Class Reference

Class


Description

ScriptManager


A server control that makes script resources available to the browser, including the Microsoft AJAX Library and the functionality that enables partial-page rendering.

ScriptManagerProxy


A server control that enables nested components to add script and service references if the page already contains a ScriptManager control.