locked
Update Multiple UpdatePanels using Javascript RRS feed

  • Question

  • User-147228924 posted

    I am trying to update multiple panels 

    <asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional" OnLoad="UpdatePanel1_Load">
      <ContentTemplate>
        <!-- Stuff -->
      </ContentTemplate>
    </asp:UpdatePanel>
    
    <asp:UpdatePanel runat="server" id="UpdatePanel2" UpdateMode="Always" OnLoad="UpdatePanel2_Load">
      <ContentTemplate>
        <!-- Different stuff -->
      </ContentTemplate>
    </asp:UpdatePanel>

    <asp:UpdatePanel runat="server" id="UpdatePanel3" UpdateMode="Always" OnLoad="UpdatePanel3_Load">
    <ContentTemplate>
    <!-- Different stuff -->
    </ContentTemplate> </asp:UpdatePanel>

    And I triggered it in javascript

    <script>
            $(document).ready(function () {            
                //$("#ContentPlaceHolder1_BoxContent_Button1").click();           
                __doPostBack('UpdatePanel1', 'Update-Both');
            });
        </script>

    And the Backend code is 

    protected void UpdatePanel1_Load(object sender, EventArgs e)
            {
                if (Request["__eventargument"] == "Update-Both")
                {
                    PanelHideShow.Visible = true;
    
                    //update stuff;
    
                    PanelHideShow.Visible = false;
                }            
                //RegisterAsyncTask(new PageAsyncTask(() => Loading()));
            }
    
            protected void UpdatePanel2_Load(object sender, EventArgs e)
            {
                if (Request["__eventargument"] == "Update-Both")
                {
                    PanelHideShow.Visible = true;
    
                    //update stuff
    
                    PanelHideShow.Visible = false;
                }
                //RegisterAsyncTask(new PageAsyncTask(() => Loading()));
            }
    
            protected void UpdatePanel3_Load(object sender, EventArgs e)
            {
                if (Request["__eventargument"] == "Update-Both")
                {
                    PanelHideShow.Visible = true;
    
                    //update stuff
    
                    PanelHideShow.Visible = false;
                }
                //RegisterAsyncTask(new PageAsyncTask(() => Loading()));
            }

    I found the control can be updated, however, the codes run keep looping to <g class="gr_ gr_345 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="345" data-gr-id="345">UpdatePanel1_Load </g><g class="gr_ gr_345 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Style multiReplace" id="345" data-gr-id="345"><g class="gr_ gr_344 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Style replaceWithoutSep" id="344" data-gr-id="344">,</g></g><g class="gr_ gr_344 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Style replaceWithoutSep" id="344" data-gr-id="344">UpdatePanel2_Load</g><g class="gr_ gr_370 gr-alert gr_gramm gr_inline_cards gr_run_anim Style replaceWithoutSep" id="370" data-gr-id="370">,UpdatePanel3_Load</g> again and again. What is wrong with my code?

    Thursday, August 2, 2018 5:41 AM

All replies

  • User283571144 posted

    Hi Hon123456,

    I found the control can be updated, however, the codes run keep looping to UpdatePanel1_Load ,UpdatePanel2_Load,UpdatePanel3_Load again and again. What is wrong with my code?

    As far as I know, no matter you use which method, if this method will cause postback, it will run the Page_Load and all the updatepanel's Page_Load event. Since the updatepanel postback will also follow the asp.net webform's pagelift.

    But it will only modify the triggered updatepanel html.

    Like this:

    You could find it will only return the updatepanel1's reuslt not all the page's result.

    I suggest you could try below codes and compare each updatepanel's datetime value.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MultipleUpdatePanelTest.aspx.cs" Inherits="AspNetNormalIssue.Webform.MultipleUpdatePanelTest" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-1.9.1.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional" OnLoad="UpdatePanel1_Load">
                    <ContentTemplate>
                        <!-- Stuff -->
                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                    </ContentTemplate>
                </asp:UpdatePanel>
                <asp:UpdatePanel runat="server" ID="UpdatePanel2" UpdateMode="Conditional" OnLoad="UpdatePanel2_Load">
                    <ContentTemplate>
                        <!-- Different stuff -->
                        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                         <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Button1" />
                    </Triggers>
                </asp:UpdatePanel>
                <asp:Button ID="Button1" runat="server" Text="Button" />
    
                <asp:UpdatePanel runat="server" ID="UpdatePanel3" UpdateMode="Conditional" OnLoad="UpdatePanel3_Load">
                    <ContentTemplate>
                        <!-- Different stuff -->
                        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                        <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
                    </ContentTemplate>
                </asp:UpdatePanel>
    
            </div>
        </form>
        <script>
            $(document).ready(function () {
                //$("#ContentPlaceHolder1_BoxContent_Button1").click();           
                __doPostBack('UpdatePanel1', 'Update-Both');
            });
        </script>
    </body>
    </html>
    

    Code-behind:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace AspNetNormalIssue.Webform
    {
        public partial class MultipleUpdatePanelTest : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                
            }
            protected void UpdatePanel1_Load(object sender, EventArgs e)
            {
    
                Thread.Sleep(1000);
                Label1.Text = DateTime.Now.ToString();
    
                if (Request["__eventargument"] == "Update-Both")
                {
                    //PanelHideShow.Visible = true;
    
                    //update stuff;
    
                   // PanelHideShow.Visible = false;
                }
                //RegisterAsyncTask(new PageAsyncTask(() => Loading()));
            }
    
            protected void UpdatePanel2_Load(object sender, EventArgs e)
            {
                Label2.Text = DateTime.Now.ToString();
    
                if (Request["__eventargument"] == "Update-Both")
                {
                    //PanelHideShow.Visible = true;
    
                    //update stuff
    
                   // PanelHideShow.Visible = false;
                }
                //RegisterAsyncTask(new PageAsyncTask(() => Loading()));
            }
    
            protected void UpdatePanel3_Load(object sender, EventArgs e)
            {
                Label3.Text = DateTime.Now.ToString();
    
                if (Request["__eventargument"] == "Update-Both")
                {
                  //  PanelHideShow.Visible = true;
    
                    //update stuff
    
                  //  PanelHideShow.Visible = false;
                }
                //RegisterAsyncTask(new PageAsyncTask(() => Loading()));
            }
    
            protected void Button1_Click(object sender, EventArgs e)
            {
    
            }
        }
    }

    Best Regards,

    Brando

    Monday, August 6, 2018 6:50 AM