2.4. Using Multiple UpdatePanel Controls
So far, this chapter has showed you how to work with a single UpdatePanel control, but it is important to realize that you can have multiple UpdatePanel controls on a single page. This, in the end, will give you the ability to control the output to specific regions of the page when you want.
An example of using more than a single UpdatePanel control is presented in Listing 2-22.
Example 2-22. Using more than one UpdatePanel control
<%@ Page Language="C#" %>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Label1 was populated on " + DateTime.Now;
Label2.Text = "Label2 was populated on " + DateTime.Now;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Multiple UpdatePanel Controls</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Label ID="Label2" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<asp:Button ID="Button1" runat="server"
Text="Click to initiate async request"
OnClick="Button1_Click" />
</div>
</form>
</body>
</html> |
This is an interesting page. There are two UpdatePanel controls on the page: UpdatePanel1 and UpdatePanel2. Each of these areas contain a single Label control that can take a date/time value from a server response.
The UpdatePanel1 control has an associated trigger: the Button control on the page. When this button is clicked, the Button1_Click() event triggers and does its job. If you run this page, both of the UpdatePanel controls are updated according to the Button1_Click() event. This is illustrated in Figure 2-15.
Figure 2-15. Figure 2-15
Both UpdatePanel sections were updated with the button click event because, by default, all UpdatePanel controls on a single page update with each asynchronous postback that occurs. This means that the postback that occurred with the Button1 button control also causes a postback to occur with the UpdatePanel2 control.
You can actually control this behavior through the UpdatePanel's UpdateMode property. The UpdateMode property can take two possible enumerations — Always and Conditional. If you do not set this property, it uses the value of Always, meaning that each UpdatePanel control always updates with each asynchronous request.
The other option is to set the property to Conditional. This means that the UpdatePanel updates only if one of the trigger conditions is met. For an example of this, change the UpdatePanel controls on the page so that they are now using an UpdateMode of Conditional, as shown in Listing 2-23.
Example 2-23. Using more than one UpdatePanel control
<%@ Page Language="C#" %>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Label1 was populated on " + DateTime.Now;
Label2.Text = "Label2 was populated on " + DateTime.Now;
}</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Multiple UpdatePanel Controls</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label1" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label2" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<asp:Button ID="Button1" runat="server"
Text="Click to initiate async request"
OnClick="Button1_Click" />
</div>
</form>
</body>
</html> |
Now that both of the UpdatePanel controls are set to have an UpdateMode of Conditional, when running this page, you will see the results presented in Figure 2-16.
Figure 2-16. Figure 2-16
In this case, only the right Label control, Label1, was updated with the asynchronous request even though the Button1_Click() event tries to change the values of both Label1 and Label2. The reason for this is that the UpdatePanel2 control had no trigger that was met.