Loading Progress when button is clicked

Question

Hi. I have a aspx page which contains script manager, dropdown controls, button and gridview. The css class used for the various div is the Bootstrap. I want to show a loading image when the button is clicked, which shows the gridview. The loading image should not be shown on form load , but only during the button click which has code to bind the gridview. How to achieve this ? Thanks

Answer 1

Ok, well, it would not make sense to have the button click "code behind" try to show the please wait and animated gif, since that same code no doubt will experience the delay while loading the gridview. As a result, the end user will never see the please wait part, since everything occurs server side until such time the grdiview loads, and then if you hide the div area, once again, that will also occur in the "same" page life cycle. However, have no worry, since a good old regular button has both a server side click event, and then also has a client side event. So, say we have a button, grid view. When we click the button, we show the please wait "animated" gif, and maybe some text. Now that will display until the grid view is loaded. So, our markup can look like this:

            <asp:Button ID="cmdLoadGrid" runat="server"
                Text="Load Grid Data" CssClass="btn"
                OnClick="cmdLoadGrid_Click"
                OnClientClick="mywaitdialog()" />
            <br />
            <asp:GridView ID="GridView1" runat="server"
                CssClass="table" Width="40%">
            </asp:GridView>


            <div id="mywaitmsg" style="display: none; width: 300px">
                <h3>Loading data - please wait</h3>
                <div style="text-align: center">
                    <img src="../Content/wait2.gif" style="height: 64px; width: 70px" />
                </div>
            </div>

            <script>
                function mywaitdialog() {
                    var mywait = document.getElementById("mywaitmsg")
                    mywait.style.display = 'block';
                }
            </script>

And our code behind looks like this:

Protected Sub cmdLoadGrid_Click(sender As Object, e As EventArgs)

   Dim strSQL As String = "SELECT * FROM tblHotelsA"

   GridView1.DataSource = MyRst(strSQL)
   GridView1.DataBind()

   System.Threading.Thread.Sleep(3000)   'fake delay for this demo

End Sub

The resulting effect looks like this:

Note close how we don't have to "hide" the div, since when the page life cycle completes, then a whole new page is sent from the server (standard page lifecycle), and thus our "div" area will be once again hidden.

Answer 2

Hi @Padmanabhan, Venkatesh

This functionality can be implemented using the 'visible' feature of 'div'.

In order to control the div control in the background, we need to add runat="server". Code:

protected void Button1_Click(object sender, EventArgs e)
        {
            if (div1.Visible == false)
                div1.Visible = true;
            else
                div1.Visible = false;
        }

<div id="div1" runat="server">
            <img src="image/img28.jpg" width="100" height="100"/>
        </div>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button"  />

Output:

Best Regards,

Qi You

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.