2012-10-22 7 views
5

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.Pokaż wskaźnik ładowania Ajax podczas sortowania lub stronicowania ASP.net MVC Webgrid

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> 

Odpowiedz

8

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.

+0

Jak mogę to zrobić, jeśli chcę mieć inne elementy strony obsługiwane przez ajax i muszę odróżnić połączenie bezpośrednio od Webgrid? –

+2

Musisz ponownie powiązać obsługę zdarzeń ajax z webgrid za każdym razem, gdy DOM webgrid zostanie zastąpiony przez wywołanie ajax. Tak więc, bez względu na to, co robisz, potrzebujesz jakiejś globalnej obsługi ajaxowej, w której możesz ponownie powiązać wszystkie z nich. Jeśli chcesz rozróżnić połączenie, możesz użyć ukrytych pól, aby śledzić kontrolkę wywołującą wywołanie ajax. – Tariqulazam

1

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.

+0

Jak mogę to zrobić, jeśli chcę mieć inne elementy strony obsługiwane przez ajax i muszę rozróżnić połączenie bezpośrednio z Webgrid? –