locked
Implementing busy gif on mvc 5 razor page RRS feed

  • Question

  • User559435292 posted

    Hi,

    On my MVC 5 Razor application, I want to setup a busy gif while loading any page like Index/Create/Edit pages. The busy gif will be popup and all background forms/pages will be fade until the whole contents of the page is loaded. 

    Could anyone please help me? Thanks.

    Thursday, June 14, 2018 6:37 AM

Answers

  • User2053451246 posted

    blockUI plugin:

    http://malsup.com/jquery/block/#overview

    You can easily have it display an image and even put the JavaScript in some global.js file so it will display on every form submit:

    var submitprocessingmsg = "<strong>Processing</strong><br /><img src='Images/progress.gif' />";
    
    // Block UI when submitting forms
    $("input:submit").click(function () {
    	if($("form").valid())
    		$.blockUI({ message: submitprocessingmsg });
    });
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 14, 2018 5:51 PM
  • User1724605321 posted

    Hi pointtoshare,

    When user clicks on product link on the left navigation bar, i want to call the blockUI() until the whole data load on Index page.

    You can refer to below links for how to run BlockUI on page load :

    https://stackoverflow.com/questions/7715192/blockui-on-dom-ready 

    https://stackoverflow.com/questions/806713/block-ui-until-a-page-has-fully-loaded-jquery-blockui-plugin/4350763 

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 19, 2018 5:25 AM
  • User-1171043462 posted

    Try this

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
    
        <style type="text/css">
            .modal {
                ;
                top: 0;
                left: 0;
                background-color: black;
                z-index: 99;
                opacity: 0.8;
                filter: alpha(opacity=80);
                -moz-opacity: 0.8;
                min-height: 100%;
                width: 100%;
            }
    
            .loading {
                font-family: Arial;
                font-size: 10pt;
                border: 5px solid #67CFF5;
                width: 200px;
                height: 100px;
                display: none;
                ;
                background-color: White;
                z-index: 999;
            }
        </style>
    </head>
    <body>
        <div class="loading" align="center">
            Loading. Please wait.<br />
            <br />
            <img src="/Images/loader.gif" alt="" />
        </div>
        <script type="text/javascript">
            var modal, loading;
            function ShowProgress() {
                modal = document.createElement("DIV");
                modal.className = "modal";
                document.body.appendChild(modal);
                loading = document.getElementsByClassName("loading")[0];
                loading.style.display = "block";
                var top = Math.max(window.innerHeight / 2 - loading.offsetHeight / 2, 0);
                var left = Math.max(window.innerWidth / 2 - loading.offsetWidth / 2, 0);
                loading.style.top = top + "px";
                loading.style.left = left + "px";
            };
            ShowProgress();
        </script>
        
        <!-- Keep the Page Content Here.-->
    
        <script type="text/javascript">
            window.onload = function () {
                setTimeout(function () {
                    document.body.removeChild(modal);
                    loading.style.display = "none";
                }, 2000);
            };
        </script>
    </body>
    </html>
    

    Demo: Demo

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 26, 2018 10:37 AM

All replies

  • User632428103 posted

    Hello

    something like that

    https://www.c-sharpcorner.com/article/enable-ajax-loader-in-asp-net-mvc/

    Thursday, June 14, 2018 2:57 PM
  • User-474980206 posted

    there are a couple solutions to. 

    1) the server turns off buffering and pushes a small pieces of html that displays the loading, then push the rest of the html, that turns off the loading. this is a little difficult with MVC as you must push at the start of the action (say an action filter). But you can not change headers, so redirects will not work. The layout will need to know whether to include the hide loading code.

    This is the approach often used by node and server pre-render. see Redfins react server for an example:

        https://github.com/redfin/react-server

    2) the server returns a light weight page, that displays the loading, and the page makes an ajax call for the actual content. this is probably the easiest to implement in MVC.

    3) use a little client script on the submit, to render the busy with a fadeout. have pages render faded, and unfade on the page load. this can be helpful if your page has complex markup, and takes very long to render after download, or it has a lot of assets that take time to download.

      note: just google for the desired fade out/ fade and in busy effect you want. it will be a div, with a little css. 

    Thursday, June 14, 2018 2:58 PM
  • User2053451246 posted

    blockUI plugin:

    http://malsup.com/jquery/block/#overview

    You can easily have it display an image and even put the JavaScript in some global.js file so it will display on every form submit:

    var submitprocessingmsg = "<strong>Processing</strong><br /><img src='Images/progress.gif' />";
    
    // Block UI when submitting forms
    $("input:submit").click(function () {
    	if($("form").valid())
    		$.blockUI({ message: submitprocessingmsg });
    });
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 14, 2018 5:51 PM
  • User559435292 posted

    Hi ryanbesko,

    Thanks for your reference. I have implemented blockUI() and working fine with button events but not working for the Index page load. For example: 

    When user clicks on product link on the left navigation bar, i want to call the blockUI() until the whole data load on Index page. Left Navigation url is like-

    <ul class="nav nav-pills nav-stacked">
    <li class="active">@Html.ActionLink("Product List", "Index", "Product")</li>
    </ul>

    Thanks.

    Monday, June 18, 2018 11:19 AM
  • User1724605321 posted

    Hi pointtoshare,

    When user clicks on product link on the left navigation bar, i want to call the blockUI() until the whole data load on Index page.

    You can refer to below links for how to run BlockUI on page load :

    https://stackoverflow.com/questions/7715192/blockui-on-dom-ready 

    https://stackoverflow.com/questions/806713/block-ui-until-a-page-has-fully-loaded-jquery-blockui-plugin/4350763 

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 19, 2018 5:25 AM
  • User-1171043462 posted

    Try this

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
    
        <style type="text/css">
            .modal {
                ;
                top: 0;
                left: 0;
                background-color: black;
                z-index: 99;
                opacity: 0.8;
                filter: alpha(opacity=80);
                -moz-opacity: 0.8;
                min-height: 100%;
                width: 100%;
            }
    
            .loading {
                font-family: Arial;
                font-size: 10pt;
                border: 5px solid #67CFF5;
                width: 200px;
                height: 100px;
                display: none;
                ;
                background-color: White;
                z-index: 999;
            }
        </style>
    </head>
    <body>
        <div class="loading" align="center">
            Loading. Please wait.<br />
            <br />
            <img src="/Images/loader.gif" alt="" />
        </div>
        <script type="text/javascript">
            var modal, loading;
            function ShowProgress() {
                modal = document.createElement("DIV");
                modal.className = "modal";
                document.body.appendChild(modal);
                loading = document.getElementsByClassName("loading")[0];
                loading.style.display = "block";
                var top = Math.max(window.innerHeight / 2 - loading.offsetHeight / 2, 0);
                var left = Math.max(window.innerWidth / 2 - loading.offsetWidth / 2, 0);
                loading.style.top = top + "px";
                loading.style.left = left + "px";
            };
            ShowProgress();
        </script>
        
        <!-- Keep the Page Content Here.-->
    
        <script type="text/javascript">
            window.onload = function () {
                setTimeout(function () {
                    document.body.removeChild(modal);
                    loading.style.display = "none";
                }, 2000);
            };
        </script>
    </body>
    </html>
    

    Demo: Demo

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 26, 2018 10:37 AM