Wahlin on .NET

Implement UpdatePanel Properties

Control how partial-page updates are performed by defining the UpdatePanel control's ChildrenAsTriggers and UpdateMode properties.

• By Dan Wahlin
• 06/19/2007

In my last column, I discussed the fundamentals of using the ASP.NET AJAX UpdatePanel control to easily add AJAX functionality to a Web page. If you're simply adding AJAX functionality, then wrapping content in an UpdatePanel's ContentTemplate is as far as you'll need to go with this control. However, those of you that use multiple UpdatePanel controls in a Web page must understand two key properties, named UpdateMode and ChildrenAsTriggers, to maximize your applications' efficiency. This article introduces these properties and explains their importance.

The Effect of Partial-Page Updates
Asynchronous postback requests triggered by an UpdatePanel cause other UpdatePanels to update by default. These additional updates may cause undesirable results and lead to more data than is necessary being sent in request and response messages. The code shown in Listing 1 demonstrates this concept. Render blocks (which I avoid in real-world applications) are used to write out the current date within each UpdatePanel.

When a user clicks a button in the first UpdatePanel, the second UpdatePanel is also updated. Listing 2 shows a portion of the data that is returned from the partial-page update request. Notice that the contents for both UpdatePanels are returned even though only one of the controls triggered a partial-page update.

While this may be a desired behavior in some situations, you may also encounter situations where only the UpdatePanel that triggered the partial-page update should refresh itself with new data. You can accomplish this by setting the UpdateMode property of each UpdatePanel on the page to a value of Conditional. (The UpdateMode defaults to a value of Always.)

Setting an UpdatePanel control's UpdateMode property to Conditional means that only a child control of the UpdatePanel, a registered trigger or a call to the control's Update() method will cause the control to update. Partial-page updates triggered by other UpdatePanel controls will not update any UpdatePanels that have their UpdateMode set to Conditional.

Prevent Triggering of Updates
The UpdatePanel control exposes the ChildrenAsTriggers property, which you can use to minimize the amount of data that is passed to the server during a partial-page update. By default, child controls such as buttons or link buttons (or other controls that cause a standard postback operation) cause the parent UpdatePanel control in which they're defined to update with new content.

This behavior isn't desirable all the time. For example, if you have an UpdatePanel that shows a list of LinkButton controls displaying the name of territories, you may not want to reload the territories each time a user clicks on one of the LinkButton controls. However, another UpdatePanel in the page that displays all employees in a given territory may need to be updated with each user click.

To prevent the child LinkButton controls from updating the UpdatePanel in which they're defined but still trigger a partial-page update, set the ChildrenAsTriggers property to False and the UpdateMode property to Conditional. Setting ChildrenAsTriggers to False will automatically prevent the link buttons from updating the UpdatePanel control, but it will cause other UpdatePanel controls in the page that have their UpdateMode set to Always (the default value) to update.

Listing 3 shows how you can define the ChildrenAsTriggers and UpdateMode properties to control how partial-page updates are performed. When users click the LinkButton controls, a partial-page update occurs and an UpdatePanel's content is updated (for example, upEmployees in Listing 3). However, the UpdatePanel with defined LinkButton controls is not updated.

By appropriately using the UpdateMode and ChildrenAsTriggers properties, you can monitor updates to specific UpdatePanel controls and minimize the size of messages passed to and from the server.