Web Development

Implement ASP.NET AJAX with the UpdatePanel control

The initial momentum of the AJAX revolution has yet to diminish, as developers continue to embrace the technology and develop more user-friendly applications. The availability of ASP.NET 2.0 AJAX Extensions 1.0 brings AJAX development to the ASP.NET developer using familiar programming techniques. The UpdatePanel control offers so many options to easily incorporate AJAX functionality -- most notably, partial-page updates -- with ease.

The ASP.NET 2.0 AJAX Extensions 1.0 add-on brings AJAX development to ASP.NET developers using existing ASP.NET style coding. This article is a continuation of my look at how to use the ASP.NET AJAX controls with more advanced scenarios. I begin with using multiple UpdatePanel controls on a single page.

Using multiple UpdatePanel controls

You can implement partial page loads (a common application of AJAX technologies) when you use the UpdatePanel and ScriptManager controls together. While you may only use one ScriptManager control per page (the control AJAX enables the entire page), you may use multiple UpdatePanel controls. This enables to you to define multiple areas of a page that may be updated independently from other UpdatePanel controls, as well as the entire page.

The following example uses three UpdatePanel controls on an ASP.NET page. Each UpdatePanel control contains Label and Button controls. The current date is displayed in the Label control when the button is selected. Displaying the date and time is accomplished via code placed in each button's click event. The listing includes the controls and code. When the code runs, you'll notice that each Label control is updated with the current data and time independent of the other controls on the page.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<script runat="server">

protected void Button1_Click(object sender, EventArgs e) {

Label1.Text = DateTime.Now.ToString();

}

protected void Button1_Click1(object sender, EventArgs e) {

Label2.Text = DateTime.Now.ToString();

}

protected void Button2_Click(object sender, EventArgs e) {

Label3.Text = DateTime.Now.ToString();

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>ASP.NET AJAX - Multiple UpdatePanel controls</title>

</head>

<body>

<form id="frmMultipleUpdates" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server" /><asp:UpdatePanel id="UpdatePanel1" runat="server">

<contenttemplate>

<asp:Label id="Label1" runat="server" Text="" /> <br />

<asp:Button id="btnUpdate" runat="server" Text="Click Here" OnClick="Button1_Click" />

</contenttemplate>

</asp:UpdatePanel>

<asp:UpdatePanel ID="UpdatePanel2" runat="server">

<ContentTemplate>

<asp:Label ID="Label2" runat="server" Text="" /><br />

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="Click Here" />

</ContentTemplate>

</asp:UpdatePanel>

</div>

<asp:UpdatePanel ID="UpdatePanel3" runat="server">

<ContentTemplate>

<asp:Label ID="Label3" runat="server" Text="" /><br />

<asp:Button ID="Button2" runat="server" Text="Click Here" OnClick="Button2_Click" />

</ContentTemplate>

</asp:UpdatePanel>

</form></body></html>

Another way to incorporate multiple UpdatePanel controls on a page is via nesting (i.e., placing one UpdatePanel within another).

Nesting UpdatePanel controls

Placing one UpdatePanel control within another UpdatePanel control sheds light on the UpdateMode property. The UpdatePanel control's UpdateMode property allows you to specify how it is updated.  The property supports two values: Conditional and Always. When nesting controls, the outer control's UpdateMode is set to Conditional so it is not updated when a nested control is updated.

The following example contains two UpdatePanel controls -- one nested within another. The outermost UpdatePanel control's UpdateMode is set to Conditional. Each UpdatePanel control contains Button and Label controls. The text of the Label control displays the current date and time when the Button control is selected. When running the code, you'll notice that the innermost control's Label control is updated without affecting what is displayed in the outermost control.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<script runat="server">

protected void Button1_Click(object sender, EventArgs e)  {

Label1.Text = DateTime.Now.ToString();

}

protected void Button1_Click2(object sender, EventArgs e) {

Label2.Text = DateTime.Now.ToString();

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>ASP.NET AJAX - Nested UpdatePanel Controls</title>

</head><body>

<form id="frmNestedUpdatePanelControls" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel id="UpdatePanel1" runat="server" UpdateMode="Conditional">

<contenttemplate>

<asp:Label id="Label1" runat="server" Text="" /><br />

<asp:Button id="bUpdate1" runat="server" Text="Click Here" OnClick="Button1_Click" />

<asp:UpdatePanel ID="UpdatePanel2" runat="server">

<ContentTemplate>

<asp:Label ID="Label2" runat="server" Text="Label" /><br />

<asp:Button ID="bUpdate2" runat="server" OnClick="Button1_Click2" Text="Click Here" />

</ContentTemplate></asp:UpdatePanel>

</contenttemplate></asp:UpdatePanel>

</div></form></body></html>
The complexity of the UpdateMode property

The UpdateMode property is more complex than using nested controls. The following guidelines from Microsoft describe how an UpdatePanel control is updated.

If the UpdateMode value is set to Always, the UpdatePanel is updated during every postback regardless of where they originate on a page. Also, an UpdatePanel control will always update when it is nested within another UpdatePanel control, and the parent control is updated. If the UpdateMode is set to Conditional, the UpdatePanel control is updated if one of the following conditions is met:

  • The Update method of the UpdatePanel control is explicitly called.
  • The postback is caused by a control that is defined as a trigger by using the Triggers property of the UpdatePanel control. In this scenario, the control explicitly triggers an update of the panel content. The control can be either inside or outside the UpdatePanel control that defines the trigger.
  • The ChildrenAsTriggers property is set to true, and a child control of the UpdatePanel control causes a postback. A child control of a nested UpdatePanel control does not cause an update to the outer UpdatePanel control unless it is explicitly defined as a trigger.

Up to this point, all example code has included the controls that trigger the update of a portion of a page within that area of the page (the UpdatePanel control). Note that partial-page loading may be triggered via controls outside the UpdatePanel control as well.

Using Triggers

The updating of an UpdatePanel control may be controlled via events from other controls outside the UpdatePanel control. This is controlled via UpdatePanel Triggers. A Trigger binds an UpdatePanel to another control's event. These Triggers may be asynchronous (AsyncPostBackTrigger) or synchronous postback (PostBackTrigger).

The following listing provides an example of tying an UpdatePanel control to an event of another control outside of the UpdatePanel. An asynchronous trigger is set up to be tied to the Click event of a Button control. The body of the UpdatePanel is updated -- it's reloaded via a postback -- when the user selects the button.

The body of the UpdatePanel contains code to display the current date and time. In addition, code to display the current date and time is placed outside of the UpdatePanel. This setup allows you to watch the UpdatePanel get updated when the rest of the page does not as well as the entire page being updated if you perform a page refresh.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<script runat="server">

protected void Button1_Click1(object sender, EventArgs e) {

Label3.Text = "TechRepublic.com rocks!";

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>ASP.NET AJAX - UpdatePanel Triggers</title>

</head>

<body>

<form id="frmUpdatePanelTriggers" runat="server">

<div>

Last updated: <%= DateTime.Now.ToString() %>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel id="UpdatePanel1" runat="server" UpdateMode="Conditional">

<ContentTemplate>

Last updated: <%= DateTime.Now.ToString() %><br />

<asp:Label ID="Label3" runat="server" Text="Label" />

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />

</Triggers>

</asp:UpdatePanel><br />

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="Button" />

</div></form></body></html>

Triggers can be control events or value change events. This allows you to set up triggers for almost any type of event. A good example is placing a data control such as a GridView inside its own UpdatePanel control and tying it to the SelectedIndexChanged event of a DropDownList control placed outside the UpdatePanel control. This allows the user to change the data based upon values in a list.

Conclusion

The initial momentum of the AJAX revolution has yet to diminish, as developers continue to embrace the technology and develop more user-friendly applications. The availability of ASP.NET 2.0 AJAX Extensions 1.0 brings AJAX development to the ASP.NET developer using familiar programming techniques. The UpdatePanel control offers so many options to easily incorporate AJAX functionality -- most notably, partial-page updates -- with ease.

Has the AJAX movement affected your development projects? Have you incorporated ASP.NET AJAX techniques in your applications? Share your experiences with the .NET community.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

---------------------------------------------------------------------------------------

Get weekly .NET tips in your inbox TechRepublic's free .NET newsletter, delivered each Wednesday, contains useful tips and coding examples on topics such as Web services, ASP.NET, ADO.NET, and Visual Studio .NET. Automatically subscribe today!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

4 comments
navot.peled
navot.peled

I would like to draw your attention to an AJAX paradigm shift. One should be aware that I am not, and do not pretend to be objective. Visual WebGui is an open source rapid application development framework for graphic user interfaces of IT web applications. It replaces the obsolete paradigms of ASP.NET which were designed for developing sites, with WinForms methodologies, which were designed for developing applications. Thus enabling designer that was designed for application.This provides the developer with an extremely efficient way to design interfaces using drag and drop instead of hand coding HTML. VWG doesn?t expose logic, data or open services on client requests and therefore is not as vulnerable as common AJAX solution. Worth a look ? www.visualwebgui.com

Justin James
Justin James

Tony - Thanks for the article on the UpdatePanel. I think that UP is a big enabler in the ASP.Net AJAX world, in terms of being able to do things that are a real pain without AJAX. We all know that I am not a super big AJAX fan, but UpdatePanel has its uses. J.Ja

eduardo
eduardo

I believe that the AJAX Control Toolkit makes ASP.NET 2 come alive. To be more professional nowadays, developers and architects must predict the using of the toolkit on their applications. I?ve seen some really professional intranet application nice using the controls that makes you think that winforms is passed away. Anyway.. what?s winforms nowadays? :)

Editor's Picks