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

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

 

 

Print | posted on Wednesday, May 16, 2007 8:05 AM

Comments on this post

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
nice one...simple as well..helps beginners of ajax a lot...thanks
Left by asim on Feb 05, 2008 11:03 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Good one.

Easy to understand
Left by shobhit madhuni on Apr 01, 2008 12:12 AM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
nice article :)
Thanks a lot.
Left by con cac on Apr 02, 2008 3:28 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Its nice and easy to understand but would have been better if u had also used triggers for each update panels. That would confuse the readers about why the triggers are missing here??
Left by Asim Suvedi on Apr 26, 2008 10:41 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
good article
Left by dmitry on Jun 13, 2008 10:57 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
nice artical. Can you tell me why update panel is not working in master pages ?
Left by hash on Jun 18, 2008 1:54 AM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Great
Thanks
Left by Barbaros on Oct 10, 2008 5:56 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
we need a lot more of these type of articles on the web! thanks so much.
Left by Andy on Oct 23, 2008 8:13 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
great post. simple example but very efficient
Left by Anubhav Goyal on Dec 16, 2008 11:09 AM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Nice one - thank you!
Left by A. Soong on Jan 07, 2009 5:40 AM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
This articles was very useful for beginners of ajax. thanks lot.
Left by jeyaraj on Jan 22, 2009 9:31 AM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
gr8 job dude
Left by bunty on Feb 26, 2009 12:53 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
mind blowing mogyambo khush hua
Left by bunty on Feb 26, 2009 12:54 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Nice Post. Its very useful to me.
Left by Vinoth Kannan S on Apr 03, 2009 2:28 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Its very nice article
Left by Selvi on Jun 02, 2009 8:36 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
This is a very good article but I do have one problem that it didn't address, although you may be able to. This is showing updates using two buttons, but is there a way to only update the parent updatepanel if a form is fully filled out, else it only updates the child updatepanels? I can't find any articles that will address this so it may not be possible but I pray it is!
Left by Jason Chmiel on Jun 18, 2009 11:11 AM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Very good article
Left by subodh on Jun 20, 2009 5:17 AM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
This is good article but i have one problem if parent have a validator control and try to update child panel and click button inside child panel then first off all parent validator called. but I don't want this.
Left by Trendra on Jun 30, 2009 3:20 AM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Superb article! I managed to try it out and published my site at my current host (ASPHostCentral.com) and it is just working perfectly fine.

I do, however, expect a slightly more complicated article. I am now tring the latest ASP.NET MVC and I am still learning. My current host supports this framework so it is truly a great chance for me to learn ASP.NET MVC as well.

All the best!
Left by Scott on Jul 23, 2009 9:19 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Yo man,, Nice Work,, Keep Going,,
Left by Preetham on Jul 31, 2009 2:35 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
nice article...
Left by nani on Aug 19, 2009 12:24 AM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Nice Article. It helped me sove my issues.

Thank you
Left by Arun on Dec 01, 2009 8:46 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Nice one. Very helpful, I was going a tad bonkers, but this was real easy to follow & well explained. Thanks!
Left by T on Jan 12, 2010 2:52 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Very god....Thanks
Left by Sanja on Mar 18, 2010 6:27 AM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
its very easy and very good
Left by Prasad k.m on Apr 20, 2010 5:16 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Eh, good post, but i m facing a problem in using more than one panel.i have 3 panels,each having textbox and a button.when i run the page only first panel should be visible,on clicking d button 2nd panel become visible and other 2 are invisible and so on.the problem is when i press the button textbox appear in the same position of 1st panel but button appears in the middle of the page.how can i change position of the button at run time? sorry but i am new in dealing with ASP.net
Left by wholesale oil paintings on May 03, 2010 8:10 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
So usefull, I was becaming cracy! The updatePanel nested was going to update continually the parent UpdatePanel... Now every thing works fine.

Thanks
Left by OaicStef on May 28, 2010 12:03 AM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Good one. Thanks a lot.
Left by Raju on Jun 16, 2010 12:47 AM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
v v helpful for me in learning and interview point.

thanx
Shafeeque
Left by Shafeeque Ahmad on Jun 18, 2010 12:05 AM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Good One... :)
Nice Article..

it help me alots to understand nested panel things.

Thanks n cheers
Left by Khyati on Jul 07, 2010 10:29 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
This is good for beginners in AJAX.
Thanks for this codes
Left by ALABI Bamidele on Sep 20, 2010 3:52 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Question... Example works, BUT what if you have another update panel on the page?
EX
Begin Parent Update Panel
Child Panel
End Parent Update Panel

Begin Parent2 Update Panel
Chile Panel2
End Parent2 Update Panel

if i don't set them ALL to Conditional, they all update, when really i just want the parent and child of update panel 1 OR 2 to be refreshed
Left by cc on Sep 20, 2010 11:01 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
gud article..and good example..thanks a lot....
Left by sree on Oct 13, 2010 7:13 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Harish, it is a nice article for beginners.
Left by Gokul on Nov 19, 2010 6:27 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
I am beginner of asp.net, so I want to learn Ajax update panel. How to use and run it,
Please let me know with example.

Advance thanks

Kanagarajan S
Left by kanagarajan on Jan 03, 2011 7:29 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
very good article, use simple language with good example
Left by Muhammad Kazim on Feb 23, 2011 5:43 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
supb post. i like it ..
Left by vinod on Apr 25, 2011 10:38 AM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Dude U really solved my issue tx a lot . . . I have been f***** with it from 3 days . . .
Left by Vamsi Krishna on Apr 25, 2011 6:41 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
very good article.Thanks!!!
Left by Shilpa on Oct 12, 2011 1:20 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Useful reference !
Left by Aymeric on Feb 06, 2012 9:48 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Completely brilliant example. Thanks.
Left by Graham on Mar 23, 2012 5:45 AM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Nice article.

Yet I use Modal Popups in my nested update panel and I just cant refresh the panel correctly when closing the popup. Maybe I should rethink the way my form works.

Left by DoumB on May 25, 2012 9:06 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
Very nice, great .
Left by Myat Thu on Dec 06, 2012 12:45 PM

# re: ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel

Requesting Gravatar...
I have a problem whit one event in updatepanel child. i have a DropDownList and it's no fire! Can you help me?
Left by Byron V. on May 29, 2013 4:11 AM

Your comment:

 (will show your gravatar)