Inleiding

Het gebruik van HTMX met ASP.NET Core is een geweldige manier om dynamische webapplicaties te bouwen met minimale JavaScript. HTMX kunt u delen van uw pagina te updaten zonder een volledige pagina herladen, waardoor uw toepassing voelen meer responsief en interactief.

Het is wat ik gebruikte om 'hybride' webdesign te noemen waar je de pagina volledig maakt met behulp van server-side code en dan gebruik HTMX om delen van de pagina dynamisch bij te werken.

In dit artikel laat ik je zien hoe je kunt beginnen met HTMX in een ASP.NET Core applicatie.

Vereisten

HTMX - Htmx is een JavaScript pakket de gemakkelijke manier om het op te nemen in uw project is om een CDN te gebruiken. (Zie Hier. )

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

U kunt natuurlijk ook een kopie downloaden en deze 'handmatig' meenemen (of LibMan of npm gebruiken).

ASP.NET Bits

Ik adviseer ook het installeren van de Htmx Tag Helper van Hier.

Deze zijn allebei 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.

OPMERKING: Deze aanpak heeft een groot nadeel; het produceert geen href voor de post link. Dit is een probleem voor SEO en toegankelijkheid. Het betekent ook dat deze links zullen falen als HTMX om de een of andere reden niet laadt (CDN's DO gaan naar beneden).

Een andere benadering is het gebruik van de hx-boost="true" attribuut en normale asp.net core tag helpers. Zie Hier. voor meer info over hx-boost (hoewel de docs een beetje schaars zijn). Dit zal een normale href uitvoeren, maar zal worden onderschept door HTMX en de inhoud dynamisch geladen.

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>

Gedeeltelijke

HTMX werkt goed met gedeeltelijke weergaven. U kunt HTMX gebruiken om een gedeeltelijke weergave in een container op uw pagina te laden. Dit is geweldig voor het dynamisch laden van delen van uw pagina zonder een volledige pagina herladen.

In deze app hebben we een container in het Layout.cshtml bestand waar we een gedeeltelijke weergave in willen laden.

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

    </div>

Normaal maakt het de server zijde inhoud, maar met behulp van de HTMX tag helper over u kunt zien dat we targe hx-target="#contentcontainer" die de gedeeltelijke weergave in de container zal laden.

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

Dan in de Blog Controller hebben we

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

U kunt hier zien dat we de HTMX Request.IsHtmx() methode hebben, dit zal waar terugkeren als het verzoek een HTMX verzoek is. Als we de gedeeltelijke weergave teruggeven, dan geven we de volledige weergave terug.

Met behulp hiervan kunnen we ervoor zorgen dat we ook direct vragen ondersteunen met weinig echte inspanning.

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"/>

En dus hebben we nu een super eenvoudige manier om gedeeltelijke weergaven in onze pagina te laden met behulp van HTMX.