Inleiding

Att använda HTMX med ASP.NET Core är ett bra sätt att bygga webapplikationer med minimal JavaScript

Det är vad jag brukade kalla ', hybrid, ', webdesign , där du renderar sidan fullkomligt med hjälp av servern, -, sidakod och sedan använder HTMX för att uppdatera delar av sidan

I denna artikel kommer jag att visa hur man börjar med HTMX i en ASP-version.

Förberedelser

HTMX - Htmx är ett JavaScript-paket, det enklaste sättet att inkludera det i ditt projekt är att använda en CDN här )

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

Du kan naturligtvis också ladda ner en kopia och inkludera den 'manuellt' (eller använda LibMan eller npmM SK3

ASP.NET-biter

Jag rekommenderar också att installera Htmx Tag Helper från här

De två är från den underbara Khalid Abuhakmeh

dotnet add package Htmx.TagHelpers

Och Htmx Nuget-paketet från här

 dotnet add package Htmx

Begreppet tag helper låter dig göra detta.

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

Alternativ tillvägagångssätt.

NOTA: Det här tillvägagångssättet har en stor nackdel ; det producerar inget href för postlinken M SK3 Det är ett problem för SEO och tillgänglighet . Det betyder också att dessa länkar kommer att misslyckas om HTMX av någon anledning inte loadar MSC6 CDNs går ner

Ett annat sätt är att använda hx-boost="true" attribut and normal asp.net core tag helpers. Se här för mer information om hx-boost (men dokumenten är lite grova Detta kommer att skicka ut en normal href men kommer att intercepteras av HTMX och innehållet lades dynamiskt.

Så som här::

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

Delpartier

HTMX fungerar bra med partiella bilder. Du kan använda HT MX för att ladda en partiell bild in i en behållare på din sida

I den här appen har vi en behållare i Layout.cshtml-filet som vi vill ladda upp en partiell bild i

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

    </div>

Vanligtvis renderar den serverseitiga innehållet men med hjälp av HTMX-tagassistenten kan du se att vi målar hx-target="#contentcontainer" som lader in den delliga bilden i behållaren.

I vårt projekt har vi en partiell bild av BlogView som vi vill ladda in i behållaren.

Sedan i Blog Controller har vi

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

Här kan ni se att vi har HTMX-Ansökan.IsHtmx()metodenM SK2 det här kommer återvända sant om begäran är en HT MX-ansökan

Med det här kan vi försäkra oss om att vi även stödjer direkt sökningar med lite verklig ansträngning

I det här fallet är vår fulla syn på detta partiella

@model Mostlylucid.Models.Blog.BlogPostViewModel

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

Så nu har vi ett super enkelt sätt att ladda partiella seder till vår sida med hjälp av HTMX.