MVC Razor - In Progress Icon

"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">

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.
        public ActionResult PostMethod()

            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")';
        $.post(url, null,
                function (data) {
                    $("#PID")[0].innerHTML = data;

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.

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.

MVC In progress Sample

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

No comments:

Post a Comment