# Eine Whistle---Stopp-Tour durch HTMX-Erweiterungen und die Verwendung von HTX mit ASP..-NET Core # Einleitung HTMX ist eine leistungsstarke JavaScript-Bibliothek, mit der Sie dynamische Webanwendungen mit minimalem JavaScript erstellen können.Es ermöglicht Ihnen, AJAX-Anfragen zu machen., swap HTML-Inhalte und die Bearbeitung von Ereignissen direkt in Ihren HTML-Attributen.MSC3 IM' ?ve verwendet HTX seit etwa zwei Jahren an dieser Stelle und mit jedem Projekt erfahre ich mehr und mehr über seine Fähigkeiten und noch wichtiger ist es. Jedoch behaupte ich immer noch nicht, Expertenwissen von ihm zu haben. Ich wollte nur einige der Dinge teilen, die I'... auf dem Weg gelernt haben. > **Art.-Nr. der Gesellschaft** Dieser Artikel konzentriert sich auf HTMX-''s Ereignissystem.,'s Erweiterungen und erweiterte Individualisierungen.MSC3' Für ASP-MSC4'NET Kernintegrationsmuster mit Teilansichten. ,'s HTMLC6'NET.MSSK7' und Pagination.,'s siehe meinen Begleiter Artikel. [HTMX mit ASP-.-NET-Kernteilchen, der Server, die Renaissance](/blog/htmx-aspnetcore-partials). [TOC] # Veranstaltungen ## Antrag auf Vorbereitung In der Request-Vorbereitungsphase konfiguriert HTMX die Anforderung, bevor sie an den Server gesendet wird.Dies beinhaltet die Einstellung von Headern, die Parameter hinzufügen., und die Handhabung von Benutzereingaben Die folgenden Ereignisse werden während dieser Phase ausgelöst. ```mermaid flowchart LR A[htmx:configRequest] --> B[htmx:confirm] --> C[htmx:prompt] --> D[htmx:abort] ``` ## Antrag Lebenszyklus Die Request-Lebenszyklusphase ist, wo HTMX die Anfrage an den Server sendet und das Response bearbeitet.Die folgenden Ereignisse werden während dieser Phase ausgelöst. ```mermaid flowchart LR E[htmx:beforeRequest] --> F[htmx:request] --> G[htmx:afterRequest] ``` ## Reaktionsbehandlung Die Reaktionsbearbeitungsphase ist, wo HTMX die Antwort vom Server verarbeitet und das DOM-. updates Die folgenden Ereignisse werden während dieser Phase ausgelöst. ```mermaid flowchart LR H[htmx:beforeOnLoad] --> I[htmx:onLoad] I --> J[htmx:beforeSwap] --> K[htmx:swap] --> L[htmx:afterSwap] L --> M[htmx:afterSettle] --> N[htmx:afterOnLoad] ``` ## Geschichtsverwaltung Die Geschichte Management Phase ist, wo HTMX aktualisiert die Browser-Historie und URL... Die folgenden Ereignisse werden während dieser Phase ausgelöst ```mermaid flowchart LR A[htmx:historyRestoreRequest] A --> B[htmx:historyPopped] B --> C[htmx:historyRestorePage] ``` Wie Sie sehen können, bietet HTMX eine Reihe von Ereignissen an, die Sie einhaken können, um die Anforderung oder Antwort zu ändern.,- oder sogar Geschichte.MSC1-HTMX macht einen LOT für das Sein eines solchen kompakten Systems. # Erweiterungen Einer der mächtigsten Aspekte von HTMX ist die Fähigkeit, [Erweiterungen erstellen](https://v2-0v2-0.htmx.org/extensions/) um seine Fähigkeiten zu erweitern..- In meinem Fall greife ich normalerweise in `htmx:configRequest` zusätzliche Parameter zum Request hinzufügen Dies ist nützlich, wenn Sie zusätzliche Daten an den Server übergeben möchten, ohne den HTML- oder JavaScript-Code ändern zu müssen. Andere Erweiterungen können Haken `htmx:beforeRequest` um die Anfrage zu ändern, bevor sie gesendet wird, aber **nach** die meisten anderen Erweiterungen, die Haken `configRequest`Wie in `beforeRequest` Sachen wie `HX-Vals` und `HX-Include`s sind bereits in der Nutzlast an die reuest (ether angehängt Du kannst sogar haken `htmx:afterSwap` um Aktionen durchzuführen, nachdem der Inhalt geswappt wurde..-In Kombination mit clientseitigen Templating-Bibliotheken wie [Alpen-.-js](https://alpinejs.dev/) oder [Liter](https://lit.dev/) Sie können leistungsstarke dynamische Anwendungen mit minimalem Code erstellen HTMX bietet einige eingebaute --Erweiterungen wie `hx-boost` und `hx-swap-oob` die Ihnen erlauben, die Funktionalität von HTMX zu verbessern, ohne einen benutzerdefinierten Code zu schreiben..- jedoch gibt es Zeiten, in denen Sie Ihre eigenen Erweiterungen erstellen müssen, um bestimmte Anforderungen zu erfüllen. Zum Beispiel möchten Sie möglicherweise benutzerdefinierte Kopfzeilen zu Ihren Anfragen hinzufügen., modifizieren Sie die Anforderung payload.MSC2 , oder behandeln Sie bestimmte Ereignisse in einer einzigartigen Weise. Um diese HTMX zu erreichen bietet Ihnen einige praktische Integrationspunkte ```javascript { /** * init(api) * Called once when the extension is initialized. * Use it to set up internal state, store references, or access HTMX utility functions via the api parameter. */ init: function(api) { return null; }, /** * getSelectors() * Returns additional CSS selectors that HTMX should monitor. * Useful if your extension needs to handle custom elements or dynamic behavior. */ getSelectors: function() { return null; }, /** * onEvent(name, evt) * Called on every HTMX event (e.g., htmx:beforeRequest, htmx:afterSwap). * Return false to cancel the event or stop propagation. */ onEvent: function(name, evt) { return true; }, /** * transformResponse(text, xhr, elt) * Modify the raw response text before it is parsed and swapped into the DOM. * Use this to sanitize or preprocess HTML. */ transformResponse: function(text, xhr, elt) { return text; }, /** * isInlineSwap(swapStyle) * Return true if your extension will handle this swap style manually. * This tells HTMX to skip default behavior. */ isInlineSwap: function(swapStyle) { return false; }, /** * handleSwap(swapStyle, target, fragment, settleInfo) * Perform custom DOM manipulation if you implement a custom swap style. * Return true to prevent HTMX's default swap. */ handleSwap: function(swapStyle, target, fragment, settleInfo) { return false; }, /** * encodeParameters(xhr, parameters, elt) * Modify or serialize request parameters before sending. * Return null to use default URL/form encoding. * Return a string to override with a custom payload (e.g., JSON). */ encodeParameters: function(xhr, parameters, elt) { return null; } } ``` HTMX bietet eine Reihe von vor--?built Erweiterungen können Sie [lesen Sie hier](https://htmx.org/extensions/). Zum Beispiel eine handliche [Builded---in-Erweiterung](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/json-enc/README.md) `json-encode` ermöglicht es Ihnen, JSON-Daten in der Request-Körper anstelle von URL.- encodiert Formular data.. . Dies ist nützlich, wenn Sie komplexe Datenstrukturen oder Arrays an den Server senden möchten. Sie können sehen, dass dieser Haken in Ereignisse - `init` Um die Erweiterung einzurichten und eine Referenz auf die HTMX API zu speichern - `onEvent` Um die `Content-Type` header zu `application/json` wenn die Anforderung konfiguriert ist - `encodeParameters` Es gibt auch eine Zeichenfolge zurück, um zu verhindern, dass HTMX die Standard-URL, -, kodierte Formkodierung verwendet. ```javascript (function() { let api htmx.defineExtension('json-enc', { init: function(apiRef) { api = apiRef }, onEvent: function(name, evt) { if (name === 'htmx:configRequest') { evt.detail.headers['Content-Type'] = 'application/json' } }, encodeParameters: function(xhr, parameters, elt) { xhr.overrideMimeType('text/json') const object = {} parameters.forEach(function(value, key) { if (Object.hasOwn(object, key)) { if (!Array.isArray(object[key])) { object[key] = [object[key]] } object[key].push(value) } else { object[key] = value } }) const vals = api.getExpressionVars(elt) Object.keys(object).forEach(function(key) { // FormData encodes values as strings, restore hx-vals/hx-vars with their initial types object[key] = Object.hasOwn(vals, key) ? vals[key] : object[key] }) return (JSON.stringify(object)) } }) })() ``` Oder sogar die einfacheren, aber immer mehr HANDY `hx-debug` Erweiterung, die eine `HX-Debug` header to the request..-Dies ist nützlich für Debugging und Protokollierungszwecke, da es Ihnen erlaubt, die rohen Request- und Antwortdaten in der dev-Konsole zu sehen. ```javascript (function() { htmx.defineExtension('debug', { onEvent: function(name, evt) { if (console.debug) { console.debug(name, evt) } else if (console) { console.log('DEBUG:', name, evt) } else { throw new Error('NO CONSOLE SUPPORTED') } } }) })() ``` Es ist viel mehr als ;, einschließlich einer sehr leistungsfähigen [clientseitige Templating-Erweiterung](https://github.com/bigskysoftware/htmx-extensions/tree/main/src/client-side-templates) die Ihnen erlaubt, client.- side vertemplating libraries zu verwenden, um zurückgegebene JSON-Daten in HTML zu transformieren, . Dies ist nützlich für das Erstellen dynamischer UIs ohne sich auf Server verlassen zu müssen. # Einige benutzerdefinierte Erweiterungen ## Dynamische Zeilen-IDs Zum Beispiel in einem neuen Projekt habe ich HTMX OOB Swaps verwendet, um eine Reihe von Zeilen in einer Tabelle zu aktualisieren. Um dies zu tun, wollte ich wissen, welche Zeilen derzeit in der Tabelle angezeigt wurden. ### Die Erweiterung ```javascript export default { encodeParameters: function (xhr, parameters, elt) { const ext = elt.getAttribute('hx-ext') || ''; if (!ext.split(',').map(e => e.trim()).includes('dynamic-rowids')) { return null; // Use default behavior } const id = elt.dataset.id; const approve = elt.dataset.approve === 'true'; const minimal = elt.dataset.minimal === 'true'; const single = elt.dataset.single === 'true'; const target = elt.dataset.target; const payload = { id, approve, minimal, single }; if (approve && target) { const table = document.querySelector(target); if (table) { const rowIds = Array.from(table.querySelectorAll('tr[id^="row-"]')) .map(row => row.id.replace('row-', '')); payload.rowIds = rowIds; } } // Merge payload into the parameters object Object.assign(parameters, payload); return null; // Return null to continue with default URL-encoded form encoding } } ``` ### Es zu benutzen Um es zu verwenden, müssen wir die Erweiterung zu unserer HTMX-Konfiguration hinzufügen. Also in Ihrem Einstiegspunkt js Datei Nehmen Sie an, dass Sie sich mit den Modulen ; yoy sollten Sie so etwas tun können ```javascript import dynamicRowIds from "./dynamicRowIds"; // Load the file htmx.defineExtension("dynamic-rowids", dynamicRowIds); // Register the extension ``` Dann auf welchem Element Sie es verwenden möchten, können Sie die `hx-ext` Attribut mit dem Wert `dynamic-rowids`. ```html ``` ## Params bewahren Dies ist eine weitere einfache HTMX-Erweiterung. `htmx:configRequest` Diese Erweiterung ist praktisch, wenn du die Querystring-basierte Filterung usw. verwendest.. und du möchtest, dass einige Anfragen vorhandener Filter erhalten, während andere nicht .g,, sondern ' und 'startdate', aber nicht ' oder ', sondern ')., Dies ist SIMILAR, aber nicht genau das gleiche wie die bestehende HTMX-Erweiterung [push---Params](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/path-params/README.md) ### Die Erweiterung Du kannst sehen, dass wir haken `onEvent` zu hören für die `htmx:configRequest` Ereignis Dann werden wir uns anstrengen - Holen Sie sich das Element, das das Ereignis ausgelöst hat - Holen Sie sich die `preserve-params-exclude` Attribut aus dem Element (, wenn es existiert, ) und teilt es in ein Array von Schlüsseln, um auszuschließen, dass wir nicht hinzufügen ', sie zu der Anfrage - Holen Sie sich die aktuellen URL-Parameter vom Fensterort - Holen Sie sich die neuen Parameter aus der Request URL - Schleifen Sie durch die aktuellen Parameter und überprüfen, ob sie nicht in der Ausschlussliste sind und nicht bereits in den neuen Parametern - Wenn sie nicht sind, fügen wir sie zu den neuen Parametern hinzu - Schließlich setzen wir die neuen Parameter auf die Request-URL und geben true zurück, um mit der Request fortfahren zu können. ```javascript export default { onEvent: function (name, evt) { if (name !== 'htmx:configRequest') return; const el = evt.detail.elt; const excludeStr = el.getAttribute('preserve-params-exclude') || ''; const exclude = excludeStr.split(',').map(s => s.trim()); const currentParams = new URLSearchParams(window.location.search); const newParams = new URLSearchParams(evt.detail.path.split('?')[1] || ''); currentParams.forEach((value, key) => { if (!exclude.includes(key) && !newParams.has(key)) { newParams.set(key, value); } }); evt.detail.path = evt.detail.path.split('?')[0] + '?' + newParams.toString(); return true; } }; ``` Hier verwende ich das Wesentliche [HTMX-.-Net](https://github.com/khalidabuhakmeh/Htmx.Net/tree/main) für seine Tag-Hilfskräfte. `hx-controller` und `hx-action` sind Tag-Helper, die die richtigen HTMX-Attribute für Sie generieren `hx-route-` für die Werte, die in der Route übergeben werden können Dieses ist wirklich nützlich, da es Ihnen erlaubt, den Code zu verwenden, um die korrekten Werte für die Attribute zu erzeugen, anstatt sie in Ihrem HTML programmieren zu müssen. ### Es zu benutzen Es ist eine Erweiterung, die es wirklich einfach zu verwenden ist. Zuerst müssen wir die Erweiterung zu unserer HTMX-Konfiguration hinzufügen. ```javascript import preserveParams from './preserveParams.js'; htmx.defineExtension('preserve-params', preserveParams); ``` HINWEIS:-You-'-ll beachten, dass die Standard-HTMX-Erweiterungen verwenden Sie die Methode ' zum Laden der Erweiterung "MSC4" ```javascript // Autoloading the extension and registering it (function() { htmx.defineExtension('debug', { } ``` Dies ist ein guter Weg, um es zu tun, wenn du HTMX in einer nicht-- modulen Umgebung verwendest ,. , jedoch , wenn Sie , ' , die Module verwenden , ( , welche Sie besser sein sollten , um die `import` Erklärung, um die Erweiterung laden dann explizit registrieren Sie es gegen Ihre `htmx` instance..- Dies ermöglicht es Ihnen, die Vorteile von tree.--Shaking zu nutzen und nur die Erweiterungen zu laden, die Sie benötigen. Dann können Sie auf Ihrem Element die `hx-ext` Attribut mit dem Wert `preserve-params` und der `preserve-params-exclude` Attribut mit einer durch Komma getrennten Liste der Parameter, um von der Anfrage auszuschließen ```html ``` In diesem Fall aufgrund der `event.detail.path` mit dem neuen `myparam` value set it in it - MSA Ersetzen Sie diesen mit unserem neuen Wert, aber bewahren Sie alle anderen `page` und `sort`So können wir halten übergeben alle Filter, die wir in der URL auf den Server gesetzt haben, ohne sich Sorgen um sie verloren gehen zu lassen, wenn wir eine neue Anfrage stellen. # ASP-.-NET Kern Eine der ordentlichen Sachen über HTMX ist, dass viel von seiner Interaktion mit dem Server durch HTTP-Header geschieht.Diese Header bieten dem Server einen reichhaltigen Kontext darüber, was die Anfrage ausgelöst hat.,... Auch hier ist ein Schlüsselbestandteil [HTMX-.-Net](https://github.com/khalidabuhakmeh/Htmx.Net/tree/main)Unter vielen der Gegenstände, die es zur Verfügung stellt sind ordentlich `Request` Erweiterungen zur Erkennung von HTMX-Anfragen Dies ist nützlich, um festzustellen, ob eine Anfrage von OTMX oder nicht gemacht wurde, und es entsprechend zu handhaben. Es hat auch einen eigenen Mechanismus, um Trigger zu senden ```csharp Response.Htmx(h => { h.WithTrigger("yes") .WithTrigger("cool", timing: HtmxTriggerTiming.AfterSettle) .WithTrigger("neat", new { valueForFrontEnd= 42, status= "Done!" }, timing: HtmxTriggerTiming.AfterSwap); }); ``` Drücke Urls usw. Khalid hat eine große Arbeit der Schaffung eines Satzes von Erweiterungen, um es einfach zu arbeiten mit HTMX in ASP-.... Es ist ein Schlüssel-Tool in meiner Toolbox, wenn es mit HTMX und ASP...NET Core®. zusammenarbeitet [**Sehen Sie es sich an.**](https://github.com/khalidabuhakmeh/Htmx.Net/tree/main) ## Häufige HTMX-Anforderung Header Hier ist eine Aufschlüsselung der nützlichsten Header, die HTMX mit jeder Anfrage sendet. Beschreibung |----------------------------|------------------------------------------------------------------------------------------------------------------| |-HX---Anfrage anfordern |-Antrag immer für jede HTMX eingestellt --Einleitungsanfrage T.-Anrufe in Middleware oder Controllern zu erkennen Die ID des Zielelements in der DOM, dass die Antwort wird in getauscht werden. Die ID des Elements, das die Anforderung ausgelöst hat Der Name des auslösenden Elements ist für Formulare nützlich. Beinhaltet Benutzereingaben von hx, -, prompt., Die Browser-URL, wenn die Anfrage gestartet wurde, ist nützlich für das Protokollieren und den Kontext. |-HX---Geschichte--Restore--Request Als wahr gesendet, wenn die Anfrage Teil einer historischen Wiederherstellung nach der Navigation ist .-G.,-Rückenknopf ## Verlängerungen beantragen Ich verwende diese ziemlich ausgiebig in meinen ASP-.-NET Core-Apps, kombiniert mit den HTMX-MSC2-Net Anwendungen wie `Request.IsHtmx()` , `Request.IsHtmxBoosted()` und `Request.IsHtmxNonBoosted()` Sie können HTMX-Anfragen leicht erkennen und entsprechend reagieren Zum Beispiel haben Sie eine wirklich einfache Erweiterung zu Anfrage, mit der ich erkennen kann, ob eine Anfrage auf mein Hauptziel ausgerichtet ist `#page-content` Wenn es dann IST, weiß ich, dass ich eine teilweise senden sollte HINWEIS:. Viele don-'.t erkennen, dass Sie eine vollständige Seite angeben können. ```csharp if (Request.PageContentTarget()) { Response.PushUrl(Request); return PartialView("List", vm); } return View("List", vm); public static class RequestExtensions { public static bool PageContentTarget(this HttpRequest request) { bool isPageContentTarget = request.Headers.TryGetValue("hx-target", out var pageContentHeader) && pageContentHeader == "page-content"; return isPageContentTarget; } } ``` ## Ansprechverlängerungen Zusätzlich zu Request-Erweiterungen können Sie auch Response-Erweiterungs erstellen, um Ereignisse an den Client zurückzuschicken.Dies ist nützlich für das Auslösen von clientseitigen Ereignissen. ### Beispiel für SweetAlert Zum Beispiel [in meiner SweetAlert-2-Integration](https://www.mostlylucid.net/blog/usingsweetalertforhxindicators) Ich aktiviere das Schließen des Dialogs mit einem Trigger, der vom Server gesetzt wird. ```javascript document.body.addEventListener('sweetalert:close', closeSweetAlertLoader); ``` Dies wird vom Server als HTMX Trigger Ereignis ausgelöst. ```csharp public static void CloseSweetAlert(this HttpResponse response) { response.Headers.Append("HX-Trigger" , JsonSerializer.Serialize(new { sweetalert = "close" })); } ``` Dies löst die `sweetalert:close` Event auf der Client-Seite, mit dem Sie den Dialog schließen können, können Sie auch Daten an den Client übergeben. `HX-Trigger` Dies ist nützlich, um Daten vom Server an den Client weiterzugeben, ohne den HTML- oder JavaScript-Code ändern zu müssen. Wie du es siehst – 's tot leicht zu hören für diese Ereignisse, indem ich einfach einen Event-Hörer in den Körper einfüge – .. Ich verwende JSON hauptsächlich, da er immer richtig kodiert. ### Toast anzeigen Ich schrieb über meine Toast-Methode vorher [Hierher](https://www.mostlylucid.net/blog/showingtoastandswappingwithhtmx)Um den Server sehr einfach zu aktivieren, um eine Toast-Benachrichtigung auf der Clientseite auszulösen, habe ich den Auslöser in dieser Response-Erweiterung gesetzt. ```csharp public static void ShowToast(this HttpResponse response, string message, bool success = true) { response.Headers.Append("HX-Trigger", JsonSerializer.Serialize(new { showToast = new { toast = message, issuccess =success } })); } ``` Ich klinke mich dann in die Event-Client-Seite und rufe meine `showToast` Funktion„." ```javascript import { showToast, showHTMXToast } from './toast'; window.showHTMXToast = showHTMXToast; document.body.addEventListener("showToast", showHTMXToast); ``` Dies ruft dann in meine `showToast` Funktion und gut ,,' zeigt einen Toast , ;' wieder mehr darüber sehen [im Artikel ](https://www.mostlylucid.net/blog/showingtoastandswappingwithhtmx). ```javascript export function showHTMXToast(event) { const xhr = event?.detail?.xhr; let type = 'success'; let message = xhr?.responseText || 'Done!'; try { const data = xhr ? JSON.parse(xhr.responseText) : event.detail; if (data.toast) message = data.toast; if ('issuccess' in data) { type = data.issuccess === false ? 'error' : 'success'; } else if (xhr?.status >= 400) { type = 'error'; } else if (xhr?.status >= 300) { type = 'warning'; } } catch { if (xhr?.status >= 400) type = 'error'; else if (xhr?.status >= 300) type = 'warning'; } showToast(message, 3000, type); } ``` ## Schlussfolgerung Na ja, das ist es.,. Eine Wirbelwindtour von HTMX und ASP.MSC2.NET Core... .. Ich hoffe, Sie fanden sie nützlich und informativ... Wenn Sie Fragen oder Kommentare haben, zögern Sie nicht unten zu kommentieren ## Verwandte Artikel auf diesem Blog ### Gesellschafter Artikel Dieser Artikel ist Teil einer zweiseitigen Serie auf HTMX mit ASP-..NET Core-:. 1. **[HTMX mit ASP-.-NET Core Partials](/blog/htmx-aspnetcore-partials)** Fokussierung auf die Kernintegration von ASP ,. ,NET , , , Teilansichten von , HTMX , . , und Pagination 2. **Dieser Artikel** Deep tauchen Sie ein in HTMX-Ereignisse, Lifecycle, Erweiterungsarchitektur und benutzerdefinierte Erweiterungen ### Weitere HTMX-Artikel - [Paging mit HTMX hinzufügen](/blog/addpagingwithhtmx) Umsetzung der Pagination mit HTMX - [ASP-.-NET Core Caching mit HTMX](/blog/aspnetcachingwithhtmx) Caching-Strategien für HTMX Anfragen - [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 HTMX-Dokumentation** - [HTMX-Dokumentation](https://htmx.org/docs/) Die offizielle HTMX-Dokumentation - [HTMX-Ereignisse Referenz](https://htmx.org/events/) Vollständige Liste der HTMX-Ereignisse - [HTMX-Erweiterungen](https://htmx.org/extensions/) Offizielle HTMX-Erweiterungen - [HTMX-Beispiele](https://htmx.org/examples/) Praktische Beispiele für HTMX-Muster - [HTMX Abhandlungen](https://htmx.org/essays/) Nachdenkliche Artikel über HTMX Philosophie **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 - [Website von Khalid Abuhakmeh'](https://khalidabuhakmeh.com/) Der Schöpfer von HTMX-.-NET - [Alpine-.-Dokumentation](https://alpinejs.dev/) Amtliche Veröffentlichungen der Europäischen Gemeinschaften **Gemeinschaftsressourcen** - [HTMX-Diskord](https://htmx.org/discord) Aktive Community-Unterstützung - [Hypermedia Systems Buch](https://hypermedia.systems/) Kostenloses Online-Buch über den Aufbau von Hypermedia-Anwendungen