Enable Ajax Loader In ASP.NET MVC

Introduction

This article explains how to generate AJAX loader in ASP.NET MVC application, using an AJAX step by step procedure.

Background

User can use different applications and they do not need to know about application processing methodologies. When user requests to server, it may take time to respond to a given request. While waiting for the request, we need to give an indication to the user for the same. If we do not give any indication, user does not know what's happening in the application. AJAX loader indicates the user that the application is processing in the background.

Step 1: Go to Visual Studio and Select New Project. Then, select ASP.NET Web Application, as shown in the following image.



Step 2: Select MVC from a template type. ASP.NET MVC allows you to build application using the Model-View-Controller architecture.



Step 3: Go to Solution Explorer. Right click on “Controller” folder and select Add. Then, go to controller.



Step 4: After clicking controller, “Add Scaffold” window will open. Now, select MVC 5 Controller – Empty in “Add Scaffold” window and click Add button.



Finally, give controller a name of your choice and click on Add button.



Step 5: Add View from action results in the added controller. Right click on action result and add View.



Step 6: Download AJAX loader image from any free website. We can download from http://www.ajaxload.info/ website.



Step 7: We can select loader color as well as the background color and different loader styles. After selecting your loader style, click download. After downloading, copy your loader image from your system to the  “Content” folder in your project.



Step 8: Now, we can use AJAX loader wherever it is needed in our applications. For example, if we give a request to get some report or result in the application, it will take some time to respond because it is processing in background.

Wherever we take time to respond to a given request,  we use AJAX loader to indicate the processing to the user.

Written below is the AJAX code to enable AJAX Loader in View Page.

Code

<script src="~/Scripts/jquery-1.10.2.js"></script>
<h2>Welcome To Ajax Loader</h2>
<div id="divLoader" style="display:none;"> <img src="~/Content/ajax-loader.gif" alt="Loader" /> </div> <input type="submit" id="btnSubmit" value="Submit" />
<script>
    $("#btnSubmit").click(function()
    {
        $("#divLoader").show();
        $.ajax
        ({
            url: '/Test/Submit',
            dataType: "json",
            type: "POST",
            contentType: 'application/json; charset=utf-8',
            data: {},
            //async: true,
            //processData: false,
            // cache: false,
            success: function(data)
            {
                $("#divLoader").hide();
                alert(data);
            },
            error: function(xhr)
            {
                $("#divLoader").hide();
                alert('error');
            }
        })
    });
</script>

Explanation

Insert “image” tag in “div” and give useful “Id” name for “div” tag. Normally, we hide the div tag using style. When submitting to a request to the server for processing, we enable “div” tag. So, the AJAX loader image will be displayed. Using the above code, enable AJAX loader image on button click. After we get a response from server, we hide the image whether the response is successful or not. If response is successful, a success message appears, otherwise an error message will be shown.

Step 9: Finally, run the application and give request to submit form values to server. While submitting form values to server, AJAX loader will enable us to complete our request.



After processing the given request, the success message will be displayed.



Conclusion

In every application, we use AJAX loader to indicate our purpose to the user. These step by step images to enable AJAX loader in ASP.NET MVC will help many fresher and intermediate level developers.