Click here to Skip to main content
Click here to Skip to main content

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.

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
India India
No Biography provided
Follow on   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 PinmemberHumayun Kabir Mamun30-Jul-13 22:42 
GeneralRe: My vote of 5 PinprofessionalAntariksh Verma30-Jul-13 22:45 
GeneralMy vote of 5 PinprofessionalBrian A Stephens29-Jul-13 4:52 
GeneralRe: My vote of 5 PinprofessionalAntariksh Verma30-Jul-13 22:45 
GeneralMy vote of 5 PinprofessionalAnurag Sarkar18-Jul-13 4:34 
GeneralRe: My vote of 5 PinprofessionalAntariksh Verma18-Jul-13 18:44 
QuestionParameter PinmemberSiberis17-Jul-13 23:46 
AnswerRe: Parameter PinprofessionalAntariksh Verma18-Jul-13 1: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 | Mobile
Web01 | 2.8.140827.1 | Last Updated 29 Jul 2013
Article Copyright 2013 by Antariksh Verma
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid