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. |
|
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();
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. |
| Download Source code |
