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

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事件绑定(bind)丢失。将它与全局文档对象绑定(bind)在一起，它将永远存在。