locked
ASP.net Multiple Update panels with an update progress RRS feed

  • Question

  • User-1807943218 posted

    I have a panel that set its visibility false when page loading. When the user clicks a button, the panel should be visible or invisible based on some database result. This is working as expected. My form looks like below.

    <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:Panel ID="Panel1" Visible="false" runat="server">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>
                        <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </asp:Panel>
            <br />
            <hr />
                <asp:Button ID="btnGetData" runat="server" Text="Get Data" OnClick="btnGetData_Click" />
        </form>

    The CodeBehind

    protected void btnGetData_Click(object sender, EventArgs e)
            {
                Thread.Sleep(5000);
                Panel1.Visible = !(Panel1.Visible);
            }

    The problem is that the DB operation takes some time (mimicked by Thread.sleep in this example) and the page is frozen during this time. I want a “wait message” to be displayed to the user till the postback complete. Here is what I tried. The following shows the “wait message” but now the panel visibility cannot be toggled. It is stuck at the initial value. Please help

    <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:Panel ID="Panel1" Visible="false" runat="server">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>
                        <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </asp:Panel>
            <br />
            <hr />
             <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                  <ContentTemplate>
                    <asp:Button ID="btnGetData" runat="server" Text="Get Data" OnClick="btnGetData_Click" />
                 </ContentTemplate>
                </asp:UpdatePanel>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                <ProgressTemplate>
                    <div class="updateProgress">please wait...<br /><img alt="Wait image" src="Resources/timer.gif" /> /></div>
                </ProgressTemplate>
            </asp:UpdateProgress>
        </form>

    Wednesday, November 29, 2017 3:15 AM

Answers

  • User-1838255255 posted

    Hi sqlca,

    According to your description and needs, you want to show the panel through database result and show waiting image when access database, I make a sample through this needs, please check:

    Sample Code:

    <head runat="server">
        <title></title>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
                font-family: Arial;
            }
    
            .modal {
                ;
                z-index: 999;
                height: 100%;
                width: 100%;
                top: 0;
                background-color: Black;
                filter: alpha(opacity=60);
                opacity: 0.6;
                -moz-opacity: 0.8;
            }
    
            .center {
                z-index: 1000;
                margin: 300px auto;
                padding: 10px;
                width: 130px;
                background-color: White;
                border-radius: 10px;
                filter: alpha(opacity=100);
                opacity: 1;
                -moz-opacity: 1;
            }
    
                .center img {
                    height: 128px;
                    width: 128px;
                }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server">
            </asp:ScriptManager>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                <ProgressTemplate>
                    <div class="modal">
                        <div class="center">
                            <img alt="" src="loader.gif" />
                        </div>
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div align="center">
                        <h1>Click the button to see the UpdateProgress!</h1>
                        <asp:Panel ID="Panel1" Visible="false" runat="server">
                                    <asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>
                                    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                        </asp:Panel>
                        <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </form>
    </body>
    
    
     protected void Button1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(5000);
            Panel1.Visible = !(Panel1.Visible);
        }

    Result:

    Best Regards,

    Eric Du

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 30, 2017 3:05 AM

All replies

  • User-1838255255 posted

    Hi sqlca,

    According to your description and needs, you want to show the panel through database result and show waiting image when access database, I make a sample through this needs, please check:

    Sample Code:

    <head runat="server">
        <title></title>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
                font-family: Arial;
            }
    
            .modal {
                ;
                z-index: 999;
                height: 100%;
                width: 100%;
                top: 0;
                background-color: Black;
                filter: alpha(opacity=60);
                opacity: 0.6;
                -moz-opacity: 0.8;
            }
    
            .center {
                z-index: 1000;
                margin: 300px auto;
                padding: 10px;
                width: 130px;
                background-color: White;
                border-radius: 10px;
                filter: alpha(opacity=100);
                opacity: 1;
                -moz-opacity: 1;
            }
    
                .center img {
                    height: 128px;
                    width: 128px;
                }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server">
            </asp:ScriptManager>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                <ProgressTemplate>
                    <div class="modal">
                        <div class="center">
                            <img alt="" src="loader.gif" />
                        </div>
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div align="center">
                        <h1>Click the button to see the UpdateProgress!</h1>
                        <asp:Panel ID="Panel1" Visible="false" runat="server">
                                    <asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>
                                    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                        </asp:Panel>
                        <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </form>
    </body>
    
    
     protected void Button1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(5000);
            Panel1.Visible = !(Panel1.Visible);
        }

    Result:

    Best Regards,

    Eric Du

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 30, 2017 3:05 AM
  • User-1807943218 posted

    Thank you so much. That worked

    Friday, December 1, 2017 5:35 PM