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 siitä, miten tämä toteutetaan; se ' on todellakin varsin yksinkertainen käyttäen IMemoryCachea

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

@addTagHelper *,PaginationTagHelper.AspNetCore

TagHelper

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

<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

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

Ja blogin hallinnassa

    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.

     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.

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

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

blogipalvelu

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

    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.