在排序或分页ASP.net MVC Webgrid时显示Ajax加载指示器

Question

我可以轻松地连接webgrid并使用默认设置向其添加ajax.但是我一直在努力弄清楚的一件事是当网格排序或通过ajax分页时如何添加加载指示器.

有一个内置的回调函数,可以很好地关闭ajax加载指示器,但我怎么能轻松打开一个？

下面是我目前为我的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>

我尝试过使用以下内容,但这些都没有奏效.

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

这个第一次工作但在网格完成第一次ajax刷新后无法工作.

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

Answer 1

这应该工作.

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

你的第二种方法不起作用,因为在第一次ajax响应之后,重新创建了DOM,并且.ajaxStart甚至绑定都丢失了.与全局文档对象绑定,它将永远存在.