#11 Sortowanie i paginacja | Kurs ASP.NET MVC 5

Posted on by 0 comment

Niedawno zaimplementowaliśmy w naszej aplikacji wyszukiwarkę, poniżej zajmiemy się sortowaniem oraz paginacją. Paginacja jest to podział obszernej listy elementów na mniejsze zbiory, które są wyświetlane na stronie.

Niech wynikiem wyszukiwania będzie 50 aut, gdyby wyświetlić je wszystkie na stronie głównej, efekt będzie mało przejrzysty i nie zachęcający do zagłębienia się w wynik wyszukiwania, ale gdy tą samą listę wyświetlimy w pięciu mniejszych listach po dziesięć egzemplarzy, dla których dostarczymy nawigację z numerami stron, dane staną się atrakcyjniejsze dla użytkownika.

Przygotowanie środowiska

Za pomocą akcji Create dodajmy dane do bazy tak, aby było w niej około 10 krotek.

Dane w tabeli Cars - Kurs ASP.NET MVC 5

Dane w tabeli Cars – Kurs ASP.NET MVC 5

Implementacja sortowania

Trudno wyobrazić sobie funkcjonalny serwis, który nie prezentuje danych w wygodny sposób dla użytkownika, aby ułatwić obsługę serwisu klientom zaimplementujmy na powyższym zbiorze funkcje sortującą. Umożliwmy użytkownikom sortowanie danych po kolumnie Price i Model.

Zastępujemy dwie akcje Index w kontrolerze Cars2 następującą akcją:

Musimy także zmodyfikować lekko nasz widok Index.cshtml, a konkretnie nagłówek tabeli:

Jak to działa?

Akcja może przyjąć dwa parametry:

  • string sortowanie – informuje, po jakim polu i w jakiej kolejności użytkownik żąda sortowania
  • SzukajAuta Model – parametry, po których użytkownik chce przeszukać dane w bazie.

Kolumny tabeli ModelPrice są teraz hiperłączami, które przesyłają do kontrolera wartość w postaci zmiennej sortowanie. Gdy nie klikniemy linku w nagłówku, a wywołamy jedynie ‚http://localhost:49377/cars2/Index‚, argument ‚sortowanie‚ przyjmie wartość null, ‚ViewBag.SortByModel‚ przyjmie wartość ‚Model_Malejaco‚, ‚ViewBag.SortByPrice‚ wartość ‚Price_Malejaco‚ i takie wartości zostaną przekazane do widoku, który zbuduje odpowiednie linki.

 

Kliknięcie, któryś z linków spowoduje przechwycenie przez kontroler argumentu ‚sortowanie‚ i dalsze odpowiednie reakcje, informacja o sortowaniu przesyłana jest za pomocą metody GET.

Za sortowanie listy w naszym kontrolerze odpowiedzialna jest konstrukcja switch(), która podejmuje odpowiednie reakcje w zależności od przechwyconego parametru sorowanie‚. W dalszej treści ciała zaimplementowane jest lekko zmodyfikowane przeszukiwanie, którym zajmowaliśmy się w ostatnim artykule. W tej chwili nie mamy możliwości sortowania przefiltrowanych danych, zajmiemy się tym w dalszej części wpisu.

Sortowanie - Kurs ASP.NET MVC 5

Sortowanie – Kurs ASP.NET MVC 5

Paginacja

Użyjemy do tego celu Pagera ‚PagedList.Mvc‚, którego należy zainstalować w Manage NuGet Package for Solution.

Manage NuGet Package for Solution - Kurs ASP.NET MVC 5

Manage NuGet Package for Solution – Kurs ASP.NET MVC 5

PagedList.Mvc - Kurs ASP.NET MVC 5

PagedList.Mvc – Kurs ASP.NET MVC 5

Zmodyfikujmy nasz kontroler na taki, pod nim go opisze:

Akcja Index przechwytuje jedno dodatkowe pole, jest ono numerem strony, którą chcemy wyświetlić.

 

 

W powyższych trzech liniach ustawiamy ilość elementów na stronie, ustawiamy numer strony podczas żądania adresu http://localhost:49377/cars2/Index, kiedy page równa się null, możemy to także obsłużyć poprzez użycie argumentu domniemanego. W ostatniej linii wywołujemy metodę ToPagedList, która przygotowuje kontener danych do paginacji.

Od teraz kontroler będzie przesyłał do widoku informację o sortowaniu oraz argumentach, po których filtrujemy dane:

Dzięki zmiennym ViewBag zbudowanymi powyżej, będziemy mogli budować linki URL, które będą zawierały informację o sortowaniu oraz filtrowaniu np.:

 

Dotychczas, gdy wyszukiwaliśmy dane, wpisywaliśmy wartości do pól tekstowych i wysyłaliśmy zapytanie metodą POST, kontroler w odpowiedzi zwracał odpowiednie dane, gdy po tym kliknęliśmy w nagłówek tabeli np.: Price, przesyłane były tylko dane dotyczące kolejności sortowania, natomiast dane, po których filtrowaliśmy były tracone, dlatego kontroler zwracał wszystkie dane z tabeli Cars. Dzięki powyższym modyfikacjom w widoku poniżej możemy zbudować hiperłącza, które nie tracą tych informacji, poniżej cały plik Index.cshtml:

 

Należy zwrócić uwagę na implementację modelu, przestrzeni nazw oraz stylu .css:

Modyfikację w nagłówku tabeli, które prowadzą do zbudowania hiperłączy przechowujących wyżej wspomniane dane:

Finalnym krokiem jest utworzenie listy nawigacyjnej, tutaj także każdy link niesie ze sobą informacje o sortowaniu i kryteriach filtrowania.

Sortowanie, Paginacja - Kurs ASP.NET MVC 5

Sortowanie, Paginacja – Kurs ASP.NET MVC 5

 

Podsumowanie

Przebrnęliśmy wspólnie przez sortowanie oraz paginację. Są to mechanizmy, bez których ciężko wyobrazić sobie przejrzystą stronę internetową, na której wyświetlane są zbiory danych. Jak widać dzięki przygotowanemu rozszerzeniu, zastosowanie paginacji w naszych projektach nie stanowi większego problemu. Mam nadzieję, że treści zawarte w artykule są zrozumiałe i przyjemnie przedstawione.

Wpis jest częścią kursu ASP.NET MVC 5.

Zapraszam do wpisu na oficjalnej platformie Microsoftu, którym się posiłkowałem

Dodaj komentarz