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.

3. Double-click the UpdatePanel control to add it to the page.

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.

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.

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.

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.

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.

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.

5. Click outside the UpdatePanel control and then add a Button control.

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.

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.

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.

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.
To see the full example in action, click the Run It button. The example is styled to better
show the region of the page the UpdatePanel represents.
Run View

Nesting UpdatePanel Controls

In some scenarios, nesting UpdatePanel controls enables you to provide UI functionality
that would be difficult to provide otherwise. Nested panels are useful when you want to
be able to refresh specific regions of the page separately and refresh multiple regions at
the same time. You can accomplish this by setting the UpdateMode property of both the
outer and nested controls to Conditional. This causes the outer panel not to refresh its
page region if only the inner panel is refreshing. However, if the outer panel is refreshed,
the nested panels are refreshed also.

In the following example, a simplified form of this idea is demonstrated.

To nest UpdatePanel controls

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.

In the toolbox, double-click the UpdatePanel control to add an UpdatePanel control to

the page.
UpdatePanel Tutorial
4.

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

Set the button's Text property to Refresh Outer Panel.

UpdatePanel Tutorial
6.

In the Properties window, set the UpdateMode property of the UpdatePanel control to
Conditional.
 UpdatePanel Tutorial
7.

Switch to Source view and add the following code inside the <ContentTemplate>
element of the <asp:UpdatePanel> element.
CS

Last refresh <%=DateTime.Now.ToString() %> <br />

VB

Last refresh <%=DateTime.Now.ToString() %> <br />

The code displays the time and is used to indicate when the markup was last rendered.
8.

Switch to Design view, click inside the UpdatePanel control, and then add a second
UpdatePanel control inside the first panel.
9.

In the Properties window, set the UpdateMode property of the nested UpdatePanel
control to Conditional.
UpdatePanel Tutorial
10.

Add a Calendar control inside the nested UpdatePanel control.

UpdatePanel Tutorial
11.

Switch to Source view and add the following code inside the <ContentTemplate>
element of the nested <asp:UpdatePanel> element.
CS

Last refresh <%=DateTime.Now.ToString() %> <br />

VB

Last refresh <%=DateTime.Now.ToString() %> <br />

12.

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

When you move to the previous or next month in the calendar in the nested
UpdatePanel control, the outer panel's time does not change because the content is not re-
rendered. In contrast, when you click the button in the outer panel, the time in the inner
panel is refreshed. The calendar does not change because by default the EnableViewState
property is true for the Calendar control.

To run the example, click the Run It button. The example is styled to better show the
region of the page that the UpdatePanel control represents.

Update Progress Control

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.