If you have been following my articles, you would have realised how easy it is to implement partial page refreshing in ASP.NET AJAX where we explored a single UpdatePanel and multiple Update Panel examples.
Let us now consider a more complex scenario where we want to nest Update Panels.
Page
UpdatePanel 1 (Parent)
UpdatePanel 2 (Child)
The thumb rule with nested update panels is as follows:-
Parent Update Panel refreshes all the contents including Child Update Panel's contents even if the Child Update Panel's update mode is set to Conditional
Child Update Panel refreshes only its contents and doesnt refresh that of the Parent Update Panel unless, the update mode for the parent update panel is not set to Conditional
Kind of confusing eh? Let us see it in action. Copy paste the following HTML and the subsequent source code to see it in action.
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<table width="80%" border="3">
<tr>
<td>
Label outside all the Update Panels
<asp:Label ID="Label3" runat="Server" Font-Bold="true"></asp:Label>
<br />
<br />
<asp:Button ID="Button3" runat="Server" Text="Refresh" />
<br />
<br />
</td>
</tr>
<tr>
<td>
<table width="65%" border="2">
<tr>
<td>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
Label within the Parent Update Panel
<asp:Label ID="Label1" runat="server" Font-Bold="true"></asp:Label>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Refresh" />
<table width="40%" border="1">
<tr>
<td>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<br />
<br />
Label within the Child Update Panel
<asp:Label ID="Label2" runat="server" Font-Bold="True"></asp:Label>
<br />
<br />
<asp:Button ID="Button2" runat="server" Text="Refresh" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
Code behind
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();
}
When you run the above page, you will notice that I have put nice looking (??) tables to clearly indicate the label outside the Update Panels, the parent update panel contents and the child update panel contents.
When you click on the top most button, it refreshes the whole page and subsequently, all the labels get refreshed with the new date time.
However, when you click on the second refresh button which is marked inside the Parent Update Panel you will notice that the top most label doesnt get refreshed but both the Label 2 and Label 3 gets refreshed, although I have marked UpdateMode as conditional for the Child UpdatePanel. The reason being, the parent updates all the child update panels nested within.
Finally, when you click on the last Refresh button which is marked inside the Child Update Panel, you will notice that only the respective label gets refreshed.
Note that, if I remove the property UpdateMode=Conditional for the UpdatePanel1 (parent), both the labels will get refreshed.
Enough of Update Panels eh?
Cheers !!!
posted @ Wednesday, May 16, 2007 8:05 AM