MVC3 WebGrid: When sorting or paging, is there a way to call a javascript method BEFORE the Controller Action method is called?

Question

I've been using this link as a reference for developing my WebGrid (http://msdn.microsoft.com/en-us/magazine/hh288075.aspx).

Currently what is happening is that my WebGrid is loaded, and I'm able to asynchronously page and sort just fine...no problems. What is an irritation is that once I click to page or sort, the user isn't aware that anything is happening.

So what I'm looking for is a way to call a javascript function (or anything really) before the controller's action method is called, so that I have something appear to let the user know work is being done to return their next page, sort, and so forth.

I'm not sure if I'm just missing something, but any help would be appreciated.

score 2 · Answer 1 · answered Jul 08 '11 at 16:58

You could use the .ajaxSend() and .ajaxComplete() methods to show and hide some spinner during the AJAX requests:

$(function() {
    $('#grid').ajaxSend(function () {
        // this will be called before the AJAX request is sent
        // here you can show some spinner
        $('body').append('<div id="spinner">Loading ...</div>');
    }).ajaxComplete(function () {
        // this will be called after the AJAX request completes and
        // could be used to hide the spinner
        $('#spinner').remove();
    });
});

MVC3 WebGrid: When sorting or paging, is there a way to call a javascript method BEFORE the Controller Action method is called?

1 Answers1