# HTMX- ja ASP.NET Core -palkkauksen lisääminen TagHelperin avulla

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

## Esitys

Nyt, kun minulla on joukko blog posts, kotisivu oli melko pitkä, joten päätin lisätä sähköpostimekanismin blog-posteille.

Tämä liittyy siihen, että lisätään täydellinen Caching blog-posteille tehdäksemme siitä nopean ja tehokkaan paikan.

Ks. [blogipalvelun lähde](https://github.com/scottgal/mostlylucidweb/blob/main/Mostlylucid/Services/Markdown/MarkdownBlogService.cs) siitä, miten tämä toteutetaan; se ' on todellakin varsin yksinkertainen käyttäen IMemoryCachea

[TOC]

### TagHelper

Päätin käyttää TagHelperiä panemaan täytäntöön paging-mekanismin. Tämä on erinomainen tapa kapulata paging logiikka ja tehdä siitä uudelleenkäytettävä.
Siinä käytetään [Pageerointi taghelper Darrel O'Neillilta ](https://github.com/darrel-oneil/PaginationTagHelper) tämä sisältyy hankkeeseen nuget-pakettina.

Tämän jälkeen lisätään _ViewImports.cshtml-tietokanta, joten se on kaikkien näkemysten käytettävissä

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

### TagHelper

Siinä _BlogSummaryList.cshtml osittainen katsaus Olen lisännyt seuraavan koodin, jotta voimme esittää yhteydenottomekanismin.

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

Muutamat merkittävät asiat täällä:

1. `link-url` Tämä antaa taghelperille mahdollisuuden tuottaa oikean URL:n verkkovierailulinkkeille. HomeController Index -menetelmässä tämä on asetettu kyseiselle toiminnalle

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

Ja blogin hallinnassa

```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);
    }
```

Tämä on asetettu URl:lle. Sillä varmistetaan, että sivuutumisavun käyttäjä voi työskennellä kummankin huipputasoisen menetelmän kanssa.

### HTMX-ominaisuuksia

`hx-boost`, `hx-push-url`, `hx-target`, `hx-swap` ne ovat kaikki HTMX-ominaisuuksia, jotka sallivat puhelujen toimivuuden HT MX.

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

Here we use `hx-boost="true"` Tämä mahdollistaa sen, että paginaation taghelper ei tarvitse mitään muutoksia pysäyttämällä sen normalisen URL:n luomista ja käyttämällä nykyistä URL:tä.

`hx-push-url="true"` varmistaa, että URL:tä vaihdetaan hakukoneessa'URL-historiaan M SK1, joka mahdollistaa suoran linkauksen sivuihin

`hx-target="#content"` tämä on tavoite div, joka korvataan uudella sisällöllä.

`hx-swap="show:none"` tämä on vaihtovaikutus, jota käytetään, kun sisältö korvataan. Tässä tapauksessa se estää tavanomaisen 'jump' vaikutuksen, jonka HTMX käyttää vaihtaessaan sisältöäM SK3

#### CSS

Olen myös lisännyt mainin stylejä .css:ssäni, jonka ansiosta voin käyttää Tailwind CSS-kursseja paginaatiolinkkeihin.

```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;
}

```

### Valvoja

`page`, `page-size`, `total-items` ovat sellaiset ominaisuudet, joita pagination taghelper käyttää luomaan hakulinkkiä.
Ne siirretään osittaiseen valvontaan.

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

### blogipalvelu

Siihen sivu ja sivukoko siirretään URL:stä, ja kokonaismäärä lasketaan blog-palvelusta.

```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;
    }
```

Here we simply get the posts from the cache, order them by date and then skip and take the correct number of posts for the page

### Päätelmät

Tämä oli yksinkertainen lisä sivustolle, mutta se tekee siitä paljon käyttökelpoisemman. HTMX-integraatio tekee sivustosta responsivemmän ilman, että siihen lisätään lisää JavaScriptia.