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!

Implementation of a loading image using jQuery in MVC