Introduction
The UpdatePanel
control is one of the most important controls in the ASP.NET AJAX package. It enables you to create web pages with complex client behavior and a high level of interactivity and responsiveness.The UpdatePanel
control can be used to perform partial updates of a web page. This means that the UpdatePanel
control refreshes only a selected part of the web page instead of the entire web page. A page which contains a ScriptManager
control and one or more UpdatePanel
controls can automatically perform partial updates without having to write custom client script.
In this article, I have demonstrated the use of the UpdatePanel
control with the help of a simple ASP.NET AJAX application which performs arithmetic calculations.
Background
ASP.NET AJAX is a technology that helps in developing ASP.NET applications that run with the speed of desktop applications. Following are some of the advantages of ASP.NET AJAX:
- Better Efficiency - Since a major part of a web page is processed on the browser, the applications run faster.
- UI Elements - We have access to various UI elements like progress indicators, tooltips, etc.
- Partial Updates - Only the modified part of a web page is refreshed instead of the entire page.
- Wide Browser Support - Since many browsers are supported, it helps in developing browser-independent applications.
Using the Code
ScriptManager and UpdatePanel controls
To create an ASP.NET AJAX application, we add a ScriptManager
control in the Default.aspx file. Following is the markup code after adding the ScriptManager
control:
The ScriptManager
control is used to add AJAX support to our application and is required on any page where AJAX functionality is required.
After the ScriptManager
control, we add an UpdatePanel
control as follows:
The UpdatePanel
control contains code for controls which must be partially updated. The code for the controls is written within the ContentTemplate
child element of the UpdatePanel
. The UpdatePanel
control allows its content to be refreshed without causing a PostBack
to the server.
All other markup code and code in the code behind files is the same as for any other ASP.NET application. Following is the code required for doing the calculations in the code behind file:
protected void btnAdd_Click(object sender, EventArgs e)
{
try
{
int n1 = Convert.ToInt32(txtN1.Text);
int n2 = Convert.ToInt32(txtN2.Text);
int n3 = n1 + n2;
lblResult.Text = "Addition is " + (n1 + n2);
}
catch (Exception ex)
{
lblResult.Text = ex.Message;
}
}
protected void btnSubtract_Click(object sender, EventArgs e)
{
try
{
int n1 = Convert.ToInt32(txtN1.Text);
int n2 = Convert.ToInt32(txtN2.Text);
int n3 = n1 - n2;
lblResult.Text = "Subtraction is " + (n1 - n2);
}
catch (Exception ex)
{
lblResult.Text = ex.Message;
}
}
protected void btnMultiply_Click(object sender, EventArgs e)
{
try
{
int n1 = Convert.ToInt32(txtN1.Text);
int n2 = Convert.ToInt32(txtN2.Text);
int n3 = n1 + n2;
lblResult.Text = "Multiplication is " + (n1 * n2);
}
catch (Exception ex)
{
lblResult.Text = ex.Message;
}
}
protected void btnDivide_Click(object sender, EventArgs e)
{
try
{
int n1 = Convert.ToInt32(txtN1.Text);
int n2 = Convert.ToInt32(txtN2.Text);
int n3 = n1 + n2;
lblResult.Text = "Division is " + (n1 / n2);
}
catch (Exception ex)
{
lblResult.Text = ex.Message;
}
}
Preserving State Information
When the application is executed now, it runs without causing a postback to the server. But by default, AJAX does not preserve state in the browser. As a result, you cannot use the Back and Forward buttons to move between states. To preserve state and allow users to navigate between different states, the history feature can be enabled. To enable the history feature, three more attributes are added to the ScriptManager
control as follows:
- The
EnableHistory
attribute is used to turn the history feature on or off. - The
OnNavigate
attribute specifies the event method for the Navigate
event of the ScriptManager
. - The
EnableSecureHistoryState
attribute can be used to enable or disable secure URL. If this attribute is true
, it displays a cryptic URL on the address bar. To view simple URL, this attribute must be turned off.
For the history state to work, the following changes are required in the code behind functions:
protected void btnAdd_Click(object sender, EventArgs e)
{
try
{
int n1 = Convert.ToInt32(txtN1.Text);
int n2 = Convert.ToInt32(txtN2.Text);
int n3 = n1 + n2;
lblResult.Text = "Addition is " + (n1 + n2);
ScriptManager1.AddHistoryPoint("t1", txtN1.Text);
ScriptManager1.AddHistoryPoint("t2", txtN2.Text);
ScriptManager1.AddHistoryPoint("t3", lblResult.Text);
}
catch (Exception ex)
{
lblResult.Text = ex.Message;
}
}
The following navigation function is required to restore the history state when the Back or Forward buttons are clicked:
protected void Nav(object sender, HistoryEventArgs e)
{
string t1 = e.State["t1"];
string t2 = e.State["t2"];
string t3 = e.State["t3"];
txtN1.Text = t1;
txtN2.Text = t2;
lblResult.Text = t3;
}
When the application is run now, the Back and Forward buttons can be used to view the different states.
UpdateProgress Control
The UpdateProgress
control is used to show a Progress
message if a function takes a long time to run. The UpdateProgress
control is added to the markup code after the ScriptManager
control as follows:
The UpdateProgress
control may not be displayed if a function is fast. So you can simulate a slow running function by adding the following statement to your function:
System.Threading.Thread.sleep()
The modified function may look as follows:
protected void btnAdd_Click(object sender, EventArgs e)
{
try
{
int n1 = Convert.ToInt32(txtN1.Text);
int n2 = Convert.ToInt32(txtN2.Text);
int n3 = n1 + n2;
lblResult.Text = "Addition is " + (n1 + n2);
ScriptManager1.AddHistoryPoint("t1", txtN1.Text);
ScriptManager1.AddHistoryPoint("t2", txtN2.Text);
ScriptManager1.AddHistoryPoint("t3", lblResult.Text);
System.Threading.Thread.Sleep(1000);
}
catch (Exception ex)
{
lblResult.Text = ex.Message;
}
}
The sleep()
function is added only to demonstrate the use of the UpdateProgress
control. It should not be generally added.
Points of Interest
I have created the above application using Visual Web Developer 2010 Express Edition. ASP.NET AJAX functionality is built-in to Visual Studio 2008 and Visual Studio 2010. I hope that this article will help people to understand the basic concepts of ASP.NET AJAX quickly and start developing faster web applications.
History
- 11th November, 2011: Initial post