# Htmx Asp.Net Coren kanssa

<datetime class="hidden">2024-08-01T03:42</datetime>

<!--category-- ASP.NET, HTMX -->
## 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ä.

[TOC]

## Edellytykset

HTMX - Htmx on JavaScript-paketti, jonka sisällyttäminen hankkeeseen on helppoa käyttämällä CDN:tä [täällä](https://htmx.org/docs/#installing) )

```html
<script src="https://unpkg.com/htmx.org@2.0.1" 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ä](https://github.com/khalidabuhakmeh/Htmx.Net)

Nämä ovat molemmat [Khalid Abuhakmeh
](https://mastodon.social/@khalidabuhakmeh@mastodon.social)

```shell
dotnet add package Htmx.TagHelpers
```

Ja Htmx Nuget-paketti [täällä](https://www.nuget.org/packages/Htmx/)

```shell
 dotnet add package Htmx
```

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

```razor
    <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ä](https://htmx.org/docs/#hx-boost) 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:

```razor
 <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.

```razor
    <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.

![img.png](project.png)

Sitten meillä on Blog Controllerissa

```csharp
    [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

```razor
@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.