# Htmx con Asp.Net Core
2024-08-01T03:42
## 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
[TOC]
## Prerequisite
HTMX - Htmx è un pacco di JavaScript il modo più semplice per includerlo nel vostro progetto è usare un CDN [Qui.](https://htmx.org/docs/#installing) )
```html
```
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.](https://github.com/khalidabuhakmeh/Htmx.Net)
Questi sono entrambi dei meravigliosi. [Khalid Abuhakmeh
](https://mastodon.social/@khalidabuhakmeh@mastodon.social)
```shell
dotnet add package Htmx.TagHelpers
```
E il pacchetto Htmx Nuget da [Qui.](https://www.nuget.org/packages/Htmx/)
```shell
dotnet add package Htmx
```
L'aiuto della targhetta ti permette di fare questo:
```razor
@Model.Title
```
### 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.](https://htmx.org/docs/#hx-boost) 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:
```razor
@Model.Title
```
### 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.
```razor
@RenderBody()
```
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
```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);
}
```
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:
```razor
@model Mostlylucid.Models.Blog.BlogPostViewModel
@{
ViewBag.Title = "title";
Layout = "_Layout";
}
```
E quindi ora abbiamo un modo super semplice per caricare le immagini parziali nella nostra pagina usando HTMX.