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

Tagged as

Go to top

MVC Razor - In Progress Icon

, 23 Jul 2012
Rate this:
Please Sign up or sign in to vote.
CodeProject"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 ca

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)

Share

About the Author


Comments and Discussions

 
QuestionYour code and ViewBag PinmemberMonic0071 hr 15mins ago 
QuestionGreat! Pinmemberplanetregin1-Jul-14 2:51 
QuestionThe code is not available PinmemberMember 941988818-Jun-14 7:04 
QuestionThe loader loads the view twice. PinprofessionalJanty1-May-14 23:39 
AnswerRe: The loader loads the view twice. PinmemberPratapReddyP6-May-14 17:08 
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
Web04 | 2.8.140926.1 | Last Updated 23 Jul 2012
Article Copyright 2012 by PratapReddyP
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid