Pokaż wskaźnik ładowania Ajax podczas sortowania lub stronicowania ASP.net MVC Webgrid

Question

Mogę łatwo podłączyć webgrid i dodać do niego ajax przy użyciu domyślnych ustawień. Ale jedną rzeczą, z którą walczyłem, aby dowiedzieć się, jest to, jak dodać wskaźnik ładowania, gdy siatka sortuje lub stronicowanie przez ajax.

Istnieje wbudowana funkcja wywołania zwrotnego, która doskonale wyłącza wskaźnik ładowania ajax, ale jak mogę go łatwo włączyć?

Poniżej znajduje się kod, który mam obecnie na moim 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> 

Próbowałem użyć następujących, ale żaden z nich nie zadziałał.

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

Ten działa po raz pierwszy, ale nie będzie działać po siatka robi swój pierwszy ajax odświeżenia.

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

Answer 1

To powinno zadziałać.

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

Twoje drugie podejście nie działa, ponieważ po pierwszej odpowiedzi AJAX, DOM jest ponownie tworzony i .ajaxStart nawet wiązanie jest stracone. Przywiązałem go do globalnego obiektu dokumentu i zawsze tam będzie.

Answer 2

Tak, powyższa odpowiedź powinna ci pomóc. Zasadniczo istnieje Jquery API, który zajmie się każdym żądaniem ajax z klienta na serwer. Więc kiedy wykonasz jakąkolwiek operację ajaxową, wywoła ona wywołanie funkcji. Możesz umieścić swoje niestandardowe css/obrazy lub jakąś funkcję, którą możesz wywołać jako wskaźnik w działaniu ajax.