ASP.NET Core nie oferowa\u0142o paginacji \u201ez pude\u0142ka\u201d. I chyba nadal nie oferuje, bo samouczek Microsoftu dla .NET7 nadal pokazuje w\u0142asn\u0105 implementacj\u0119<\/a>. Jest ona o tyle pouczaj\u0105ca, co bardzo nieu\u017cyteczna. Implementacja w takiej postaci w aplikacji webowej oznacza ka\u017cdorazowo modyfikacj\u0119 kodu z wielu miejscach. Dlatego proponuj\u0119 wykona\u0107 prac\u0119 raz, ale w taki spos\u00f3b, aby \u0142atwo j\u0105 zastosowa\u0107 do dowolnej kolekcji. Wykonamy w\u0142asny tag helper<\/em>. Do wykorzystanie go w widoku, b\u0119dzie potrzebna jedna linijka kodu.<\/p>\n\n\n\n Na pocz\u0105tek potrzebujemy reprezentacji nawigacji do naszej listy. B\u0119dzie ona zawiera\u0142a w\u0142a\u015bciwo\u015bci potrzebne do generowania klawiszy nawigacji.<\/p>\n\n\n\n Nast\u0119pnie zdefiniujemy obiekt listy. Generyczny parametr b\u0119dzie mo\u017cna zast\u0105pi\u0107 typem odpowiednim w konkretnej aplikacji (np. GlassesFrame<\/em>). Tu b\u0119dzie logika odpowiedzialna za ustawienie warto\u015bci w\u0142a\u015bciwo\u015bci paginacji. PagedList <\/em>jak na przyzwoity obiekt przysta\u0142o sam zadba o utworzenie egzemplarza (linia 19, metoda By\u0142o ju\u017c o tym, \u017ce obiekt PagedList<\/em>, sam policzy sobie warto\u015bci potrzebne do generowania stronicowania (CurrentPage, HasPrevious itd). Wr\u00f3cimy do tego, sk\u0105d bierze potrzebne do tego informacje? Na razie wiemy, \u017ce przechowuje sw\u00f3j stan. Skoro tak, to mo\u017cemy u\u017cy\u0107 go do przygotowania customowego Tag helpera. Robi si\u0119 to w obiekcie dziedzicz\u0105cym po abstrakcyjnej klasie TagHelper<\/em>. Obiekt tag helpera (z grubsza, bo wyci\u0105\u0142em to co w tym momencie zb\u0119dne) wygl\u0105da tak, jak ni\u017cej. \u0141atwo si\u0119 zorientowa\u0107, \u017ce nazwa tagu to pierwszy cz\u0142on nazwy obiektu PagingTagHelper<\/em>, a atrybuty s\u0105 mapowane na w\u0142a\u015bciwo\u015bci. W ten spos\u00f3b kiedy proces renderuj\u0105cy stron\u0119 natrafi na tag Potem uruchamiana jest metoda Process()<\/em>, ktora w kolejnych krokach buduje obiekt TagHelperOutput<\/em>. Jeden z tych krok\u00f3w pokazuje listing poni\u017cej. Obiekt TagHelperOutput<\/em> zawiera w\u0142a\u015bciwo\u015b\u0107 TagHelperContent:Content<\/em>, kt\u00f3ra z kolei ma metod\u0119 rozszerzaj\u0105c\u0105 AppendHtml()<\/em>. Budowanie htmla polega na wywo\u0142ywaniu metody AppendHtml() <\/em>przyjmuj\u0105cej enkodowany html. Metod\u0119 AppendHtml()<\/em> wywo\u0142uje si\u0119 wielokrotnie 'doklejaj\u0105c\u2019 kawa\u0142ki htmla. Na zako\u0144czenie metoda Process() <\/em>zwraca wynik do silnika Razor. W ten spos\u00f3b kolejno budowane s\u0105 klawisze nawigacji. <\/p>\n\n\n\n Powy\u017cej jest kod jednej z prywatnych metod naszego tag helpera, pokazuj\u0105ca jak budowany jest kod html. Metoda generuje przyciski z numerami stron 1, 2 do 7 Je\u015bli stron jest wi\u0119cej ni\u017c 7, to wida\u0107 tylko 7 numerowanych klawiszy i symbol \u2026 Klasa PaginationTagHelper <\/em>wyposa\u017cona jest oczywi\u015bcie w konstruktor i przeznaczona do pracy z kontenerem Dependency Injection. LinkGenerator <\/em>jest dost\u0119pny automatycznie i udost\u0119pniany w przestrzeni nazw Microsoft.AspNetCore.Routing<\/em>. Natomiast domy\u015bln\u0105 implementacj\u0119 IHttpContextAccessor <\/em>nale\u017cy zarejestrowa\u0107 To ju\u017c prawie koniec, ale ca\u0142y czas nie mamy danych, kt\u00f3re b\u0119d\u0105 stronicowane. To niedopatrzenie rozwi\u0105zuje si\u0119 w warstwie aplikacji odpowiedzialnej za persystencj\u0119 danych. Tam budujemy PagedList<\/em> w oparciu o dane z kontrolera (pageSize, pageNumber) i dane z bazy.<\/p>\n\n\n\npublic interface IPagination\n{\n int CurrentPage { get; }\n int TotalPages { get; }\n int PageSize { get; }\n int TotalCount { get; }\n bool HasPrevious { get; }\n bool HasNext { get; }\n}<\/code><\/pre><\/div>\n\n\n\nCreate()<\/code>). Metoda bierze parametry strony (numer i ilo\u015b\u0107 rekord\u00f3w) oraz \u017ar\u00f3d\u0142o danych jako IQueryableIQueryable<\/code> powinien by\u0107 tak zaimplementowany przez Data Provider, \u017ceby kwerenda by\u0142a generowana dopiero po zdefiniowaniu zapytania Linq i wywo\u0142aniu polecenia materializacji wynik\u00f3w (linia 21, polecenie Count()<\/code>). Oznacza to, \u017ce Linq-to-SQL przeanalizuje wyra\u017cenie i nie wykona przeliczenia kolekcji \u015bci\u0105gni\u0119tej z serwera, tylko zoptymalizuje zapytanie. To serwer SQL policzy, ile mamy r\u00f3\u017cnych oprawek do okular\u00f3w i zwr\u00f3ci warto\u015b\u0107 skalarn\u0105.
Napisa\u0142em \u201epowinno\u201d, bo to nie my mamy kontrol\u0119 nad implementacj\u0105 interfejsu, a dostawca Data Providera. My mo\u017cemy tylko liczy\u0107, \u017ce kontrakt (interfejs) b\u0119dzie wykonany. Spokojnie, je\u015bli to b\u0119dzie Entity Framework<\/em>, to nie mamy czego si\u0119 obawia\u0107 ;). Z wywodu mo\u017cna wysnu\u0107 wniosek (prawid\u0142owy), \u017ce nie ma jednego Linq. Linq zale\u017cy od \u017ar\u00f3d\u0142a danych, na kt\u00f3rym operuje wyra\u017cenie.
To jest klasa PagedList<\/em><\/p>\n\n\n\nusing System.Collections.Generic;\nusing System.Linq;\n\npublic class PagedList
W aplikacjach MVC du\u017c\u0105 rol\u0119 odgrywaj\u0105 konwencje. Dotyczy to tak\u017ce mapowania atrybut\u00f3w tagu z kodzie html na w\u0142a\u015bciwo\u015bci obiektu tag helpera. Nie ma silnego typowania, r\u00f3\u017cne j\u0119zyki, trzeba sobie jako\u015b radzi\u0107\u2026 Wywo\u0142anie tag helpera b\u0119dzie wygl\u0105da\u0142o tak:<\/p>\n\n\n\n<paging <\/strong>pagination=\"@Model\" first-page-text<\/strong>=\"Pierwsza\" last-page-text<\/strong>=\"Ostatnia\" controller<\/strong>=\"FramesController\" action<\/strong>=\"GetFrames\"><\/paging<\/strong>><\/code><\/p>\n\n\n\npublic class PagingTagHelper : TagHelper\n{\n public IPagination Pagination { get; set; }\n public string FirstPageText { get; set; } = "First";\n public string LastPageText { get; set; } = "Last";\n public string Controller { get; set; }\n public string Action { get; set; }\n\n public override void Process(TagHelperContext context, TagHelperOutput output)\n {\n BuildMainTag(output);\n BuildFirstLastPageButton(FirstPageText, 1, Pagination.CurrentPage == 1, output);\n BuildFirstLastPageButton(@"\u00ab", Pagination.CurrentPage - 1, Pagination.CurrentPage == 1, output);\n BuildPageButtons(Pagination.CurrentPage, Pagination.TotalPages, output);\n BuildFirstLastPageButton(@"\u00bb", Pagination.CurrentPage + 1, Pagination.CurrentPage == Pagination.TotalPages, output);\n BuildFirstLastPageButton(LastPageText, Pagination.TotalPages, Pagination.CurrentPage == Pagination.TotalPages, output);\n }\n}<\/code><\/pre><\/div>\n\n\n\nprivate void BuildPageButtons(int pageNumber, int totalPages, TagHelperOutput output)\n{\n if (totalPages < 8)\n {\n for (var i = 1; i <= totalPages; i++)\n {\n BuildPageButton(pageNumber, i, output);\n }\n }\n else\n {\n BuildSpacerButton(Pagination.HasPrevious, output);\n for (var i = Math.Max(1, pageNumber - 2); i <= Math.Min(totalPages, pageNumber + 2); i++)\n {\n BuildPageButton(pageNumber, i, output);\n }\n BuildSpacerButton(Pagination.HasNext, output);\n }\n}<\/code><\/pre><\/div>\n\n\n\n
Efekt wygl\u0105da tak:<\/p>\n\n\n![\"\"](\"https:\/\/blog.adameczek.pl\/wp-content\/uploads\/2023\/01\/paginacja-nawigacja-1.jpg\")
![\"\"](\"https:\/\/blog.adameczek.pl\/wp-content\/uploads\/2023\/01\/paginacja-nawigacja7.jpg\")
services.AddSingleton
Tag helper trzeba zaimportowa\u0107 do widok\u00f3w dyrektyw\u0105 @addTagHelper<\/strong> (najcz\u0119\u015bciej robi si\u0119 to w pliku '_ViewImports.cshtml\u2019).
Ca\u0142y kod jest poni\u017cej:<\/p>\n\n\n\nusing Microsoft.AspNetCore.Http;\nusing Microsoft.AspNetCore.Mvc.Rendering;\nusing Microsoft.AspNetCore.Razor.TagHelpers;\nusing Microsoft.AspNetCore.Routing;\n\npublic class PaginationTagHelper : TagHelper\n{\n private IPagination Pagination { get; set; }\n public string FirstPageText { get; set; } = "First";\n public string LastPageText { get; set; } = "Last";\n public string Controller { get; set; }\n public string Action { get; set; }\n\n private readonly LinkGenerator _linkGenerator;\n private readonly IHttpContextAccessor _contextAccessor;\n public PaginationTagHelper(LinkGenerator linkGenerator, IHttpContextAccessor contextAccessor)\n {\n _linkGenerator = linkGenerator;\n _contextAccessor = contextAccessor;\n }\n public override void Process(TagHelperContext context, TagHelperOutput output)\n {\n BuildMainTag(output);\n BuildFirstLastPageButton(FirstPageText, 1, Pagination.CurrentPage == 1, output);\n BuildFirstLastPageButton(@"\u00ab", Pagination.CurrentPage - 1, Pagination.CurrentPage == 1, output);\n BuildPageButtons(Pagination.CurrentPage, Pagination.TotalPages, output);\n BuildFirstLastPageButton(@"\u00bb", Pagination.CurrentPage + 1, Pagination.CurrentPage == Pagination.TotalPages, output);\n BuildFirstLastPageButton(LastPageText, Pagination.TotalPages, Pagination.CurrentPage == Pagination.TotalPages, output);\n }\n\n private static void BuildMainTag(TagHelperOutput output)\n {\n output.TagName = "ul";\n output.Attributes.Add("class", "pagination");\n output.Attributes.Add("aria-label", "Stronicowanie");\n }\n\n private void BuildFirstLastPageButton(string pageText, int pageNumber, bool disabled, TagHelperOutput output)\n {\n var li = new TagBuilder("li");\n li.Attributes.Add("class", disabled ? "page-item disabled" : "page-item");\n li.Attributes.Add("aria-label", pageText);\n li.TagRenderMode = TagRenderMode.StartTag;\n output.Content.AppendHtml(li);\n\n var path = _linkGenerator.GetPathByAction(_contextAccessor.HttpContext, Action, Controller, new {pageNumber, pageSize = Pagination.PageSize});\n var link = $@"{pageText}<\/a>";\n output.Content.AppendHtml(link);\n output.Content.AppendHtml("<\/li>");\n }\n\n private void BuildPageButtons(int pageNumber, int totalPages, TagHelperOutput output)\n {\n if (totalPages < 8)\n {\n for (var i = 1; i <= totalPages; i++)\n {\n BuildPageButton(pageNumber, i, output);\n }\n }\n else\n {\n BuildSpacerButton(Pagination.HasPrevious, output);\n for (var i = Math.Max(1, pageNumber - 2); i <= Math.Min(totalPages, pageNumber + 2); i++)\n {\n BuildPageButton(pageNumber, i, output);\n }\n BuildSpacerButton(Pagination.HasNext, output);\n }\n }\n\n private void BuildPageButton(int pageNumber, int buttonNumber, TagHelperOutput output)\n {\n var li = new TagBuilder("li");\n li.Attributes.Add("class", buttonNumber == pageNumber ? "page-item active" : "page-item");\n li.Attributes.Add("aria-label", buttonNumber.ToString());\n li.TagRenderMode = TagRenderMode.StartTag;\n output.Content.AppendHtml(li);\n \n var path = _linkGenerator.GetPathByAction(_contextAccessor.HttpContext, Action, Controller, new {pageNumber = buttonNumber, pageSize = Pagination.PageSize});\n var link = $@"{buttonNumber}<\/a>";\n output.Content.AppendHtml(link);\n output.Content.AppendHtml("<\/li>");\n }\n\n private static void BuildSpacerButton(bool isVisible, TagHelperOutput output)\n {\n const string span = @"...<\/span>";\n\n if (!isVisible) return;\n \n var li = new TagBuilder("li");\n li.Attributes.Add("class", "page-item disabled");\n li.Attributes.Add("aria-hidden", bool.TrueString);\n li.TagRenderMode = TagRenderMode.StartTag;\n output.Content.AppendHtml(li);\n output.Content.AppendHtml(span);\n output.Content.AppendHtml("<\/li>");\n }\n}<\/code><\/pre><\/div>\n\n\n\npublic PagedList