Inleiding

Het gebruik van HTMX met ASP.NET Core is een geweldige manier om dynamische web-applicaties te bouwen met minimale JavaScript. HT MX laat toe dat je delen van je pagina kunt updaten zonder de hele pagina opnieuw te ladenM SK2 waardoor je applicatie meer responsief en interactief voelt.

Het is wat ik noemde 'hybriden' webdesign, waarbij je de pagina volledig met behulp van servers weergeeft en HTMX gebruikt om delen van de pagina dynamisch te updaten.

In dit artikel zal ik jullie laten zien hoe je begint met HTMX in een ASP-applicatie.

Voorwaarden

HTMX - Htmx is een JavaScript pakket, de makkelijkste manier om het in je project te betrekken is een CDN te gebruiken. Hier. )

<script src="https://unpkg.com/[email protected]" integrity="sha384-QWGpdj554B4ETpJJC9z+ZHJcA/i59TyjxEPXiiUgN2WmTyV5OEZWCD6gQhgkdpB/" crossorigin="anonymous"></script>

Je kan natuurlijk ook een kopie downloaden en erin betrekken 'manueelM SK1 (of LibMan of npm). gebruiken.

ASP.NET Bits

Ik raad ook aan om de Htmx Tag Helper te installeren. Hier.

Deze twee zijn van de prachtige Khalid Abuhakmeh

dotnet add package Htmx.TagHelpers

En het Htmx Nuget pakket van Hier.

 dotnet add package Htmx

De tag helper laat je dit doen:

    <a hx-controller="Blog" hx-action="Show" hx-push-url="true" hx-get hx-target="#contentcontainer" hx-route-slug="@Model.Slug"
        class="block font-body text-lg font-semibold text-primary transition-colors hover:text-green dark:text-white dark:hover:text-secondary">@Model.Title</a>

Alternatieve aanpak.

NOTA: Deze aanpak heeft één groot drawback; het produceert geen href voor de postlinkM SK3 Dit is een probleem voor SEO en toegankelijkheidMSC4 Het betekent ook dat deze links zullen falen als HTMX om een of andere reden niet laadt ' het laads niet ≥( CDN's DO gaan naar beneden

Een alternatieve aanpak is het gebruik van de hx-boost="true" attribute en normale asp.net core tag helpers. Zie Hier. om meer informatie te krijgen over hx-boost ( hoewel de docs een beetje ruw zijn. Dit geeft een normale href uit, maar wordt door HTMX geintercepteerd en de inhoud dynamisch gelaad.

Dus als volgt:

 <a asp-controller="Blog" asp-action="Show" hx-boost="true"  hx-target="#contentcontainer" asp-route-slug="@Model.Slug"
       class="block font-body text-lg font-semibold text-primary transition-colors hover:text-green dark:text-white dark:hover:text-secondary">@Model.Title</a>

Voordelen

HTMX werkt goed met gedeeltelijke aansigten. Je kan HT MX gebruiken om een gedeeltelijk aanzicht in een container te laden op je pagina. Dit is geweldig voor het dynamisch laden van delen van je pagina zonder een volledige pagina herlaaien .

In deze app hebben we een container in de Layout.cshtml-file die we een gedeeltelijke kijk in moeten laden.

    <div class="container mx-auto" id="contentcontainer">
   @RenderBody()

    </div>

Normaal gesproken geeft het de serverside-inhoud weer, maar met behulp van de HTMX tag helper kun je zien dat we het doel bereiken. hx-target="#contentcontainer" Die zal het gedeeltelijke beeld in de container laden.

In ons project hebben we de BlogView gedeeltelijke kijk die we in de container willen laden.

Dan hebben we in de Blog Controller

    [Route("{slug}")]
    [OutputCache(Duration = 3600)]
    public IActionResult Show(string slug)
    {
       var post =  blogService.GetPost(slug);
       if(Request.IsHtmx())
       {
              return PartialView("_PostPartial", post);
       }
       return View("Post", post);
    }

Hier zie je dat we de HTMX-request hebben.IsHtmx()methodeM SK2 dit zal waar zijn als het een HT MX-requête is.

Door dit te gebruiken kunnen we ervoor zorgen dat we ook directe vragen ondersteunen met weinig echte moeite.

In dit geval verwijst onze volledige visie naar deze gedeeltelijke:.

@model Mostlylucid.Models.Blog.BlogPostViewModel

@{
ViewBag.Title = "title";
Layout = "_Layout";
}
<partial name="_PostPartial" model="Model"/>

We hebben nu een super eenvoudige manier om gedeeltelijke aansigten in onze pagina te laden met behulp van HTMX.