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.