Click here to Skip to main content
15,397,791 members
Articles / jQuery
Technical Blog
Posted 20 Jul 2012

Tagged as

Stats

90.7K views
16 bookmarked

MVC Razor - In Progress Icon

Rate me:
Please Sign up or sign in to vote.
4.27/5 (7 votes)
23 Jul 2012CPOL2 min read
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.

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.

This article was originally posted at http://pratapreddypilaka.blogspot.com/feeds/posts/default

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

 
QuestionNot working with IE 10 Pin
ClarenceD28-Jul-15 14:16
professionalClarenceD28-Jul-15 14:16 
QuestionYour code and ViewBag Pin
Monic00730-Sep-14 2:56
MemberMonic00730-Sep-14 2:56 
QuestionGreat! Pin
planetregin1-Jul-14 2:51
Memberplanetregin1-Jul-14 2:51 
QuestionThe code is not available Pin
Member 941988818-Jun-14 7:04
MemberMember 941988818-Jun-14 7:04 
QuestionThe loader loads the view twice. Pin
Janty1-May-14 23:39
professionalJanty1-May-14 23:39 
AnswerRe: The loader loads the view twice. Pin
PratapReddyP6-May-14 17:08
MemberPratapReddyP6-May-14 17:08 
QuestionWhere do I get the value of data? Pin
danmbuen226-Jan-13 0:54
Memberdanmbuen226-Jan-13 0:54 
QuestionImprovement Pin
bruno123420-Jul-12 8:23
Memberbruno123420-Jul-12 8:23 
QuestionWrong Tags Pin
fjdiewornncalwe20-Jul-12 7:27
professionalfjdiewornncalwe20-Jul-12 7:27 

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

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