CODEWITHSUNDEEP
asp.net
sparebytes
sparebytes

Reputation: 13096

Using multiple UpdatePanels on a single page without interfering with each other

It seems that when multiple UpdatePanels are on a single page, anytime an asyncPostBack occurs on one, all others will have their html reloaded. Is there a way around this?

Example

Example.aspx

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
    <ContentTemplate>
        <div style="border: 1px solid black;">
            <asp:TextBox runat="server" ID="txtTEST1" />
            <asp:Label runat="server" ID="lblTEST1" />
            <asp:Button runat="server" ID="btnTEST1" Text="AsyncPostBack1" />
            <div onclick="this.innerHTML='Wooo!'">Click Me - UpdatePanel1</div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

<div onclick="this.innerHTML='Wooo!'" style="padding: 1em;">Click Me. I'm not part of an Update Panel</div>

<asp:UpdatePanel ID="UpdatePanel2" runat="server"> 
    <ContentTemplate>
        <div style="border: 1px solid black;">
            <asp:TextBox runat="server" ID="TextBox1" />
            <asp:Label runat="server" ID="Label1" />
            <asp:Button runat="server" ID="Button1" Text="AsyncPostBack2" />
            <div onclick="this.innerHTML='Wooo!'">Click Me - UpdatePanel2</div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

Example.aspx.vb

Protected Sub btnTEST1_Click(sender As Object, e As EventArgs) Handles btnTEST1.Click
    lblTEST1.Text = "Refreshed at " & DateTime.Now.ToString()
End Sub

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
    Label1.Text = "Refreshed at " & DateTime.Now.ToString()
End Sub

Testing the issue

  1. Click on all 3 of the divs with the "Click Me" text so that HTML is altered inside and outside of the UpdatePanels.
  2. Click one of the buttons labeled "AsyncPostBack". Regardless on which one is clicked, both UpdatePanels will have their HTML rerendered and replaced, as seen by the 2 divs inside the UpdatePanels resetting to their original text.

So I ask, is it possible to have multiple UpdatePanels on the same page that don't cause each other to rerender every time one of them has a asyncPostBack event.

Upvotes: 2

Views: 13777

Answers (2)

Jason Meckley
Jason Meckley

Reputation: 7591

yes

  1. set updatemode=conditional
  2. provide the triggers which will trigger the update. here is a link to an example. (#1 result on google) http://ajax.net-tutorials.com/controls/updatepanel-control/

Upvotes: 2

Adil
Adil

Reputation: 148110

Try adding mode to update panel tag. If mode is not give the default mode is always. If the UpdateMode property is Always, the UpdatePanel control's content is updated on every postback that originates from anywhere on the page. Microsoft documentation about UpdateMode 

<asp:UpdatePanel ID="BugsListUpdatePanel" runat="server" UpdateMode="Conditional">

Upvotes: 1

Related Questions