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

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

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.

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

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

<script src="https://unpkg.com/[email protected]"></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 Komplementiert HTMX perfekt ,. , Bei nur , 15 , KB gzipped , , , es bietet Vue , / , React- , und deklarative Reaktivität ohne die Blähungen .

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

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

<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''s 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.

Installation

dotnet add package Htmx
dotnet add package Htmx.TagHelpers

In Ihrem _ViewImports.cshtml:

@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

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

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

<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.preventFü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.

[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.cshtmlDer Paging Tag Helfer wird verwendet.

@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 um wiederholte Paginationscodes zu vermeiden – . , es ist ' HTMX-- , funktioniert aber auch ohne JavaScript.

Installation

dotnet add package mostlylucid.pagingtaghelper

Hinzufügen zu _ViewImports.cshtml:

@addTagHelper *, mostlylucid.pagingtaghelper

Hauptmerkmale

Umsetzung IPagingModel<T> und du bist fertig

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.

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

<%= 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- , -

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-CachingDie OutputCache Attribut variiert durch hx-request caching ganze Seiten und Teile separat

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

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

BündelgrößeVergleichen Sie dies mit einer typischen React-App.

Fortgeschrittene Muster

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

<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

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

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 lässt Sie genau dies tun

<script src="https://unpkg.com/[email protected]/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.

Gotchas Tipps

Debugging-Tool - : Installieren HTMX Debugger-Erweiterung 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:

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

<!-- 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 für vollständige Details

Alpine-.-js Kurzhand in Razor

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

<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 @@clickDie 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, :,

<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

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

[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 wandelt normale Links in AJAX-Anfragen um HTMX-Quriks Seite 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..

<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 Deep tauchen Sie ein in HTMX-Ereignisse, Lifecycle, Erweiterungsarchitektur und benutzerdefinierte Erweiterungen

Weitere HTMX-Artikel

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

Literaturhinweise

Offizielle Dokumentation

• HTMX-Dokumentation Die offizielle HTMX-Dokumentation
• HTMX-Beispiele Praktische Beispiele für HTMX-Muster
• HTMX-Erweiterungen Offizielle HTMX-Erweiterungen
• Alpine-.-Dokumentation Amtliche Veröffentlichungen der Europäischen Gemeinschaften
• Beispiele für Alpine-..j Praktisch alpine Muster
• Kernpartialansichten von ASP-.-NET Anleitung zu Teilansichten
• Kernausgangs-Caching Offizielle Caching-Dokumentation

Bibliotheken Werkzeuge

• HTMX-.-NET GitHub Code für die HTMX-Bibliothek
• HTMX-.-NET NuGet HTMX-.-NET auf NuGet
• Htmx-.-TagHelpers NuGet HTMX-Tag Helfer auf NuGet
• Website von Khalid Abuhakmeh' Schöpfer von HTMX-.-NET mit ausgezeichneten Blog-Beiträgen
• Khalid Abuhakmeh ' s GitHub Weitere brillante open-Projekte von -source
• Hauptsächlichlucid-.Pagingtaghelper GitHub Mein Paging Tag Helper Quellcode
• Hauptsächlichlucid-.Pagingtaghelper NuGet Das Paket auf NuGet

Gemeinschaftsressourcen

• HTMX-Diskord Aktive Community-Unterstützung
• HTMX Abhandlungen Nachdenkliche Artikel über HTMX Philosophie
• Hypermedia Systems Buch Kostenloses Online-Buch über den Aufbau von Hypermedia-Anwendungen