Show a waiting progress bar while method finish executing

Question

I have an ASP.NET webpage which has a datagrid. The datagrid loads on a button click event. Before loading the datagrid there are some method executions and it takes some time to get the data. I want to show a progress bar giving a waiting indicator to the user before grid loads. What is the best way of doing that?

protected void btnStart_Click(object sender, ImageClickEventArgs e) {

    _bw = new BackgroundWorker();
    _bw.DoWork += bw_DoWork;
    _bw.RunWorkerCompleted += bw_RunWorkerCompleted;
    _bw.RunWorkerAsync();
    waiting.Style["display"] = "inline";
    divDataGrid.Style["display"] = "none";
}

private void bw_DoWork(object sender, DoWorkEventArgs e)
    {
        BackgroundWorker worker = sender as BackgroundWorker;
        int n = Convert.ToInt32(e.Argument);
        e.Result = PerformBinding(n, worker, e);
    }

private bool PerformBinding(int n, BackgroundWorker worker, DoWorkEventArgs e)
    {
        Service.Start();
        BindDataGrid();
        return true;
    }


private void BindDataGrid()
{
  //take some time to get data
}

private void bw_RunWorkerCompleted(object sender,
                                       RunWorkerCompletedEventArgs e)
    {
        waiting.Style["display"] = "none";
        divDataGrid.Style["display"] = "inline";
    }

here "waiting" is an div tag id for waiting progress bar and "divDataGrid" is the div tag containing that grid.

Answer 1

I would put your code that needs time to load in an update panel so you can load your page asynchronously - the static stuff first and then when your dynamic portions are generated, they too would load. You could even put some sort of spinning icon while you wait for it to load, using some sort of ready handler on the update panel to turn it off when it is loaded.

Answer 2

As suggested, you can use UpdatePanel control. Inside it you will need to set UpdateProgress and add some spinning icon there:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
            <!-- Your controls here -->
    <updateprogress>
        <progresstemplate>
                <img src="images/loading.gif">
            </progresstemplate>
    </updateprogress>
</ContentTemplate>
<Triggers>
    <asp:AsyncPostBackTrigger />
</Triggers>

Answer 3

First off, the BackgroundWorker class isn't designed to be used in an ASP environment, and isn't going to help you. You're better off just not using it at all.

Creating this behavior in ASP is much harder than in a desktop application. This is because you don't have proper two way communication between the client and the server. In HTTP the client makes a request and it gets one response. The server can't just send data arbitrarily to the client (if it does it will just end up being ignored).

What you need to do is start out by creating a new thread to do the processing asynchronously. (You're probably best off just using the Thread class here; a thread pool thread is unlikely to be helpful, and none of the other tools that build on top of Thread such as a background worker, Task, etc. really help with this at all.) Then you need to have the thread doing work store some information as to the current progress in Session , or in some other form of persistent state (a database or other external storage is another option. Finally, you need to have client side code (meaning javascript) on the page that constantly polls the server, checks that persistent storage for progress, and updates the client accordingly. This is both highly inefficient for the server, and takes quite a bit of time to develop.

Here is an example on MSDN of this approach.

Answer 4

Thanks All. I found simple solution.

<asp:ImageButton ID="btnStart" runat="server" src="images/Play.png" OnClick="btnStart_Click" OnClientClick="document.getElementById('waiting').style.display='block';" />

<div id="waiting" style="position: left: 0px; top: 0px; background-color: white;
                            height: 100%; width: 100%; display:none" align="center" runat="server" >
                            <img src="images/progress.gif" height="60px" />
                        </div>

protected void btnStart_Click(object sender, ImageClickEventArgs e)
    {
        Service.Start();
        BindDataGrid();
        waiting.Style.Add("display", "none;");
    }