UpdatePanel

Article
10/10/2017

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. An ASP.NET web page that contains a ScriptManager control and one or more UpdatePanel controls can automatically participate in partial-page updates, without custom client script.

The UpdatePanel control requires specific settings in a web.config file in order to function correctly. If you try to work with this control, and your site doesn't contain the required web.config file, errors appear in the Design view of the page where the control would have appeared. In Design view, if you click the control that is in that state, Microsoft Expression Web will give you the option to create a new web.config file or update your existing web.config file.

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. Writing code that coordinates 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.

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.

Specifying UpdatePanel control content

You can add content to an UpdatePanel control by placing the content in the panel in Design view. For example, you can drag other ASP.NET and HTML controls into the panel, and put your cursor in the panel and type directly in it. When you add content to an UpdatePanel control in Design view, required <ContentTemplate></ContentTemplate> tags are automatically added around the content. If you add content to an UpdatePanel control in Code view instead of Design view, you must manually add the <ContentTemplate></ContentTemplate> tags if they don't already exist; otherwise, the content in the UpdatePanel control won't render.

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. You can create triggers for an UpdatePanel control by using the UpdatePanelTrigger Collection Editor dialog box, which you display from the Triggers property in the Tag Properties panel.

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 controls 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:
- When the postback is caused by a trigger for that UpdatePanel control.
- When you explicitly call the UpdatePanel control's Update method.
- When the UpdatePanel control is nested inside another UpdatePanel control and the parent panel is updated.
- 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 nested UpdatePanel controls

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

Controls that are not compatible with UpdatePanel controls

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

Treeview control under several conditions. One is when callbacks are enabled that are not part of an asynchronous postback. Another is when you set styles directly as control properties instead of implicitly styling the control by using a reference to CSS styles. Another is when the EnableClientScript property is false (the default is true). Another is if you change the value of the EnableClientScript property between asynchronous postbacks.
Menu control when you set styles directly as control properties instead of implicitly styling the control by using a reference to CSS styles.
FileUpload and HtmlInputFile 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.

To use a FileUpload or HtmlInputFile control inside an UpdatePanel control, set the postback control that submits the file to be a PostBackTrigger control for the panel. The FileUpload and HtmlInputFile control can be used only in postback scenarios.

All other controls work inside UpdatePanel controls.

Using Web Parts Controls inside UpdatePanel controls

ASP.NET Web Parts is an integrated set of controls for creating web sites that enable end users to modify the content, appearance, and behavior of web pages directly from a browser. You can use Web Parts controls inside UpdatePanel controls with the following restrictions:

Every WebPartZone control must be inside the same UpdatePanel control. For example, you cannot have two UpdatePanel controls on the page, each with its own WebPartZone control.
The WebPartManager control manages all client state information for Web Parts controls. It must be in the outermost UpdatePanel control on a page.
You cannot import or export Web Parts controls by using an asynchronous postback. (Performing this task requires a FileUpload control, which cannot be used with asynchronous postbacks.) By default, importing Web Parts controls performs a full postback.
You cannot add or modify the styles of Web Parts controls during asynchronous postbacks.

For more information about the UpdatePanel control, see UpdatePanel Control Overview Cc295545.xtlink_newWindow(en-us,Expression.40).png in the MSDN Library.

For a description of all UpdatePanel control properties, see UpdatePanel Properties Cc295545.xtlink_newWindow(en-us,Expression.40).png in the MSDN library.