Show Ajax Loading Indicator when sorting or paging ASP.net MVC Webgrid

Question

I can easily hookup a webgrid and add ajax to it using the default settings. But one thing I have been struggling to figure out is how to add a loading indicator when the grid is sorting or paging via ajax.

There is a built in callback function which is great to turn off the ajax loading indicator but how can I easily turn one on?

Below is the code I have currently for my webgrid.

@{
    var grid = new WebGrid(rowsPerPage: Model.CountPerPage, ajaxUpdateContainerId: "GridArea");
    grid.Bind(Model.Users,
              autoSortAndPage: false,
              rowCount: Model.TotalCount
            );
    grid.Pager(WebGridPagerModes.All);
}
<div id="GridArea">
    @grid.GetHtml(htmlAttributes: new {id ="UserGrid"},
        columns: new [] {
        grid.Column("ID", canSort: false),
        grid.Column("FirstName"),
        grid.Column("LastName"),
        grid.Column("Email"),
        grid.Column("FullName", canSort: false)
        }
    )
</div>

I've tried using the following but neither of these have worked.

<script>
    $(function () {
        $("#UserGrid").live("ajaxStart", function () {
            alert("start");
        });
    });
</script>

This one works the first time but won't work after the grid does its first ajax refresh.

<script>
    $(function () {
        $('#UserGrid').ajaxStart(function () {
            alert("start");
        });
    });
</script>

Answer 1

This should work.

$(document).ajaxStart(function(){
     //Show your progressbar here
}).ajaxStop(function(){
     //Hide your progressbar here
});

Your second approach is not working because after the first ajax response, the DOM is re created and the .ajaxStart event binding is lost. Tied it with the global document object and it will always be there.