30/05/2012

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.

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).

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.