Question

I have a function inside my .aspx.cs code which takes wuite a long time to do the processing until when I want to display a cool loading animation.
I looked some of the earlier posts but either these didn’t work for me, or were having solution specific to Page loading scenario (not loading a while a function completes).

I guess the right approach would be to fire a Javascript startLoader() function just before the the main function starts (which takes a long time), and then call a stopLoader() from the .aspx.cs itself to stop the loader when the function ends. Any suggestions how to implement this?

Answer 1

Yes, I’ve done this in ASP.NET Web From (not a ASP.NET MVC solution). You need to provide OnSubmit client side event handler. It basically break down to three parts: Javascript, HTML Div, and one line code behind:

Javscript:

    function ShowLoading(e) {
        // var divBg = document.createElement('div');
        var divBg = document.getElementById('blockScreen');
        var divLoad = document.createElement('div');
        var img = document.createElement('img');

        img.src = 'images/ajax-loader.gif';
        divLoad.setAttribute("class", "blockScreenLoader");
        divLoad.appendChild(img);

        divBg.appendChild(divLoad);

        document.getElementById('blockScreen').style.display = 'block';

        // These 2 lines cancel form submission, so only use if needed.
        //window.event.cancelBubble= true;
        //e.stopPropagation();
    }

    function HideLoading() {
        //alert('hideloading');
        document.getElementById("form1").onsubmit = null;
        document.getElementById('blockScreen').style.display = 'none';
        //alert('done');
    }

Add following DIV

 <div id="blockScreen" class="blockScreen" style="display:none">&nbsp;</div>

Finally, add the following to Page_Load in code behind.

 Page.ClientScript.RegisterOnSubmitStatement(this.GetType(), "submit", "ShowLoading()");

Now, all of your page postbacks are essentially have to call onsubmit event. It will display the animation before the page postback finishes.