Htmx 0.0.11

.NET Standard 2.0
There is a newer version of this package available.
See the version list below for details. 
dotnet add package Htmx --version 0.0.11
NuGet\Install-Package Htmx -Version 0.0.11
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="Htmx" Version="0.0.11" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add Htmx --version 0.0.11
#r "nuget: Htmx, 0.0.11"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
// Install Htmx as a Cake Addin
#addin nuget:?package=Htmx&version=0.0.11

// Install Htmx as a Cake Tool
#tool nuget:?package=Htmx&version=0.0.11

alternate text is missing from this package README image

This is a package designed to add server-side helper methods for HttpRequest and HttpResponse. This makes working with htmx server-side concepts simpler.

Htmx Extension Methods

Getting Started

Install the Htmx NuGet package to your ASP.NET Core project.

dotnet add package Htmx

HttpRequest

Using the HttpRequest, we can determine if the request was initiated by Htmx on the client.

httpContext.Request.IsHtmx()

This can be used to either return a full page response or a partial page render.

// in a Razor Page
return Request.IsHtmx()
    ? Partial("_Form", this)
    : Page();

We can also retrieve the other header values htmx might set.

Request.IsHtmx(out var values);

Read more about the other header values on the official documentation page.

HttpResponse

We can set Http Response headers using the Htmx extension method, which passes an action and HtmxResponseHeaders object.

Response.Htmx(h => {
    h.Push("/new-url")
     .TriggerAfterSettle("yes")
     .TriggerAfterSwap("cool");
});

Read more about the HTTP response headers at the official documentation site.

Htmx.TagHelpers

Getting Started

Install the Htmx.TagHelpers NuGet package to your ASP.NET Core project. Targets .NET Core 3.1+ projects.

dotnet add package Htmx.TagHelpers

Make the Tag Helpers available in your project by adding the following line to your _ViewImports.cshtml:

@addTagHelper *, Htmx.TagHelpers

You'll generally need URL paths pointing back to your ASP.NET Core backend. Luckily, Htmx.TagHelpers mimics the url generation included in ASP.NET Core. This makes linking HTMX with your ASP.NET Core application a seamless experience.

<div hx-target="this">
    <button hx-get
            hx-page="Index"
            hx-page-handler="Snippet"
            hx-swap="outerHtml">
        Click Me (Razor Page w/ Handler)
    </button>
</div>

<div hx-target="this">
    <button hx-get
            hx-controller="Home"
            hx-action="Index"
            hx-route-id="1">
        Click Me (Controller)
    </button>
</div>

<div hx-target="this">
    <button hx-post
            hx-route="named">
        Click Me (Named)
    </button>
</div>

Htmx.Config

An additional htmx-config tag helper is included that can be applied to a meta element in your page's head that makes creating HTMX configuration simpler. For example, below we can set the historyCacheSize, default indicatorClass, and whether to include ASP.NET Core's anti-forgery tokens as an additional element on the HTMX configuration.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="htmx-config" 
          historyCacheSize="20"
          indicatorClass="htmx-indicator"
          includeAspNetAntiforgeryToken="true"
          />
    
</head>

The resulting HTML will be.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="htmx-config" content='{"indicatorClass":"htmx-indicator","historyCacheSize":20,"antiForgery":{"formFieldName":"__RequestVerificationToken","headerName":"RequestVerificationToken","requestToken":"<token>"}}' />
    
</head>

HTMX and Anti-forgery Tokens

You can set the attribute includeAspNetAntiforgerToken on the htmx-config element. Then you'll need to include this additional JavaScript in your web application.

document.addEventListener("htmx:configRequest", (evt) => {
    let httpVerb = evt.detail.verb.toUpperCase();
    if (httpVerb === 'GET') return;

    let antiForgery = htmx.config.antiForgery;

    if (antiForgery) {

        // already specified on form, short circuit
        if (evt.detail.parameters[antiForgery.formFieldName])
            return;

        if (antiForgery.headerName) {
            evt.detail.headers[antiForgery.headerName]
                = antiForgery.requestToken;
        } else {
            evt.detail.parameters[antiForgery.formFieldName]
                = antiForgery.requestToken;
        }
    }
});

You can access the snippet in two ways. The first is to use the HtmxSnippet static class in your views.

<script>
@Html.Raw(HtmxSnippets.AntiforgeryJavaScript)
</script>

A simpler way is to use the HtmlExtensions class that extends IHtmlHelper.

@Html.HtmxAntiforgeryScript()

This html helper will result in a <script> tag along with the previously mentioned JavaScript. Note: You can still register multiple event handlers for htmx:configRequest, so having more than one is ok.

License

Copyright © 2021 Khalid Abuhakmeh

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Product Compatible and additional computed target framework versions.
.NET net5.0 was computed.  net5.0-windows was computed.  net6.0 was computed.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
.NET Core netcoreapp2.0 was computed.  netcoreapp2.1 was computed.  netcoreapp2.2 was computed.  netcoreapp3.0 was computed.  netcoreapp3.1 was computed. 
.NET Standard netstandard2.0 is compatible.  netstandard2.1 was computed. 
.NET Framework net461 was computed.  net462 was computed.  net463 was computed.  net47 was computed.  net471 was computed.  net472 was computed.  net48 was computed.  net481 was computed. 
MonoAndroid monoandroid was computed. 
MonoMac monomac was computed. 
MonoTouch monotouch was computed. 
Tizen tizen40 was computed.  tizen60 was computed. 
Xamarin.iOS xamarinios was computed. 
Xamarin.Mac xamarinmac was computed. 
Xamarin.TVOS xamarintvos was computed. 
Xamarin.WatchOS xamarinwatchos was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on Htmx:

Package Downloads
IPWhitelist

Package Description

GitHub repositories (1)

Showing the top 1 popular GitHub repositories that depend on Htmx:

Repository Stars
westonwalker/BlazorMinimalAPI
Version Downloads Last updated
1.8.0 139 4/22/2024
1.7.0 10,754 2/9/2024
1.6.3 6,603 1/3/2024
1.6.2 432 1/2/2024
1.6.1 10,008 10/23/2023
1.6.0 884 10/16/2023
1.5.0 2,645 10/4/2023
1.4.0 2,533 9/27/2023
1.3.1 9,887 8/16/2023
1.3.0 6,127 8/11/2023
1.2.0 3,048 7/24/2023
1.1.3 8,376 5/31/2023
1.1.1 156 5/31/2023
1.1.0 169 5/31/2023
1.0.1 28,951 11/3/2022
1.0.0 6,973 8/4/2022
0.0.19 1,126 7/22/2022
0.0.18 2,438 6/16/2022
0.0.16 815 6/14/2022
0.0.15 4,503 1/26/2022
0.0.14 408 1/26/2022
0.0.13 403 1/26/2022
0.0.12 2,446 10/5/2021
0.0.11 515 9/29/2021
0.0.10 288 9/15/2021
0.0.9 291 9/15/2021
0.0.8 307 9/9/2021
0.0.7 267 9/3/2021
0.0.6 293 8/31/2021
0.0.5 261 8/30/2021
0.0.4 283 8/12/2021
0.0.3 368 8/6/2021
0.0.1 328 7/30/2021
0.0.0-alpha.0 126 9/29/2021