Remove From My Forums

ASP.net Multiple Update panels with an update progress

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