Esitys

HTMX-järjestelmän käyttö ASP:n kanssa.NET Core on erinomainen tapa rakentaa dynaamisia web- sovelluksia vähimmäisJavaScriptin avulla.

Se on sitä, mitä minä kutsuin ”'” -hybridiksi ja ”'” -verkkosuunnitteluksi, jossa sivua kuvataan täysin käyttäen serveriä ja sivukoodia sekä HTMX:tä sivun osa-alueiden dynaamiseen päivittämiseen.

Tässä artiklassa teille osoitetaan, miten HTMX:tä voidaan ottaa käyttöön ASP-järjestelmässä.

Edellytykset

HTMX - Htmx on JavaScript-paketti, jonka sisällyttäminen hankkeeseen on helppoa käyttämällä CDN:tä täällä )

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

Voitte tietenkin myös ladata kopion ja sisällyttää siihen 'käytännöllisesti katsoenM SK1 (tai käyttää LibMania tai npm).

ASP.NET-bitit

Suosittelen myös Htmx Tag Helperin asentamista täällä

Nämä ovat molemmat Khalid Abuhakmeh

dotnet add package Htmx.TagHelpers

Ja Htmx Nuget-paketti täällä

 dotnet add package Htmx

Tag-apuväline antaa teille tehdä tämän:

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

Vaihtoehtoinen lähestymistapa.

PANEE MERKILLE: Tällä lähestymistavalla on yksi suuri haitta–; se ei tuota href-koodia postlinkille . Tämä on SEO:n ja saatavuuden kannalta ongelmallinen asia. Se tarkoittaa myös sitä, että nämä linkit epäonnistuvat, jos HTMX ei jostakin syystä ladata M SK6 CDN:t menevät alaspäin

Vaihtoehtoinen lähestymistapa on hx-boost="true" attribute ja normal asp.net core tag helpersM SK1 Katso täällä lisätietoa hx-boost (jotta asiakirjat ovat hieman epämääräisiäM SK2 Tämä johtaa normaaliin href-arvoon, mutta HTMX pysäyttää sen ja sisältö laaditaan dynaamisesti.

Näin ollen seuraavasti:

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

Osapuolet

HTMX toimii hyvin osittaisten näkökohtien kanssa. Voitte käyttää HT MX:tä osittaisen näkökohdan laadintamiseen sivustanne konttiin. Tämä on erinomainen tapa ladata sivun osia dynaamisesti ilman, että koko sivu laaditaan uudelleenM SK2

Tässä appissa on kontti Layout.cshtml-fiiliin, johon haluamme laatia osittaisen näkökannan.

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

    </div>

Tavallisesti se renderoi server-puolen sisältöä, mutta käyttämällä HTMX-merkinnän avustajaa voimme nähdä kohdennettavan hx-target="#contentcontainer" , jossa laaditaan osittainen kuva konttiin.

Omassa hankkeessamme meillä on BlogView osittainen kuva, jonka haluamme ladata konttiin.

Sitten meillä on Blog Controllerissa

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

Voitte nähdä, että meillä on HTMX-pyynnön menetelmä.IsHtmx()menetelmä , tämä palaa totuudenmukaiseksi, jos pyynnöstä tulee HT MX-pyynti.

Tämän avulla voimme varmistaa, että myös suorat kysymykset tuetaan vähäisellä todellisella ponnistelulla.

Tässä tapauksessa koko näkemyksemme viittaa tähän osittaiseen

@model Mostlylucid.Models.Blog.BlogPostViewModel

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

Näin ollen meillä on nyt erittäin yksinkertainen tapa ladata osittainen kuva sivuamme käyttämällä HTMX.