Click here to Skip to main content
13,355,726 members (62,326 online)
Click here to Skip to main content
Add your own
alternative version


15 bookmarked
Posted 17 Jul 2013

Implementation of a loading image using jQuery in MVC

, 29 Jul 2013
Rate this:
Please Sign up or sign in to vote.
This is an implementation of a loading image using jQuery in MVC.


This tip is for loading image using jquery in MVC. In this tip, we try to add a loading image on clicking the button before redirect to destination page.

We have to follow the below steps:

Step 1

Add a button to the page:

    <a href="../AddUser/Register">
        <input type="button" id="btn" value="Register" /></a>

Step 2

Add an image with style=”display:none” because initially, it is hidden.

<img id="loading" style="display: none;" 

    alt="Updating ..." src="../../Content/imgage.gif" />

Step 3

Add a Jquery script within script tag either in head section or in end of page.

<script type="text/javascript">
        function () {

                function () {
                    $.get('<%= Url.Action("../AddUser/Register") %>', {},
                        function (data) {


  • In the url.Action(), we have to provide its controller/action or action if it redirects to the same controller.
  • result is div tag id in which destination page is embedded.
  • loading is an id of image.
  • btn is the id of button on clicking which the processing image appears.

Step 4

We have to specify the below code in destination (httpGet) Action:


We have to specify this because it holds processing for specified milliseconds.

The result of this processing image is shown below:

On clicking the register button, it shows processing image before redirect to register page.

This is my initial tip. I hope this will help you.



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


About the Author

Antariksh Verma
Software Developer
India India
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
Humayun Kabir Mamun30-Jul-13 23:42
memberHumayun Kabir Mamun30-Jul-13 23:42 
GeneralRe: My vote of 5 Pin
Antariksh Verma30-Jul-13 23:45
professionalAntariksh Verma30-Jul-13 23:45 
GeneralMy vote of 5 Pin
Brian A Stephens29-Jul-13 5:52
professionalBrian A Stephens29-Jul-13 5:52 
GeneralRe: My vote of 5 Pin
Antariksh Verma30-Jul-13 23:45
professionalAntariksh Verma30-Jul-13 23:45 
GeneralMy vote of 5 Pin
Anurag Sarkar18-Jul-13 5:34
professionalAnurag Sarkar18-Jul-13 5:34 
GeneralRe: My vote of 5 Pin
Antariksh Verma18-Jul-13 19:44
professionalAntariksh Verma18-Jul-13 19:44 
QuestionParameter Pin
Siberis18-Jul-13 0:46
memberSiberis18-Jul-13 0:46 
AnswerRe: Parameter Pin
Antariksh Verma18-Jul-13 2:20
professionalAntariksh Verma18-Jul-13 2:20 
Hi Siberis,
I am explaining you each and every term in $.get().
A Url containing the URL to which the request is sent.
Data is a plain object or string that is sent to the server with the request.
Function() is a callback function that is executed if the request succeeds.

This fetches the requested HTML snippet and inserts it on the page.

If u give only Url/Uri it will not work because in $.get() function is a parameter which is executed for destination Page

I hope it will help you

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.180111.1 | Last Updated 29 Jul 2013
Article Copyright 2013 by Antariksh Verma
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid