# HTMX mit ASP-.-NET-Kernteilchen, der Server, die Renaissance

<datetime class="hidden">2025-11-28T12:00</datetime>

<!--category-- HTMX, ASP.NET Core, Web Development, HTMX.NET -->
## Einleitung

Wenn you-'hve gebaut traditionelle ASP-.hNET Core MVC-Anwendungen - ,h Sie kennen das Problem, dass gefürchtet :h, wenn Benutzer navigieren zwischen Seiten -.h Volle Seite neu geladen,h der Browser Chrome flimmern ,,h Inhalt springen herum, wie die neue Seite rendern , .h Es funktioniert , aber es tut , 'h *Gefühl* Modernes, modernes

Die Technik, Teil-HTML-Fragmente vom Server zurückzugeben und in das DOM zu wechseln, löst diese -, und es ist neu '... IM'.ve verwendet dieses Muster seit den jQuery Tagen und sogar davor mit Vanille JavaScript und `XMLHttpRequest`Was sich geändert hat, ist, wie *elegant* es wird mit HTMX-.

HTMX gibt uns eine deklarative Weise zu tun, was wir immer getan haben:...Return-Server... und tauschen Sie es in die Seite aus... Kein benutzerdefiniertes JavaScript für jede Interaktion mehr schreiben... keine Wahl mehr zwischen "...

> **Art.-Nr. der Gesellschaft** Dieser Artikel konzentriert sich auf die Integrationsseite des ASP-.-NET Cores für einen tiefen Eintauchen in HTMX-Ereignisse, den Lebenszyklus von , und benutzerdefinierte Erweiterungen, siehe meinen Begleitartikel [Eine Whistle---Stopp-Tour durch HTMX-Erweiterungen und die Verwendung von HTX mit ASP..-NET Core](/blog/htmxandaspnetcore).

In diesem Artikel zeigen HTMX, wie sich schön mit ASP-.]NET Core Partials einfügt **HTMX-.-NET** Bibliothek macht es noch besser und wie mein [Hauptsächlichlucid-.Pagingtaghelper](https://github.com/scottgal/mostlylucid.pagingtaghelper) NuGet-Paket verwendet HTMX bietet leistungsstarke Pagination mit minimaler Konfiguration

Der Ansatz ist Framework-Framework---agnostic auch Django hinzugefügt Vorlage Fragmente in der Version 6.0,-Schienen hat Turbo Frames , und das breitere Web-Ökosystem umarmt HTML , - over ,- , die .- , Drahtmuster , . , Es ist eine gute Zeit, um Server zu sein ?- , Rendered Anwendungen

[TOC]

## Was ist HTMX-??

HTMX ist eine Bibliothek, mit der Sie Zugriff auf moderne Browser-Funktionen direkt aus HTML.,. anstatt zu schreiben JavaScript. .. Es erweitert HTML um Attribute, die es Ihnen ermöglichen, AJAX Anfragen zu machen.

Die Schlüsselattribute, die Sie am häufigsten verwenden

- `hx-get`, `hx-post`, `hx-put`, `hx-delete` HTTP-Anfragen stellen
- `hx-target` Geben Sie an, wo die Antwort gesetzt werden soll.
- `hx-swap` Kontrolle, wie der Inhalt getauscht wird
- `hx-trigger` Definieren Sie, was die Anforderung auslöst.
- `hx-push-url` Aktualisieren Sie die Browser-URL ohne volle Seite neu laden

Hier ist die Schönheit von ihr ,: , Sie schreiben immer noch Server , - side code , , , zurückgebender Server .- , gerendered HTML , ohne JSON-APIs , keine Client , - , Seitenvorlagen , nicht bauende Pipelines .. , nur gut alt ,...

## Ein Muster so alt wie AJAX selbst

Vor HTMX-, , haben wir den gleichen Effekt mit deutlich mehr Zeremonien erreicht.. , hier.' , wie teilweise Updates in der jQuery Ära aussahen.

```javascript
// jQuery circa 2010
$('#load-more').click(function() {
    $.ajax({
        url: '/posts/page/' + currentPage,
        success: function(html) {
            $('#posts-container').append(html);
            currentPage++;
        }
    });
});
```

Und noch früher: , mit Vanille JavaScript-Nr.

```javascript
// Vanilla JS circa 2005
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById('content').innerHTML = xhr.responseText;
    }
};
xhr.open('GET', '/partial-content', true);
xhr.send();
```

Das Server-Muster war identisch - , HTML-Fragmente , , , tauschen Sie sie in die DOM , . HTMX nur verschiebt diese Logik von JavaScript in HTML-Attribute , so dass es deklarativ , , entdeckbar , und weit weniger Fehler ,- prone-. , Die Innovation ist die Technik , die ; , es ist ' , das Interface , . .

ASP-.-NET-Entwickler machen dies seit Jahren..-UpdatePanels in WebForms. `PartialView()` in MVC seit dem ersten Tag `Html.RenderAction()` für komposierbare Fragmente -- , die Fähigkeit war immer da ,. , Was uns fehlte, war eine elegante, standardisierte Art und Weise, es auf der Client-Seite zu verdrahten , . HTMX füllt diese Lücke perfekt

Die breitere Industrie hat auch diese Muster wiederentdeckt..-Begriffe wie z.B. ", ", (, Server-, Side Rendering),, Hybrid-Rendering ", und ", Islands Architektur" beschreiben im Wesentlichen, was Server---Frameworks immer getan haben, aber mit frischen Augen...., es ist die Validierung von ', dass der Server -, gerendered approach scalen -,, führt mit den richtigen Tools , und - aus.

## Einrichten von HTMX im ASPA.-NET-Core

Sie können ein CDN verwenden oder lokal servieren.

```html
<script src="https://unpkg.com/htmx.org@2.0.0"></script>
```

Das ist es . Kein Bauschritt , Kein npm installieren , Kein Webpack-Konfiguration . Einfach in ein Skript-Tag fallen lassen und Sie ' Aus auf die Rennen

## Alpine-..js.:. Die Client-Side-Komponente

Für Client-Reaktivität -'sid Anzeige von Elementen /«Verstecken von Zuständen,« lokale UI-Zustand ), [Alpen-.-js](https://alpinejs.dev/) Komplementiert HTMX perfekt ,. , Bei nur , 15 , KB gzipped , , , es bietet Vue , / , React- , und deklarative Reaktivität ohne die Blähungen .

```html
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

Hier ist die Art und Weise, wie sie zusammen arbeiten.

```razor
<div x-data="{ open: false }">
    <button x-on:click="open = !open">Toggle</button>
    <div x-show="open" x-transition>
        <button hx-get="/api/data" hx-target="#results">Load Data</button>
    </div>
</div>
```

Alpine behandelt die lokale Benutzeroberfläche des Toggle-Servers ), HTMX behandelt Serveranrufe ( , die Daten holen ,). , In diesem Artikel , , sehen Sie dieses Muster ' , Alpine für Client-Reaktivität , , , HTMLX für Serverinteraktionen , . ,

## Die HTMX-.-NET-Bibliothek

[Khalid Abuhakmeh](https://khalidabuhakmeh.com/about)''s [HTMX-.-NET](https://github.com/khalidabuhakmeh/Htmx.Net) Bibliothek bietet erste ,- , Klasse ASP , . ,NET Core-Integration , . , verfügbar als `Htmx` und `Htmx.TagHelpers` NuGet packages-, , es fühlt sich an wie ein Eingeborener von . ,NET und macht die Arbeit mit HTMX zu einem absoluten Vergnügen , . , Sie finden mehr von Khalid , ' , ausgezeichnete Open ,- Quelle Arbeit auf seine [GitHub](https://github.com/khalidabuhakmeh).

### Installation

```bash
dotnet add package Htmx
dotnet add package Htmx.TagHelpers
```

In Ihrem `_ViewImports.cshtml`:

```razor
@addTagHelper *, Htmx.TagHelpers
```

### Die IsHtmx-Erweiterungsmethode

Das nützlichste Merkmal ist die `Request.IsHtmx()` Erweiterungsmethode, die Ihnen sagt, ob die Anfrage von HTMX-. kam Dies ermöglicht es Ihnen entweder eine vollständige Ansicht oder nur ein partielles Feedback

```csharp
[HttpGet]
public async Task<IActionResult> Index(int page = 1, int pageSize = 20)
{
    var posts = await blogViewService.GetPagedPosts(page, pageSize);

    if (Request.IsHtmx())
        return PartialView("_BlogSummaryList", posts);

    return View("Index", posts);
}
```

Dieses Muster ist absolut brillant... eine einzelne Controller-Aktion dient beides.

- Volle Seite lädt, wenn Benutzer direkt navigieren oder aktualisieren
- Teilweise Aktualisierungen, wenn HTMX die Anfrage stellt

Keine separaten API-Endpunkte, keine duplizierte Logik, keine JSON Serialisierung Overhead-.

> **Ein häufiges Missverständnis** Viele Entwickler denken, Sie brauchen die `_` Präfix ( ähnlich `_BlogSummaryList.cshtml`), um teilweise Rendering zu erhalten ., die Sie nicht ', die `PartialView()` Methode selbst sagt ASP..-NET Core, um das Layout zu überspringen - s sagen ' s "Vergessen Sie das Layout" , just rendern dieses Bit ". Sie können verwenden `return PartialView("SearchResults", model)` mit einer regulären Ansichtsdatei und es funktioniert perfekt Die Underscore-Konvention stammt aus ASP...NET Web Pages.MS K2.WebMatrix.). Dort verhinderte sie, dass Dateien direkt über die URL bedient werden, aber MVC hat schon immer alle Ansichten vor direktem Zugriff geschützt.MSC5. Es ist eine reine Namenskonvention zur Identifizierung von Ansichten. *beabsichtigt* als Teilstücke

### HTMX-.-NET Tag Helfer

HTMX-.-NET bietet Tag-Helper, die Arbeit mit Controllern cleaner machen statt Route Strings zu schreiben, können Sie stark verwenden.-...

```razor
<button
    hx-controller="Comment"
    hx-action="GetCommentForm"
    hx-post
    hx-target="#commentform">
    Reply
</button>
```

Dies erzeugt die korrekte Route mit ASP-. ,NET Core ,' s Routing-System , . , Wenn Sie Ihren Controller oder Aktion umbenennen , wird Ihre IDE es fangen .. , viel besser als magische Saiten , ! ,

Hier ist ein echtes Beispiel aus diesem Blog.'s Kommentarsystem.

```razor
<button
    class="btn btn-outline btn-sm mb-4"
    hx-action="Comment"
    hx-controller="Comment"
    hx-post
    hx-vals
    x-on:click.prevent="window.mostlylucid.comments.setValues($event)"
    hx-on="htmx:afterSwap: window.scrollTo({top: 0, behavior: 'smooth'})"
    hx-swap="outerHTML"
    hx-target="#commentform">
    Comment
</button>
```

Beachten Sie, wie HTMX spielt schön mit Alpine...`x-on:click.prevent`Für die gelegentlichen Bits der Client-Interaktivität von -.

### Sonstige HTMX-.-NET-Helfer

Die Bibliothek stellt auch zur Verfügung

- `Request.IsHtmxNonBoosted()` Überprüfe, ob es eine HTMX-Anforderung gibt, aber nicht beschleunigt.
- `Request.IsHtmxRefresh()` Überprüfe, ob es eine Anforderung zur Wiederherstellung der Geschichte ist
- Ansprechhelfer für HTMX-Header

## Real.-.World Beispiel, :. Suche mit Partials

Hier ist der Suchcontroller aus diesem Blog, der das dreistufige Rückkehrmuster zeigt.

```csharp
[HttpGet]
[OutputCache(Duration = 3600, VaryByHeaderNames = new[] { "hx-request", "pagerequest" })]
public async Task<IActionResult> Search(
    string? query,
    int page = 1,
    int pageSize = 10,
    [FromHeader] bool pagerequest = false)
{
    var searchModel = await BuildSearchModel(query, page, pageSize);

    if (pagerequest && Request.IsHtmx())
        return PartialView("_SearchResultsPartial", searchModel.SearchResults);

    if (Request.IsHtmx())
        return PartialView("SearchResults", searchModel);

    return View("SearchResults", searchModel);
}
```

Drei Rückpfade für drei Szenarien

1. Paginierungswünsche minimal partial .( just the results list
2. Filteränderungen Abschnitt teilweise Ergebnisse mit Filtern
3. Direkte Navigation ganzflächige Navigation

Die partielle Ansicht`_SearchResultsPartial.cshtml`Der Paging Tag Helfer wird verwendet.

```razor
@model Mostlylucid.Models.Blog.PostListViewModel
<div class="pt-2" id="content">
    @if (Model.Data?.Any() is true)
    {
        <div class="inline-flex w-full items-center justify-center pb-4">
            @if (Model.TotalItems > Model.PageSize)
            {
                <pager
                    x-ref="pager"
                    link-url="@Model.LinkUrl"
                    hx-boost="true"
                    hx-target="#content"
                    hx-swap="show:none"
                    page="@Model.Page"
                    page-size="@Model.PageSize"
                    total-items="@Model.TotalItems"
                    hx-headers='{"pagerequest": "true"}'>
                </pager>
            }
        </div>
        @foreach (var post in Model.Data)
        {
            <partial name="_ListPost" model="post"/>
        }
    }
</div>
```

Durchbrechen des Pager-Tags Helfer

- `hx-boost="true"` Verwendet Links, die zu AJAX konvertieren
- `hx-target="#content"` Wo ist das Ansprechen zu injizieren?
- `hx-headers='{"pagerequest": "true"}'` Benutzerdefinierte Header sagt dem Controller es
- Der für die Verarbeitung Verantwortliche prüft `Request.IsHtmx() && pagerequest` nur den minimalen Teil zurückzugeben

## Das meistlucid-.-Pagingtaghelper Paket

Ich habe geschrieben [Hauptsächlichlucid-.Pagingtaghelper](https://github.com/scottgal/mostlylucid.pagingtaghelper) um wiederholte Paginationscodes zu vermeiden – . , es ist ' HTMX-- , funktioniert aber auch ohne JavaScript.

### Installation

```bash
dotnet add package mostlylucid.pagingtaghelper
```

Hinzufügen zu `_ViewImports.cshtml`:

```razor
@addTagHelper *, mostlylucid.pagingtaghelper
```

### Hauptmerkmale

Umsetzung `IPagingModel<T>` und du bist fertig

```csharp
public class BasePagingModel<T> : IPagingModel<T> where T : class
{
    public int Page { get; set; }
    public int TotalItems { get; set; }
    public int PageSize { get; set; }
    public string LinkUrl { get; set; }
    public List<T> Data { get; set; }
}
```

**Was du bekommst**

- Null Konfiguration erforderlich
- Mehrere UI-Frameworks (MSK)SegelwindCSS (MSC1) DaisyUI®," Bootstrap 5, benutzerdefinierte Ansichten "MSC4"
- Unterstützung im dunklen Modus
- Sprachen, die gebaut wurden
- Sortierbare Kopfzeilen Auswahl der Seitengröße
- Progressive Verbesserung arbeitet ohne JavaScript.
- Fortsetzung Token Unterstützung für NoSQL-Datenbanken

Der Tag-Helfer generiert Links, die Query Strings konservieren., support benutzerdefinierte Header. , , und integrieren Sie nahtlos mit HTMX , ( , siehe das Beispiel oben ,). .

## HTMX-Durchflussdiagramm

Hier ist es, wie das ganze System zusammenpasst.

```mermaid
graph TB
    A[Browser] -->|"Initial page load"| B[Controller Action]
    B -->|"Request.IsHtmx() = false"| C[Return Full View]
    C --> D[Render Layout + Partial]

    A -->|"User clicks pagination/filter"| E[HTMX Request]
    E -->|"hx-get with headers"| F[Same Controller Action]
    F -->|"Request.IsHtmx() = true"| G{Check Headers}
    G -->|"pagerequest header"| H[Return Minimal Partial]
    G -->|"No special header"| I[Return Section Partial]

    H --> J[Swap Content in Target]
    I --> J

    J -->|"User clicks another link"| E

    style B stroke:#333,stroke-width:2px
    style F stroke:#333,stroke-width:2px
    style C stroke:#0066cc,stroke-width:2px
    style H stroke:#00cc66,stroke-width:2px
    style I stroke:#00cc66,stroke-width:2px
```

## Vergleich mit anderen Rahmenbedingungen

### Django-Vorlagenfragmente

Django hinzugefügt richtige Teilvorlage Rendering in der Version 6.0-Django-Entwickler typischerweise verwendet Inklusion Tags oder dritte --Party-Pakete wie django.--Render---Block-.-ASP-MSC9-NET Core hatte `PartialView()` seit version 1.0-Versionen in verschiedenen Frameworks, unterschiedliche Timelines, aber das gleiche Ziel MS K5-Format für HTML-Fragmente für HTMX-Format

### Schienen Turborahmen

Ruby auf Rails hat Turbo Frames Teil von Hotwire, die im Geist ähnlich ist

```erb
<%= turbo_frame_tag "posts" do %>
  <%= render @posts %>
<% end %>
```

Der Unterschied ist, dass Turbo spezifische Frame-Marker sowohl auf Anfrage als auch Antwort erfordert.. HTMX ist flexibler. `hx-target`.

### Phoenix LiveView

Elixir-'s Phoenix LiveView nimmt einen anderen Ansatz mit persistenten WebSocket-Verbindungen und Server- , -

```elixir
def handle_event("load_more", _params, socket) do
  {:noreply, assign(socket, posts: load_more_posts())}
end
```

LiveView ist brilliant für echte --Zeitanwendungen, aber es erfordert WebSocket Infrastruktur und Serverspeicher für Verbindungen, . HTMX verwendet einfache alte HTTP-Versionen, die Stateless, skalierbar . Für einen Blog, der ' perfekt ist.

## Leistungsbeurteilungen

**Ausgabe-Caching**Die `OutputCache` Attribut variiert durch `hx-request` caching ganze Seiten und Teile separat

```csharp
[OutputCache(Duration = 3600, VaryByHeaderNames = new[] { "hx-request", "pagerequest" })]
```

**Netzwerkeffizienz**Server-Ausgesendetes HTML ist oft kleiner als JSON-Client+Ausgelieferte Vorlagen-Ausgespeichert erfordert weniger Rundfahrten,Ausgeblendet und Caches richtig.Ausgestattet

**Bündelgröße**Vergleichen Sie dies mit einer typischen React-App.

## Fortgeschrittene Muster

**Optimistische UI-Updates** Kombinieren Sie HTMX und Alpine für sofortiges Feedback

```razor
<div x-data="{ count: @Model.CommentCount }">
    <button hx-post="/comment/like" x-on:click="count++" hx-on::after-request="count = $event.detail.xhr.response">
        Likes: <span x-text="count"></span>
    </button>
</div>
```

Die Zählung aktualisiert sich sofort mit der Server-Antwort.

**Aus - von - Band Swaps** Aktualisieren Sie mehrere Seitenabschnitte von einer Antwort

```razor
<div id="main-content"><!-- Main response --></div>
<div id="notification-count" hx-swap-oob="true"><span>5 new</span></div>
```

Perfekt für die Benachrichtigung von Abzeichen...... ich bedecke dieses Muster in der Tiefe in [Zeigt Toast und Swapping mit HTMX](/blog/showingtoastandswappingwithhtmx).

**Client-Vorlagen mit WebAPI** Manchmal möchten Sie eine Mid--.way-Erfahrung, :.Server, -.rendered HTML für die meisten Dinge, aber JSON von einer WebAPI für spezifische dynamische Inhalte, MSC5.HTMX.'.s [client---side-Erweiterung--Templates](https://htmx.org/extensions/client-side-templates/) lässt Sie genau dies tun

```html
<script src="https://unpkg.com/htmx-ext-client-side-templates@2.0.0/client-side-templates.js"></script>
<script src="https://unpkg.com/mustache@latest"></script>

<div hx-ext="client-side-templates">
    <template id="post-template" type="text/mustache">
        {{#posts}}
        <div class="post">
            <h3>{{title}}</h3>
            <p>{{excerpt}}</p>
        </div>
        {{/posts}}
    </template>

    <button hx-get="/api/posts"
            hx-target="#post-list"
            mustache-template="post-template">
        Load Posts
    </button>
    <div id="post-list"></div>
</div>
```

Dieser Ansatz funktioniert mit Mustache-, , Lenker oder Nunjucks Vorlagen , . , Ihre WebAPI liefert JSON , , , aber HTMX behandelt das Rendering Client ,- side , und es ist besonders nützlich, wenn Sie eine bestehende API haben oder Daten mit mobilen Apps teilen müssen , . , Für weitere Details über HTML-Erweiterungen einschließlich Client .- , . [der Begleitartikel](/blog/htmxandaspnetcore).

## Gotchas Tipps

**Debugging-Tool - :** Installieren [HTMX Debugger-Erweiterung](https://chromewebstore.google.com/detail/htmx-debugger/) Es zeigt jede Anfrage an ,,' response , und Swap in real , -'time , .'

### CSRF-Zeichen

ASP-.-NET-Kerne'-Antifälschungstoken benötigen spezielle Handhabung mit AJAX-MSC2-HTMX-.-NET bietet mehrere saubere Optionen..-Die empfohlene Art und Weise verwendet `HtmxAntiforgeryScriptEndpoint`:

```csharp
// In Program.cs
app.MapHtmxAntiforgeryScript();
```

```html
<!-- In your layout head -->
<script src="@HtmxAntiforgeryScriptEndpoints.Path" defer></script>
```

Oder verwenden Sie das Tag-Helper `<meta name="htmx-config" includeAspNetAntiforgeryToken="true" />`Siehe auch: [Khalid-' s Artikel auf HTMX-Antiempfindungszeichen](https://khalidabuhakmeh.com/htmx-requests-with-aspnet-core-anti-forgery-tokens) für vollständige Details

### Alpine-.-js Kurzhand in Razor

Alpen-' `@click` Shorthand-Konflikte mit Razor-' `@` syntax... Verwenden Sie stattdessen die explizite Form.

```razor
<button x-on:click="doSomething()">Click me</button>  <!-- Instead of @click -->
<div x-bind:class="isOpen ? 'block' : 'hidden'"></div>  <!-- Instead of :class -->
```

Oder entfliehen mit `@@click`Die explizite Syntax ist jedoch klarer.

### Geschichtsverwaltung

**Kontrollieren von Einträgen aus der Geschichte** Standardmäßig schiebt HTMX jede Anfrage in die Geschichte, für Paginationen, für /, Filter, bei denen Sie nicht wollen, dass Geschichtsverschmutzung, :,

```razor
<paging model="@Model" hx-push-url="false">  <!-- Don't add history entries -->
```

Oder verwenden `hx-replace-url="true"` um die URL zu aktualisieren, ohne Einträge hinzuzufügen

**Das Phantom-Teilproblem** Browser-zurück-/-vorwärts zeigt nur ein partielles Fragment ohne Layout. `hx-history-elt` auf Ihrem Content-Container

```html
<div class="container mx-auto" id="contentcontainer" hx-history-elt>
    @RenderBody()
</div>
```

Dies sagt HTMX, welches Element beim Wiederherstellen der Geschichte das umgebende Layout erhalten soll.

### CDN-Caching für die Cloudflare von , usw.

**Symptome** HTMX arbeitet lokal, bricht aber hinter einem CDN auf. falsche Inhalte werden zwischengespeichert.

**Wurzelursache (MSK)** CDNs ignorieren die `HX-Request` Ihr Server liefert verschiedene Inhalte basierend auf diesem Header, aber das CDN speichert sie identisch.

**ASP-.-NET-Kernfixierung** Verwendung `VaryByHeaderNames`:

```csharp
[OutputCache(Duration = 3600, VaryByHeaderNames = new[] { "hx-request" })]
```

**CDN-Fixierung** Cache-Regeln so einrichten, dass sie enthalten sind `HX-Request` in der Cache-Taste für Cloudflare-:.Dashboard Caching-Regeln für →.Cache-Regelungen Benutzerdefinierter Cache-Schlüssel für →. Kopfzeilen von →. `HX-Request`.

### Die Debatte über die HX---Boost

[`hx-boost`](https://htmx.org/attributes/hx-boost/) wandelt normale Links in AJAX-Anfragen um [HTMX-Quriks Seite](https://htmx.org/quirks/) Notizen einige Kern Teammitglieder empfehlen, es zu vermeiden `<head>` content-Beeinflussung der Lokalität des Verhaltens, während andere finden es in Ordnung für schnelle wins..

```razor
<div hx-boost="true" hx-target="#contentcontainer">
    <a asp-action="Show" asp-route-slug="@post.Slug">Read More</a>
</div>
```

Dieser Blog verwendet es extensiv, wenn bestimmte Container gezielt `hx-get` ist klarer, aber `hx-boost` Funktioniert, wenn du -' - konsistent bist - . - selektiv mit `hx-boost="false"` auf Child-Elementen

## Schlußfolgerung

HTMX mit ASP-.-NET Kernteilchen stellt eine Rückkehr zum Server dar.-'side Einfachheit, ohne moderne UX-.' zu opfern Sie erhalten...

- Dynamische Wechselwirkungen
- Server-Rendering für SEO-)
- Richtiger HTTP-Caching
- Minimal JavaScript
- Fortschrittliche Verbesserung
- Typ: Sicheres Routing mit HTMX-.-NET
- Zero---config-Pagination mit meistlucid-.-Pagingtaghelper

Der server-angewandte Ansatz hat den Test der Zeit stand, , und mit HTMX., ist es schließlich hat die elegante Client-Tooling es verdient .. Sie können robust bauen ,. performante Web-Anwendungen mit Mustern, die seit Jahrzehnten gearbeitet haben, dass sie gerade auf das richtige Werkzeug gewartet haben, damit sie wieder glänzen

## Verwandte Artikel auf diesem Blog

### Gesellschafter Artikel

Dieser Artikel ist Teil einer zweiseitigen Serie auf HTMX mit ASP-..NET Core-:.

1. **Dieser Artikel** Fokussierung auf die Kernintegration von ASP ,. ,NET , , , Teilansichten von , HTMX , . , und Pagination
2. **[Eine Whistle---Stop-Tour durch HTMX-Erweiterungen](/blog/htmxandaspnetcore)** Deep tauchen Sie ein in HTMX-Ereignisse, Lifecycle, Erweiterungsarchitektur und benutzerdefinierte Erweiterungen

### Weitere HTMX-Artikel

- [Paging mit HTMX hinzufügen](/blog/addpagingwithhtmx) Der ursprüngliche Artikel über die Umsetzung der Pagination mit dem älteren PaginationsTagHelper
- [ASP-.-NET Core Caching mit HTMX](/blog/aspnetcachingwithhtmx) Deep tauchen in Caching-Strategien für HTMX-Anfragen ein
- [Mit Alpine und HTMX wieder auffrischen](/blog/autorefreshwithalpineandhtmx) Kombination von Alpine-.®js mit HTMX für reaktive Komponenten
- [Machen Sie Ihre Website mehr SPA--elike mit HTMX](/blog/htmxtomakeyoursitemorespalike) Navigation ohne JavaScript-Frames
- [Verwendung von SweetAlert für HX-Indikatoren](/blog/usingsweetalertforhxindicators) Schöne Ladeanzeigen mit HTMX
- [Zeigt Toast und Swapping mit HTMX](/blog/showingtoastandswappingwithhtmx) Benachrichtigte Toast-Meldungen

## Literaturhinweise

**Offizielle Dokumentation**

- [HTMX-Dokumentation](https://htmx.org/docs/) Die offizielle HTMX-Dokumentation
- [HTMX-Beispiele](https://htmx.org/examples/) Praktische Beispiele für HTMX-Muster
- [HTMX-Erweiterungen](https://htmx.org/extensions/) Offizielle HTMX-Erweiterungen
- [Alpine-.-Dokumentation](https://alpinejs.dev/) Amtliche Veröffentlichungen der Europäischen Gemeinschaften
- [Beispiele für Alpine-..j](https://alpinejs.dev/examples) Praktisch alpine Muster
- [Kernpartialansichten von ASP-.-NET](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/partial) Anleitung zu Teilansichten
- [Kernausgangs-Caching](https://learn.microsoft.com/en-us/aspnet/core/performance/caching/output) Offizielle Caching-Dokumentation

**Bibliotheken Werkzeuge**

- [HTMX-.-NET GitHub](https://github.com/khalidabuhakmeh/Htmx.Net) Code für die HTMX-Bibliothek
- [HTMX-.-NET NuGet](https://www.nuget.org/packages/Htmx/) HTMX-.-NET auf NuGet
- [Htmx-.-TagHelpers NuGet](https://www.nuget.org/packages/Htmx.TagHelpers/) HTMX-Tag Helfer auf NuGet
- [Website von Khalid Abuhakmeh'](https://khalidabuhakmeh.com/) Schöpfer von HTMX-.-NET mit ausgezeichneten Blog-Beiträgen
- [Khalid Abuhakmeh ' s GitHub](https://github.com/khalidabuhakmeh) Weitere brillante open-Projekte von -source
- [Hauptsächlichlucid-.Pagingtaghelper GitHub](https://github.com/scottgal/mostlylucid.pagingtaghelper) Mein Paging Tag Helper Quellcode
- [Hauptsächlichlucid-.Pagingtaghelper NuGet](https://www.nuget.org/packages/mostlylucid.pagingtaghelper/) Das Paket auf NuGet

**Gemeinschaftsressourcen**

- [HTMX-Diskord](https://htmx.org/discord) Aktive Community-Unterstützung
- [HTMX Abhandlungen](https://htmx.org/essays/) Nachdenkliche Artikel über HTMX Philosophie
- [Hypermedia Systems Buch](https://hypermedia.systems/) Kostenloses Online-Buch über den Aufbau von Hypermedia-Anwendungen