Registration open for April 2018 batches of ASP.NET MVC and Design Patterns instructor-led online courses. Conducted by Bipin Joshi on weekends. Register today ! Click here for more details.

Using UpdatePanel Inside Templated Controls

Introduction

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.

Example

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:

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 a software consultant, trainer, author and yoga mentor having 22+ years of experience in software development. He also conducts online courses on ASP.NET MVC, ASP.NET Core and Design Patterns. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Ajapa Yoga to interested individuals. To know more about him click here.