How to show a 'gif' until the controller method is completed running + ASP.Net MVC

Question

I have a function that take few seconds to be completed. after completing the task in a separate thread, I want to load the Result view to the browser. Until that I want to show a loading gif in the browser.

This is how my controller method

public ActionResult evaluateBulk(string year, string exam, string centre, string course, string batch)
    {
        string path = Directory.GetCurrentDirectory() + @"\" + year + @"\" + exam + @"\" + centre + @"\" + course + @"\" + batch + @"\";
        string[] listOfImages = getAllFiles(path);

        var th = new Thread(processImages);
        th.Start(listOfImages);
        th.Join();

        return View("Result");
    }

This is how the above controller method is called from the View

        function evaluateBulk() {

        var year = $("#year option:selected").val();
        var exam = $("#exam option:selected").val();
        var centre = $("#centre option:selected").val();
        var course = $("#course option:selected").val();
        var batch = $("#batch option:selected").val();

        $.ajax({
            async: true,
            url: "evaluateBulk",
            data: { year: year, exam: exam, centre: centre, course: course, batch: batch },
            cache: false,
            dataType: "json",
            success: function (data) {
                alert("Done");
            },
            error: function (xhr, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    }

How to integrate a loading gif into this view to display until the Result view is loaded with the results of the method..

Thanks

Answer 1

Add a loader image to your code

<div id="loadingImg" style="display:none;">
 <img src="loading.gif"/>
</div>

Modify your ajax code

  $('#loadingImg').show();
     $.ajax({
        async: true,
        url: "evaluateBulk",
        data: { year: year, exam: exam, centre: centre, course: course, batch: batch },
        cache: false,
        dataType: "json",
        success: function (data) {
            alert("Done");
        },
      complete: function(){
      $('#loadingImg').hide();
      },
        error: function (xhr, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });