Back to "Htmx mit Asp-.-Net Core"

This is a viewer only at the moment see the article on how this works.

To update the preview hit Ctrl-Alt-R (or ⌘-Alt-R on Mac) or Enter to refresh. The Save icon lets you save the markdown file to disk

# Htmx mit Asp-.-Net Core

## Einleitung

Die Verwendung von HTMX mit ASP-.-NET Core ist eine gute Möglichkeit, dynamische Webanwendungen mit minimalem JavaScript zu erstellen..-HTMX ermöglicht es Ihnen, Teile Ihrer Seite ohne einen vollständigen Seitenumladen zu aktualisieren.

Es ist das, was ich verwendet habe, um zu nennen: '.hybrid.'. Web-Design, wo Sie die Seite vollständig mit Server rendern.-.side Code und dann HTMX verwenden, um Teile der Seite dynamisch zu aktualisieren.

In diesem Artikel zeigen Sie, wie man mit HTMX in einer ASPA. NET Core Anwendung beginnt.

[TOC]

## Voraussetzungen

Htmx ist ein JavaScript-Paket der easist Weg, um es in Ihrem Projekt ist die Verwendung eines CDN. [Hierher](https://htmx.org/docs/#installing) )

```html
<script src="https://unpkg.com/htmx.org@2.0.1" integrity="sha384-QWGpdj554B4ETpJJC9z+ZHJcA/i59TyjxEPXiiUgN2WmTyV5OEZWCD6gQhgkdpB/" crossorigin="anonymous"></script>
```

Sie können selbstverständlich auch eine Kopie herunterladen und sie mit einschließen.

## ASP-.-NET-Bits

Ich empfehle auch die Installation der Htmx Tag Helper von [Hierher](https://github.com/khalidabuhakmeh/Htmx.Net)

Diese sind beide von der wunderbaren [Khalid Abuhakmeh
](https://mastodon.social/@khalidabuhakmeh@mastodon.social)

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

Und das Htmx Nuget-Paket von [Hierher](https://www.nuget.org/packages/Htmx/)

```shell
 dotnet add package Htmx
```

Der Tag-Helfer lässt Sie dies tun

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

### Alternativer Ansatz

**ANMERKUNG: Dieser Ansatz hat einen großen Nachteil: ;, es doesnses.',t produzieren ein href für den Beitrag link.MSC3, Dies ist ein Problem für SEO und Zugänglichkeit: MSC4, es bedeutet auch, dass diese Links fehlschlagen, wenn HTMX aus irgendeinem Grund nicht mehr geladen wird: (,CDNs DO go down...**

Ein alternativer Ansatz besteht darin, die ` hx-boost="true"` Attribut und normales asp-.-Netz-Kern-Tag-Helpers-. [Hierher](https://htmx.org/docs/#hx-boost) für weitere Informationen auf hx-- Boost .( , obwohl die docs sind ein wenig spärlich .
Dies wird ein normales href ausgeben, wird aber von HTMX und dem dynamisch geladenen Inhalt abgefangen

So wie folgt:

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

### Teile

HTMX funktioniert gut mit Teilansichten......Sie können HTX verwenden, um eine Teilansicht in einen Container auf Ihrer Seite zu laden..........Dies ist ideal für das Laden von Teilen Ihrer Seite dynamisch ohne vollständiges Neuladen von Seiten....

In dieser App haben wir einen Container in der Layout-Datei, die wir eine Teilansicht laden möchten

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

</div>
```

Normalerweise gibt es den Server-Seiteninhalt, aber mit dem HTMX Tag Helfer über Sie sehen können wir Ziel `hx-target="#contentcontainer"` welche die Teilansicht in den Container laden wird

In unserem Projekt haben wir die BlogView Teilansicht, dass wir in den Container laden möchten .

![img.png](project.png)

Dann haben wir im Blog Controller

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

Sie können hier sehen, dass wir die HTMX-Anfrage haben - ..IsHtmx.(). Methode - MSV2. Dies wird true zurückgeben, wenn es sich um eine HTML-Anfrage handelt - MWS3. Wenn es sich darum handelt, geben wir die Teilansicht zurück.

Damit können wir sicherstellen, dass wir auch direkte Abfragen mit wenig echtem Aufwand unterstützen

In diesem Fall bezieht sich unsere volle Ansicht auf diese partielle

```razor
@model Mostlylucid.Models.Blog.BlogPostViewModel

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

Und so haben wir jetzt eine super einfache Möglichkeit, Teilansichten in unsere Seite zu laden mit HTMX-.

This is a preview from the server running through my markdig pipeline

ASP.NET HTMX

Htmx mit Asp-.-Net Core

Thursday, 01 August 2024

Einleitung

In diesem Artikel zeigen Sie, wie man mit HTMX in einer ASPA. NET Core Anwendung beginnt.

Voraussetzungen

Htmx ist ein JavaScript-Paket der easist Weg, um es in Ihrem Projekt ist die Verwendung eines CDN. Hierher )

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

Sie können selbstverständlich auch eine Kopie herunterladen und sie mit einschließen.

ASP-.-NET-Bits

Ich empfehle auch die Installation der Htmx Tag Helper von Hierher

Diese sind beide von der wunderbaren Khalid Abuhakmeh

dotnet add package Htmx.TagHelpers

Und das Htmx Nuget-Paket von Hierher

 dotnet add package Htmx

Der Tag-Helfer lässt Sie dies tun

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

Alternativer Ansatz

ANMERKUNG: Dieser Ansatz hat einen großen Nachteil: ;, es doesnses.',t produzieren ein href für den Beitrag link.MSC3, Dies ist ein Problem für SEO und Zugänglichkeit: MSC4, es bedeutet auch, dass diese Links fehlschlagen, wenn HTMX aus irgendeinem Grund nicht mehr geladen wird: (,CDNs DO go down...

Ein alternativer Ansatz besteht darin, die hx-boost="true" Attribut und normales asp-.-Netz-Kern-Tag-Helpers-. Hierher für weitere Informationen auf hx-- Boost .( , obwohl die docs sind ein wenig spärlich . Dies wird ein normales href ausgeben, wird aber von HTMX und dem dynamisch geladenen Inhalt abgefangen

So wie folgt:

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

Teile

In dieser App haben wir einen Container in der Layout-Datei, die wir eine Teilansicht laden möchten

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

    </div>

Normalerweise gibt es den Server-Seiteninhalt, aber mit dem HTMX Tag Helfer über Sie sehen können wir Ziel hx-target="#contentcontainer" welche die Teilansicht in den Container laden wird

In unserem Projekt haben wir die BlogView Teilansicht, dass wir in den Container laden möchten .

Dann haben wir im Blog Controller

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

Damit können wir sicherstellen, dass wir auch direkte Abfragen mit wenig echtem Aufwand unterstützen

In diesem Fall bezieht sich unsere volle Ansicht auf diese partielle

@model Mostlylucid.Models.Blog.BlogPostViewModel

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

Und so haben wir jetzt eine super einfache Möglichkeit, Teilansichten in unsere Seite zu laden mit HTMX-.