Using UpdatePanel Inside Templated Controls


ASP.NET AJAX provides many ways to improve user experience and performance. One of the most common way is undoubtedly the UpdatePanel control. The UpdatePanel control provides partial page rendering capabilities to your web forms. Commonly developers place data bound controls such as GridView and DataList inside an UpdatePanel so that only that area of the web form is refreshed after a post back from within the UpdatePanel. However, there is still better way to use UpdatePanel with grids and lists. Don't agree? Read on to know more!

UpdatePanel and Data Bound Controls

Often developers use UpdatePanel control to host data bound controls such as GridView and DataList. They place the data bound controls inside the UpdatePanel so that any post back from the data bound control refreshes only the region marked by the UpdatePanel. Though this mechanism works as expected, it is not the most optimized technique. Have a look at the following figure.

The above figure shows a DataList control placed inside an UpdatePanel control. Any post back from the Save button is going to update the region marked as "Area being refreshed". However, in reality only the region marked as "Area being changed" needs some attention. That means for any change in one cell is going to refresh the whole UpdatePanel. Not an optimized way. Isn't it?

How can we avoid the complete UpdatePanel from refreshing? By putting an UpdatePanel inside cells of DataList control. This way only that cell region will be posted back to the server and not the complete DataList.


Let's quickly build an example to illustrate what we just discussed.

Create a new web site using Visual Studio. Drag and drop an SQL data source control on the default web form and configure it to select CustomerID, CompanyName, ContactName and Country columns of Customers table of Northwind database.

Now drag and drop a DataList control on the form and set its DataSourceID property to SqlDataSource1.

Design the ItemTemplate of the DataList as shown below:

The template consists of an UpdatePanel and an UpdateProgress controls.

Arrange a Label control for displaying CustomerID and three TextBox controls for displaying CompanyName, ContactName and Country respectively. Also, add a Button control and set its Text property to Save. Clicking on this button will save the changes made to the data in the database.

The UpdateProgress control contains a Label for displaying progress message during update operation. Also, set its AssociatedUpdatePanelID property to the ID of the UpdatePanel control we added earlier.

Configure the data bindings of the label and textboxes mentioned above using data bindings editor.

Now write the ItemCommand event handler for the DataList as shown below:

protected void DataList1_ItemCommand(object source, 
DataListCommandEventArgs e)
string custid, company, contact, country;
custid = ((Label)e.Item.FindControl("Label5")).Text;
company = ((TextBox)e.Item.FindControl
contact = ((TextBox)e.Item.FindControl
country = ((TextBox)e.Item.FindControl
DefaultValue = custid;
DefaultValue = company;
DefaultValue = contact;
DefaultValue = country;
//remove the following line during production use

The ItemCommand event handler simply obtains the new values entered by the user, fills the UpdateParameters collection of the SDS accordingly and calls Update() method of the SDS. Just for the sake of testing it also introduces a delay of 1 second so that you can see the progress message clearly.

Run the web form test how it updates region of only one cell. The following figure shows a sample run of the web form. Notice how the progress message is being displayed only for the cell being refreshed.

That's it! Now only the region of the cell being changed will refresh and not the whole DataList.

Final Comments

Note that there is still another technique to accomplish the same thing. You can call a web service method (or PageMethod) when user clicks on the Save button. This is possible in the above example because there is no change in the UI after saving the data. In cases where the UI changes after saving operation the web service technique is slightly cumbersome. Of course in anyway you will need to code few JavaScript functions if you wish to go by web service technique.

Bipin Joshi is an independent software consultant and trainer by profession specializing in Microsoft web development technologies. Having embraced the Yoga way of life he is also a yoga mentor, meditation teacher, and spiritual guide to his students. He is a prolific author and writes regularly about software development and yoga on his websites. He is programming, meditating, writing, and teaching for over 27 years. To know more about his private online courses on ASP.NET and meditation go here and here.

Posted On : 22 July 2007

Tags : ASP.NET AJAX Web Forms Server Controls Data Controls