Introduzione

Usare HTMX con ASP.NET Core è un ottimo modo per costruire applicazioni web dinamiche con JavaScript minimale. L'HTMX vi permette di aggiornare parti della vostra pagina senza riloadare la pagina intera , rendendo la vostra applicazione più reattiva e interattiva

E' quello che chiamavo 'hybrid' design web dove rendere la pagina usando il server in modo completo, e poi usare HTMX per aggiornare dinamicamente le parti della pagina.

In questo articolo, I' vi mostrerò come cominciare con HTMX in un'application ASPM SK2NET Core

Prerequisite

HTMX - Htmx è un pacco di JavaScript il modo più semplice per includerlo nel vostro progetto è usare un CDN Qui. )

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

Si può anche scaricare una copia e includerla 'manualmenteM SK1 (o usare LibMan o npm).

ASP.NET Bits

Mi consiglio anche di installare l'Htmx Tag Helper da Qui.

Questi sono entrambi dei meravigliosi. Khalid Abuhakmeh

dotnet add package Htmx.TagHelpers

E il pacchetto Htmx Nuget da Qui.

 dotnet add package Htmx

L'aiuto della targhetta ti permette di fare questo:

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

Appoggio alternativo.

NOTA: Questo approccio ha un grosso difetto; non produceM SK2non produce un href per il link post . È un problema per l'SEO e la facilità di accessoMSC4 Significa anche che questi link falliranno se HTMX per qualche ragione non caricaMST5no carica Mst6CDN vanno giùM st7

Un approccio alternativo è quello di usare la hx-boost="true" attribute and normal asp.net core tag helpers. Vedete Qui. per ulteriori informazioni su hx-boost M SK1although the docs are a bit sparse). Questo darà fuori un href normale ma sarà intercettato da HTMX e il contenuto caricato dinamicamente.

Quindi come segue:

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

Partiali

HTMX funziona bene con visuali parziali. Si può usare HT MX per caricare una visuale parziale in un contenitore sulla vostra pagina. È fantastico per immagazzinare parti della vostra pagina in modo dinamico senza riloadare la pagina completaM SK2

In questa app abbiamo un contenitore nel file Layout.cshtml che vogliamo caricare una vista parziale in.

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

    </div>

Normalmente rende il contenuto laterale del server ma usando l'aiuto HTMX sulla targhetta potete vedere che ci si mira. hx-target="#contentcontainer" che carica la vista parziale nel contenitore.

Nel nostro progetto abbiamo la vista parziale BlogView che vogliamo caricare nel contenitore.

Poi nel Controller del Blog abbiamo

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

Potete vedere qui che abbiamo la HTMX Request.IsHtmx() metodoM SK2 questo restituirà la verità se la richiesta è una HT MX request . Se lo è restituiamo l'immagine parzialeMNK4 se non restituiamo la visione completaMRK5

Usando questo possiamo assicurarci che supportiamo anche la ricerca diretta con pochi sforzi reali.

In questo caso la nostra visione completa si riferisce a questa partiale:

@model Mostlylucid.Models.Blog.BlogPostViewModel

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

E quindi ora abbiamo un modo super semplice per caricare le immagini parziali nella nostra pagina usando HTMX.