# Htmx med Asp.Net Core
2024-08-01T03:42
## 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.
[TOC]
## 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](https://htmx.org/docs/#installing) )
```html
```
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](https://github.com/khalidabuhakmeh/Htmx.Net)
De två är från den underbara [Khalid Abuhakmeh
](https://mastodon.social/@khalidabuhakmeh@mastodon.social)
```shell
dotnet add package Htmx.TagHelpers
```
Och Htmx Nuget-paketet från [här](https://www.nuget.org/packages/Htmx/)
```shell
dotnet add package Htmx
```
Begreppet tag helper låter dig göra detta.
```razor
@Model.Title
```
### 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](https://htmx.org/docs/#hx-boost) 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::
```razor
@Model.Title
```
### 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
```razor
@RenderBody()
```
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
```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);
}
```
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
```razor
@model Mostlylucid.Models.Blog.BlogPostViewModel
@{
ViewBag.Title = "title";
Layout = "_Layout";
}
```
Så nu har vi ett super enkelt sätt att ladda partiella seder till vår sida med hjälp av HTMX.