MVC Razor - In Progress Icon

• MVC In progress Sample

In Progress Icon" is the best way of intimating a client about server side action, so that he can wait until it is completed. In this post we will see how to display one in a MVC Razor application.

Step 1:  Create a MVC Razor application. Add a .gif image which is displayed above or you can get it from the code sample attached below.

Step 2:  Add a div tag with required blurring background and Opacity.

<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px;
    top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001;
    opacity: .8; filter: alpha(opacity=70);display:none" >
    <p style="position: absolute; top: 30%; left: 45%; color: White;">
        Loading, please wait...<img src="../../Content/themes/base/images/ajax-loading.gif">
    </p>
</div>

Step 3: Define the server side method so that it will wait for 5 seconds, so that we can see the "In Progress Icon" effect.

[HttpPost]
        public ActionResult PostMethod()
        {
            System.Threading.Thread.Sleep(5000);            

            return Json("Message from Post action method.");
        }

If you observe , we are sending a message from server side method, and lets display it on view in call back method of Ajax call.

Step 4:  Now create a button tag, which will call a server side function using ajax call.(Post / Get).

<button onclick="JavascriptFunction();">HTTPPost Button</button>
<script type="text/javascript" language="javascript">
    function JavascriptFunction() {    
        var url = '@Url.Action("PostMethod", "Home")';
        $("#divLoading").show();
        $.post(url, null,
                function (data) {
                    $("#PID")[0].innerHTML = data;
                    $("#divLoading").hide();
                });        
    }
</script>

As per the implementation of "JavascriptFunction()", the server side method will be executed and once it si done, the message from server will be displayed in one of the tags.

Results:

Before clicking the Post Button :

After clicking the Post Button and while executing server side method:

After completion of execution of ajax call:

Observe that message from server was displayed on view using Callback method.

Logic: All we need to do is, hide that <Div> tag having the background blur and opacity using declarative syntax. Just before making the ajax call, i made that DIV tag Visible. And will hide the DIV tag in callback method. This means, the screen will be blurred out and "In-Progress" icon will be shown until the server side method is executed and the control came back to client side.

Code:

Is it helpful for you? Kindly let me know your comments / Questions.