Click here to Skip to main content
11,480,847 members (63,895 online)
Click here to Skip to main content

Implementation of a loading image using jQuery in MVC

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

Introduction

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:

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

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">
    $(document).ready(
        function () {
            $("#btn").click(

                function () {
                    $("#loading").show();
                    debugger;
                    $.get('<%= Url.Action("../AddUser/Register") %>', {},
                        function (data) {
                            $('#result').html(data);
                            $('#loading').hide();
                        });
                }
            );
        }
    );
</script>

Note

  • 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:

Thread.Sleep(2000);

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.

Thanks!

License

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

Share

About the Author

Antariksh Verma
Software Developer (Senior)
India India
No Biography provided
Follow on   Google+   LinkedIn

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 

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 | Terms of Use | Mobile
Web01 | 2.8.150520.1 | Last Updated 29 Jul 2013
Article Copyright 2013 by Antariksh Verma
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid