displaying loading spinner while jquery calls Controller in ASP.NET MVC

Question

I have a jquery function in my View(Index.cshtml)...

<script type="text/javascript">
    // call ASP.NET MVC Controller and return value of Checkboxes as string array
    function SerializeMappings()
    {
        var matches = [];

        $('[class^="mappings_"]:checked').each(function () {
            matches.push(this.value);
        });

        $.post("/Home/Validate", { listofmappings: matches }, function (data) {
            document.write(data);
        });
    }
</script>

This function calls this function:

    // POST: Home/Validate
    [HttpPost]
    public ActionResult Validate(string[] listOfMappings)
    {
       //Some code which takes Long time (~10-15sec)
       //....
       //fill List<List<string>> with data and return it to Validate.cshtml

       return View(anyStringList);
    }

Now my real question: How can I display a loading circle while the 'Validate' function is running...? Thanks in advance.

You can use ajaxStart and ajaxStop function to do that.

Ibrahim Khan
– Ibrahim Khan

2015-11-26 11:53:34 +00:00
Commented Nov 26, 2015 at 11:53 — Ibrahim Khan
– Ibrahim Khan, Commented Nov 26, 2015 at 11:53

user449689 · Accepted Answer · 2015-11-26 14:53:32Z

You have some different approaches.

The basic one is to show the spinner just before the post and hide it when the call is ended, as follows:

// Here you show the spinner
...
$.post("/Home/Validate", { listofmappings: matches }, function (data) {
    document.write(data);
})
.always(function() {
    // Here you hide the spinner
    ...
});;

Another approach, if you are using a layout and you want to standardize and centralize the management of the spinner is to use jQuery Global Ajax Event Handlers.

First you let jQuery know that when you launch an Ajax request you want to show the spinner that will be located in your layout:

$.ajaxSetup({
    beforeSend: function () {
        // Here you show your spinner
        ...
    }
});

When every request is completed, you just hide the spinner:

$(document).ajaxComplete(function () {
    // Here you hide the spinner
    ...
});

The same thing can be accomplished as Azim suggested in his comment, using ajaxStart and ajaxStop.

Collectives™ on Stack Overflow

displaying loading spinner while jquery calls Controller in ASP.NET MVC

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related