Inleiding

Nu när jag har ett antal bloggar så började hemsidan bli mer lång, så jag bestämde mig för att lägga till en webbing för bloggar.

Detta går tillsammans med att lägga till full caching för bloggposter för att göra detta till en snabb och effektiv sida.

Se den Blog Service källa för hur detta implementeras.

TagHelper

Jag bestämde mig för att använda en TagHelper för att implementera banningmekanismen. Det här är ett bra sätt att inskapa banningslogiken och göra den återanvändbar Det här använder pagination taghelper från Darrel O'Neill detta är inbegript i projektet som ett nugetpaket.

Detta lägger sedan till _ViewImportar.cshtml-Datei så att den är tillgänglig för alla synpunkter

@addTagHelper *,PaginationTagHelper.AspNetCore

TagHelper

I _BlogSummaryList.cshtml partiell syn Jag lade till following code to render the paging mechanism

<pager link-url="@Model.LinkUrl"
       hx-boost="true"
       hx-push-url="true"
       hx-target="#content"
       hx-swap="show:none"
       page="@Model.Page"
       page-size="@Model.PageSize"
       total-items="@Model.TotalItems" ></pager>

Några anmärkningsvärda saker här

1. link-url det låter taghjältaren generera den korrekta url för webb länkarna. I HomeController Index-metoden är detta ställt till den handlingen

   var posts = blogService.GetPostsForFiles(page, pageSize);
   posts.LinkUrl= Url.Action("Index", "Home");
   if (Request.IsHtmx())
   {
      return PartialView("_BlogSummaryList", posts);
   }

Och i bloggreglern

    public IActionResult Index(int page = 1, int pageSize = 5)
    {
        var posts = blogService.GetPostsForFiles(page, pageSize);
        if(Request.IsHtmx())
        {
            return PartialView("_BlogSummaryList", posts);
        }
        posts.LinkUrl = Url.Action("Index", "Blog");
        return View("Index", posts);
    }

Detta är ställt till att URl. Det här gör att paginationsassistenten kan fungera för antingen högsta-nivån metod

HTMX Properties

hx-boost, hx-push-url, hx-target, hx-swap dessa är alla HTMX-eigenheter som gör det möjligt att byta med HT MX.

     hx-boost="true"
       hx-push-url="true"
       hx-target="#content"
       hx-swap="show:none"

Här använder vi hx-boost="true" det låter paginationstaghelparen inte behöva några ändringar genom att interceptera den normala URL generationen och använda den nuvarande URL.

hx-push-url="true" för att säkerställa att URL: s bytes i webbläsaren

hx-target="#content" det här är den måldefinierade div som ersätters med den nya innehållet.

hx-swap="show:none" det här är byteseffekten som kommer att användas när innehållet ersätters.

CSS

Jag lade också in stiler till huvuden.css i mitt /src katalog, vilket möjliggör för mig att använda Tailwind CSS-kurserna för webbsida länkarna

.pagination {
    @apply py-2 flex list-none p-0 m-0 justify-center items-center;
}

.page-item {
    @apply mx-1 text-black  dark:text-white rounded;
}

.page-item a {
    @apply block rounded-md transition duration-300 ease-in-out;
}

.page-item a:hover {
    @apply bg-blue-dark text-white;
}

.page-item.disabled a {
    @apply text-blue-dark pointer-events-none cursor-not-allowed;
}

Controller

page, page-size, total-items är egenskaperna som paginationstaghelparen använder för att generera webb länkarna. De skickas in i den partiella bilden från kontrollen.

 public IActionResult Index(int page = 1, int pageSize = 5)

Blogtjänster

Här går sidan och sidanbredd in från URL och totala element räknas från bloggtjänsterna.

    public PostListViewModel GetPostsForFiles(int page=1, int pageSize=10)
    {
        var model = new PostListViewModel();
        var posts = GetPageCache().Values.Select(GetListModel).ToList();
        model.Posts = posts.OrderByDescending(x => x.PublishedDate).Skip((page - 1) * pageSize).Take(pageSize).ToList();
        model.TotalItems = posts.Count();
        model.PageSize = pageSize;
        model.Page = page;
        return model;
    }

Här får vi bara meddelanden från cachet, ordna dem efter datum och sen hoppa över och ta den korrekta antalet meddelanden för sidan.

Slutsatsen

Det var en enkel tillsats till hemsidan men den gör den mycket mer användbar.. HTMX-integrationen gör att hemsidan känns mer responsiv utan att lägga till mer JavaScript på hemsidan.