ASP.NET 2.0 AJAX Extensions Update Panel - Multiple Update Panels

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

Print | posted on Wednesday, May 16, 2007 7:50 AM

Comments on this post

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

Requesting Gravatar...
Thanks a lot,

For giving a good things about Update Panel

Thanks,
Manoaranjan
Left by gggggggggggggg on Dec 22, 2007 12:49 AM

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

Requesting Gravatar...
if u are using an update progress for each update panel and don't want them all triggered on postback, us the AssociatedUpdatePanelID for the update progress

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
Loading... </ProgressTemplate>

</asp:UpdateProgress>
Left by VA Internet on Jan 15, 2008 10:27 PM

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

Requesting Gravatar...
Hi author,
thanks for nice article.
But Now I have one problem.When I run my application(code),the event for button is not generated.same for link button also.--javascript error comes on status bar.
What is the solution?
Please help the needful.
Left by mahesh on Feb 05, 2008 1:00 AM

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

Requesting Gravatar...
Thanks a lot buddy!
This was a very valuable Information...
Left by Subodh on Feb 16, 2008 5:29 PM

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

Requesting Gravatar...
I have a page with multiple update panels and each ones updatemode is set to conditional and update method for each panel is called explicitly. But the panel doesnt seem to update itself after every postbacks.
What else should I do??
Left by Amulu on Mar 20, 2008 3:10 AM

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

Requesting Gravatar...
found ur article helpful.i hv a problem in my proj
on the click of 1 image button other image buttons and panel must not be refreshed.hw can i do this.all this is in the same page.can u help me??
Left by shweta on Apr 01, 2008 5:52 PM

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

Requesting Gravatar...
Thanks a lot buddy!! Good info about update panel
Left by Abdul Aziz on Jul 10, 2008 1:09 AM

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

Requesting Gravatar...
Thanks for sharing pal.
really nice one..
Left by srilatha on Jul 20, 2008 11:31 PM

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

Requesting Gravatar...
Thanks for the info nicley done...
Left by jhon on Sep 12, 2008 7:55 AM

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

Requesting Gravatar...
I have a user control that I am dynamically adding to a form. When I add more than one instance of it I have the following issue: Upon clicking the button within the first instance of the control, the second instance get's the update. The update panel does have conditional update specified and the button is within the update panel. The Page_Load event in the code beind makes no distinction between instances of the control. In fact all it does is re-add the control to the form. The content of the panel is only populated if the event is not a post-back. I'm relatively new to the ASP.NET AJAX arena and I'm obviously not taking something into account.
Any feedback would be greatly appreciated.
Jerry
Left by Jerry Bailey on Nov 16, 2008 10:04 PM

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

Requesting Gravatar...
above comment is not look like professional.
What'll You do guys?
Left by M.Lari on Mar 28, 2009 4:34 PM

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

Requesting Gravatar...
Hey I added an update panel animation extender to your code above and now if i click any other refresh button that is in any other update panel , then the update panel with the update panel animation extender also gets refreshed


this is what i added

<cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender4" runat="server" BehaviorID="UpdatePanelAnimationExtender4"
TargetControlID="UpdatePanel4">
<Animations>
<OnUpdating>
<FadeOut Duration=".5" Fps="20" />
</OnUpdating> <OnUpdated>
<FadeIn Duration=".5" Fps="20" /> </OnUpdated> </Animations> </cc1:UpdatePanelAnimationExtender>
Left by Vijay Dixon on Apr 22, 2009 5:30 PM

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

Requesting Gravatar...
Hey I added an update panel animation extender to your code above and now if i click any other refresh button that is in any other update panel , then the update panel with the update panel animation extender also gets refreshed


this is what i added

<cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender4" runat="server" BehaviorID="UpdatePanelAnimationExtender4" TargetControlID="UpdatePanel4">
<Animations>
<OnUpdating>
<FadeOut Duration=".5" Fps="20" />
</OnUpdating> <OnUpdated>
<FadeIn Duration=".5" Fps="20" /> </OnUpdated> </Animations> </cc1:UpdatePanelAnimationExtender>
Left by Vijay Dixon on Apr 22, 2009 5:31 PM

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

Requesting Gravatar...
Hey I added an update panel animation extender to your code above and now if i click any other refresh button that is in any other update panel , then the update panel with the update panel animation extender also gets refreshed


this is what i added

<cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender4" runat="server" BehaviorID="UpdatePanelAnimationExtender4" TargetControlID="UpdatePanel4">
<Animations>
<OnUpdating>
<FadeOut Duration=".5" Fps="20" />
</OnUpdating> <OnUpdated>
<FadeIn Duration=".5" Fps="20" /> </OnUpdated> </Animations> </cc1:UpdatePanelAnimationExtender>
Left by Vijay Dixon on Apr 22, 2009 5:31 PM

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

Requesting Gravatar...
Hi my problem is- I have two dropdowns with some other controls in a update panel. I want to when I select item from one dropdown(like country name) then second dropdown(city names) should be filled according to selected country. but within update panel it is not happening .
please help........

Thanks in advance
Prakash Gupta
Left by prakash on Apr 27, 2009 8:05 PM

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

Requesting Gravatar...
Humm... interesting,

thanks for nice article.
But Now I have one problem.When I run my application(code),the event for button is not generated.same for link button also.--javascript error comes on status bar.
What is the solution?

Keep up the good work
Left by web development company on Aug 21, 2009 10:41 AM

# ASP.NET 2.0 AJAX Extensions Update Panel - Multiple Update Panels

Requesting Gravatar...
i have a problem using update panel
i am using multiple update panel
one update panel update its contents with respect to time and another on button click event
problem is that from both the ways i have to go to the final result
but when time goes zero the content of one update panel gets invisible but the content of another update panel does not ?
please any help me to sort out this problem?

thanks
Left by Hasmukh on Nov 15, 2009 7:54 PM

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

Requesting Gravatar...
Great... It saved my day....
Left by ajeeshco on Nov 19, 2009 11:06 AM

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

Requesting Gravatar...
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 roza on Feb 23, 2010 4:11 AM

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

Requesting Gravatar...
very nice article about Multiple Updated pannel. I appreciate it .

thanks
Shafeeque
Left by Shafeeque Ahmad on Jun 17, 2010 11:44 PM

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

Requesting Gravatar...
i need to update a panel when other panel updates

Plz help me in this,thanks
Left by Mukarram on Nov 08, 2010 7:20 PM

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

Requesting Gravatar...
nice yar it works very well..........
thnx....
Left by Chirag on Dec 28, 2010 1:24 PM

Your comment:

 (will show your gravatar)