Friday, November 13, 2009

ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

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;The HTML for the Nested Update Panel is as below:-

<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 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.

No comments: