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

Question

我可以轻松连接一个网络网格并使用默认设置将ajax添加到其中。但是我一直想弄清楚的一件事是，当网格通过ajax进行排序或分页时，如何添加一个加载指示器。

有一个内置的回调函数，可以很好地关闭ajax加载指示器，但如何轻松打开它呢？

下面是我目前用于网络网格的代码。

@{
    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事件绑定将丢失。将其与全局文档对象绑定在一起，它将始终存在。

Answer 2

是，以上答案应该对您有帮助。基本上有一个Jquery API，它将处理从客户端到服务器的所有ajax请求。因此，当您执行任何ajax操作时，它将调用trigger函数。您可以将自定义的css / images或一些可以作为指示符调用的功能放在ajax操作上。