Wednesday, May 16, 2007 7:50 AM
We saw about Update Panel and how it works in its simplest form. Let us explore more complex scenarios where we have multiple Update Panels, Nested Update Panels, etc.,
One of the main properties of an UpdatePanel is its UpdateMode property. The UpdateMode property is by default set to "Always".
However, when you have more than a single update panel or when you want to control as to when the Update Panel needs to get refresh, then setting the UpdateMode property to "Condition" is the first step.
Let us consider a scenario where we have 4 Update Panels in a page. For simplicity I am sticking to the Label - Display Current Date functionality. The HTML for the same is as below:-
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<table width="100%">
<tr>
<td style="height: 64px">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<b><u>Section 1</u></b>
<br />
<br />
<asp:Label ID="Label1" runat="server"></asp:Label>
<br />
<br />
<asp:Button ID="Button1" runat="Server" Text="Refresh" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td style="height: 64px">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<b><u>Section 2</u></b>
<br />
<br />
<asp:Label ID="Label2" runat="server"></asp:Label>
<br />
<br />
<asp:Button ID="Button2" runat="Server" Text="Refresh" OnClick="Button2_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td style="height: 64px">
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<b><u>Section 3</u></b>
<br />
<br />
<asp:Label ID="Label3" runat="server"></asp:Label>
<br />
<br />
<asp:Button ID="Button3" runat="Server" Text="Refresh" OnClick="Button3_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td style="height: 64px">
<asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<b><u>Section 4</u></b>
<br />
<br />
<asp:Label ID="Label4" runat="server"></asp:Label>
<br />
<br />
<asp:Button ID="Button4" runat="Server" Text="Refresh" OnClick="Button4_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</div>
</form>
Note that for all the UpdatePanels, I have set the UpdateMode to conditional. The application logic or codebehind for the above is as follows:-
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = System.DateTime.Now.ToString();
Label2.Text = System.DateTime.Now.ToString();
Label3.Text = System.DateTime.Now.ToString();
Label4.Text = System.DateTime.Now.ToString();
}
protected void Button1_Click(object sender, EventArgs e)
{
}
protected void Button2_Click(object sender, EventArgs e)
{
}
protected void Button3_Click(object sender, EventArgs e)
{
}
protected void Button4_Click(object sender, EventArgs e)
{
}
When you run this page, you will notice that there are four Sections - Section 1, 2,3 & 4. When you click on the Refresh button, the date time value gets refreshed only for the particular section. The other values doesnt get changed.
If you remove the UpdateMode=Conditional from the above UpdatePanel declarations, you will notice that all the labels get refreshed.
Hence, setting the UpdateMode as Conditional is important if you like to control the way the UpdatePanels get refreshed.
Next, we will explore the Nested UpdatePanel example.
Cheers !!!