# Att lägga till Paging med HTMX och ASP.NET Core med TagHelper

<!--category-- ASP.NET, HTMX -->
<datetime class="hidden">2024-08-09T12:50</datetime>

## 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](https://github.com/scottgal/mostlylucidweb/blob/main/Mostlylucid/Services/Markdown/MarkdownBlogService.cs) för hur detta implementeras.

[TOC]

### 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 ](https://github.com/darrel-oneil/PaginationTagHelper) 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

```razor
@addTagHelper *,PaginationTagHelper.AspNetCore
```

### TagHelper

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

```razor
<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

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

Och i bloggreglern

```csharp
    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.

```razor
     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

```css
.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.

```csharp
 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.

```csharp
    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.