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

Theo: nguyenhaidang.name.vn | 08/05/2018 - 03:58

 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.

Answers

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/

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

 

Back Head Print
Tin khác

Search GridView with Paging on TextBox KeyPress using jQuery in ASP.Net    (28/07/2010)

Bootstrap AutoComplete TextBox example using jQuery TypeAhead plugin in ASP.Net with C# and VB.Net    (28/07/2010)

Disable Button and Submit button after one click using JavaScript and jQuery    (29/07/2010)

Split and convert Comma Separated (Delimited) String to Table in SQL Server    (01/09/2010)

Select Column values as Comma Separated (Delimited) string in SQL Server using COALESCE    (01/09/2010)