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.
