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!