Using the ASP.NET UpdatePanel Control with User Controls

10/22/2014

5 minutes to read

In this article

You can enable partial-page updates for user controls as you do for other controls on a Web page. You must add a ScriptManager control to the page and set its EnablePartialRendering property to true. The ScriptManager control will manage partial-page updates for UpdatePanel controls that are directly on the ASP.NET Web page or inside a user control on the page.

In a simple scenario, you can put user controls inside an update panel and they will be refreshed when the contents of the update panel are updated. You can also put an UpdatePanel control inside a user control so that the user control supports partial-page updates. However, in that case, page developers who add the user control to a page must explicitly add a ScriptManager control in the host Web page.

You might have multiple user controls on a Web page that you want to update independently. In that case, you can include one or more UpdatePanel controls inside the user control, and extend the user control to publicly expose the capabilities of the child UpdatePanel controls.

The example in this tutorial includes two user controls whose contents is inside UpdatePanel controls. Each user control exposes the UpdateMode property of the inner UpdatePanel control so that the property can be set explicitly for each user control. Each user control also exposes the Update method of the inner UpdatePanel control so that an external source can explicitly refresh the contents of the user control.

Creating an ASP.NET Web Page with Multiple User Controls

The example in this tutorial creates a master-detail page of employee information from the AdventureWorks sample database. One user control uses a GridView control to display a list of employee names and to support selecting, paging, and sorting. Another user control uses a DetailsView control to display details for a selected employee.

The employee-list user control stores the ID of the selected employee in view state. It makes sure that only the selected employee is highlighted in the GridView control, regardless of which page of data is displayed or of how the list has been sorted. The user control also makes sure that the employee-detail user control is displayed only when the selected employee is visible in the employee list.

In the example, the employee-detail user control contains an UpdatePanel control. The update panel is refreshed when an employee is selected. It is also refreshed when the user moves away from the GridView control page that displays the selected employee. If the user views a page of the GridView control that does not include the selected employee, the employee-detail user control is not displayed and the update panel is not updated.

Including an UpdatePanel Control in the User Control

The first step in creating the user controls that refresh independently is to include an UpdatePanel control in the user control, as shown in the following example.

Exposing the Capabilities of the UpdatePanel Control Publicly

The next step is to expose the UpdateMode property and the Update method of the inner UpdatePanel control. This enables you to set properties of the inner UpdatePanel control from outside the user control, as shown in the following example.

Public Property UpdateMode() As UpdatePanelUpdateMode
Get
Return Me.EmployeeInfoUpdatePanel.UpdateMode
End Get
Set(ByVal value As UpdatePanelUpdateMode)
Me.EmployeeInfoUpdatePanel.UpdateMode = value
End Set
End Property
Public Sub Update()
Me.EmployeeInfoUpdatePanel.Update()
End Sub

Adding the User Controls to the Web Page

You can now can add the user controls to an ASP.NET Web page and set the UpdateMode property of the inner UpdatePanel control declaratively. For this example, the UpdateMode property for both user controls is set to Conditional. This means that they are updated only when an update is explicitly requested, as shown in the following example.

Adding Code to Refresh the User Controls

To explicitly update the user control, you call the Update method of the inner UpdatePanel control. The following example includes a handler for the SelectedIndexChanged event of the employee-list user control, which is raised when the SelectedIndexChanged event of the inner GridView control is raised. The code in the handler explicitly updates the employee-details user control if an employee is selected, or if the current page in the employee list no longer shows the selected employee.