How do I show a modal dialog while the databind occurs?

Question

I have a form with gridview that is bound to a complex stored procedure (financial data). This query takes about 3 minutes to run and load the gridview. The users get impatient and click "Search" repeatedly, which just makes things worse.

As an interim solution, I'd like to show a progress bar, and I found a solution using the ASP.NET AJAX ModalPopupExtender.

This is the code I have for adding the extender to the page:

<ajaxToolkit:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="Button1"
    PopupControlID="pnlPopup" BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlPopup" runat="server" CssClass="updateProgress" style="display: none">
    <div align="center" style="margin-top: 13px;">
        <img src="../images/progress.gif" alt="Progress" />
        <span class="updateProgressMessage">Loading ...</span>
    </div>
</asp:Panel>

This is the very simple code for the button's click event:

protected void Button1_Click(object sender, EventArgs e)
{
    gvInvoice.DataBind();
}

The problem is, when I click the Search button, the modal dialog pops up but the Databind() method never gets called. I tried using mdlPopup.Show() but that doesn't show the dialog and instead just runs the Databind().

What am I missing? How do I ensure that the modal dialog appears, the databind runs, and the modal dialog subsequently disappears?

Answer 1

I think what you need to do here is separate the showing of the dialog and the binding from the fetching of the data.

I would probably solve the problem using an approach like this:

1. Show Dialog and spin thread to go fetch the data. (the thread would put the data in the session cache, or a customised cache on a database.)
2. Have the client poll the server for if the data is available (probably using AJAX calls to static page methods).
3. When the data is available, hide the dialog and do the databind.

You can put additional checks/conditions around when the thread is started so that you don't start too many threads if the user presses search a number of times. I.e. if they haven't changed the search criteria then don't start a new search, but just continue polling.

Answer 2

It looks like you try to show progress panel (modal popup) for full page post-back? mdlPopup.Show() would work if the search action is done within updatepanel

In your scenario, try this instead - Step 1, set the TargetControlID of the modalpopupextender to a dummy hidden control - Step 2, added javascript call that shows the modalpopup $find('mdlPopup').show(); before the post-back call of search button's onclient event (just like adding a validation before post-back)

James