Ajax Loading for .NET ASPX Pages

Question

I have a .NET 4.0 ASPX page that is performing a series of semi complex calculations. These calculations could take some time and are separated into a number of methods on the page. The UI on the ASPX page contains Page Properties which retrieve the values assigned as a result of these calculations.

I would like to know the recommended JS/Ajax/jQuery approach for doing the calculations after the initial page load with ASP.NET and having some kind of loading effect running whilst the calculations are being processed.

I would like the code to be as lightweight as possible in order to achieve this. Pointers and advice on best practice greatly appreciated.

Answer 1

How long do these calculations/processes take? Does the user need to wait for them to finish, or can the user go do other things on the site while waiting?

Perhaps this isn't what you're looking for, but an alternative approach would be to run the calculations in a separate thread (or even separate application) on the server. You'd present the user with a message saying that their calculations have been queued for processing and will begin shortly.

The user can check back to see when it's done, or even have some kind of notification system on the sire (picture the little red "you have a new message" thing on Facebook, or some similar functionality) which tells them when it's done and provides a link for the user to go see the results. The notifier could easily perform some background polling via AJAX to check for results every few moments.

If scaling is going to be a concern for this application, you may want to look into an approach like this. "Online" processing in response to page events is going to drag performance as the system scales, especially during heavy load times. "Offline" processing by means of queuing up processes in the background will allow you to monitor the queue for heavy load, offload those processes to different hardware, add new functionality without killing user experience or dealing with page timeouts, etc.

Answer 2

If that operation is synchronous i.e. the user must wait for it to finish, you can use Ajax ModalPopupExtender to inform the user that the server is busy right now doing that long calculation.

On the ModalPopupExtender you may put a spinner icon or maybe extend that to include a progress bar.

Markup code:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" style="display:none"/>
        <ajaxToolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup"
        BehaviorID="programmaticModalPopupBehavior" TargetControlID="hiddenTargetControlForModalPopup"
        PopupControlID="programmaticPopup" BackgroundCssClass="modalBackground"
        DropShadow="True" RepositionMode="RepositionOnWindowScroll" >
        </ajaxToolkit:ModalPopupExtender>
        <asp:Panel runat="server" CssClass="modalPopup" ID="programmaticPopup" style="background-color:#FFFFCC;display:none;height:75px;width:150px;padding:10px">
            <asp:UpdateProgress>
                <ProgressTemplate>
                    <div style="text-align:center">
                        <div style="margin:auto;"><img alt="loading..." src="images/spinner.gif" /></div>
                        <p>This may take several minutes...Please wait.</p>
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
        </asp:Panel>
</asp:UpdatePanel>

JS code (to toogle the modal popup):

    function showPopup() {
        var modalPopupBehavior = $find('programmaticModalPopupBehavior');
        modalPopupBehavior.show();
    }
    function hidepopup() {
        var modalPopupBehavior = $find('programmaticModalPopupBehavior');
        modalPopupBehavior.hide();
    }

Note: In some advanced cases, you may need to implement:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

and then add a JS handler named EndRequestHandler, This is called when the server returns from execution.

Hope that helps.