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

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.

我可以轻松地连接webgrid，并使用默认设置向其添加ajax。但是有一件事我一直在努力弄清楚，那就是当网格通过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?

有一个内置的回调函数，它很好地关闭了ajax加载指示器，但是我怎么能轻松地打开它呢?

Below is the code I have currently for my webgrid.

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

这个第一次可以工作，但是在网格进行第一次ajax刷新之后就不能工作了。

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

2 个解决方案

#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 even binding is lost. Tied it with the global document object and it will always be there.

第二个方法不起作用，因为在第一个ajax响应之后，DOM被重新创建，. ajaxstart甚至绑定都丢失了。将它与全局文档对象绑定，它将始终存在。

#2

Yes the above answer should help you. Basically there is a Jquery API which will take care of any ajax request made from client to server. So when you do any ajax operation it will call trigger the function. You can put your custom css/images or some function which you can call as indicator on ajax operation.

是的，以上的答案应该会对你有所帮助。基本上有一个Jquery API可以处理从客户端到服务器的任何ajax请求。所以当你做任何ajax操作时它都会调用触发器。您可以将自定义的css/图像或某个函数放在ajax操作上作为指示符调用。