The ASP.NET 2.0 AJAX Extensions 1.0 add-on brings AJAX development to ASP.NET developers using existing ASP.NET style coding. In this article we look at 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.
This was published in 
1
Faheem - 23/02/08
nice attempt
» Report offensive content
2
Soj - 28/02/08
Very useful article, thanks.
I have a different issue regarding update panel. In my page a gridview control is placed out side the update panel due to some other reasons. ok my problem is that i couldn't bind this grid from a dropdown list selected index changed event. drop down list placed inside the update panel. (ASP.net 2.0)
please send me a solution for this.
Thanks & Regards.
» Report offensive content
3
Neil - 03/04/08
a Nice article to Understand a basic functionality of Update Panel in .Net
» Report offensive content
4
Raghu - 06/06/08
Gr8 article...helped a lot...thanx
» Report offensive content
5
Pawan ashish - 06/06/08
i have a two dropdown list. one i have put in update panel and other out side the updatepanel .i am triggering the dopdown list inside panel from other dropdown list. Everything is working fine but the selected item of the 2nd dropdown by default shows the ist item of the dropdown list. in UI it shows as selected item but the value is not selected
» Report offensive content
6
luci - 24/06/08
I need simple code for ajax.
Is there any prerequisites for running the code of ajax
I need simple code for ajax.
Thanking You,
Best & regards,
Luci
» Report offensive content