Click here to Skip to main content
Click here to Skip to main content

MVC Razor - In Progress Icon

By , 23 Jul 2012
Rate this:
Please Sign up or sign in to vote.

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

PratapReddyP
Web Developer
India India
I am an Aspiring Architect, having expertise in Design and Development. Good knowledge on TDD and DDD Approaches. Well versed with Agile methodology. Strong at Sharepoint, C# , Asp.Net, MVC, MVC Razor, WCF, Entity Framework, SQL, BI Tools.

Comments and Discussions

 
QuestionWhere do I get the value of data? Pinmemberdanmbuen226-Jan-13 0:54 
QuestionImprovement Pinmemberbruno123420-Jul-12 8:23 
QuestionWrong Tags PinmemberMarcus Kramer20-Jul-12 7:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140415.2 | Last Updated 23 Jul 2012
Article Copyright 2012 by PratapReddyP
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid