January 2018 : Instructor-led Online Course in ASP.NET Core 2.0. Conducted by Bipin Joshi. Read more...
Registration for January 2018 batch of ASP.NET Core 2.0 instructor-led online course has already started. Conducted by Bipin Joshi. 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:

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
("TextBox1")).Text;
contact = ((TextBox)e.Item.FindControl
("TextBox2")).Text;
country = ((TextBox)e.Item.FindControl
("TextBox3")).Text;
SqlDataSource2.UpdateParameters["CustomerID"].
DefaultValue = custid;
SqlDataSource2.UpdateParameters["CompanyName"].
DefaultValue = company;
SqlDataSource2.UpdateParameters["ContactName"].
DefaultValue = contact;
SqlDataSource2.UpdateParameters["Country"].
DefaultValue = country;
SqlDataSource2.Update();
//remove the following line during production use
System.Threading.Thread.Sleep(1000);
}

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, an author and a yoga mentor having 22+ years of experience in software development. He also conducts online courses in ASP.NET MVC / 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.

Get connected : Twitter  Facebook  Google+  LinkedIn

Posted On : 22 July 2007


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