Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 16 additions & 38 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,9 @@ Provides HTMX integration for ASP.NET Core applications.
* [HtmxHeaderTagHelper](#htmxheadertaghelper)
* [HtmxConfigTagHelper](#htmxconfigtaghelper)
* [Response Handling Configuration](#response-handling-configuration)
* [Antiforgery Token](#antiforgery-token)
* [Toolkit Script](#toolkit-script)
* [Supported Versions](#supported-versions)
* [Contributions](#contributions)
* [Changelog](#changelog)
* [1.2.2](#122)
* [1.2.1](#121)
* [1.2.0](#120)
* [1.1.0](#110)
* [License](#license)
<!-- TOC -->

Expand Down Expand Up @@ -675,18 +670,18 @@ Alternatively, you can set the entire response handling configuration directly a
}" />
```

## Antiforgery Token
## Toolkit Script

If you have enabled the generation of the **Antiforgery** token in the configuration
(`include-antiforgery-token="true"`), then you need to include a small JavaScript file
that will ensure this token is present in form parameters or headers
and refresh it in a timely manner.
The toolkit script provides antiforgery support and HTMX compatibility behavior.
If you have enabled **Antiforgery** token generation in the configuration
(`include-antiforgery-token="true"`), include it to ensure the token is present in form
parameters or headers and refreshed in a timely manner.

To do this, you can directly include the contents of the JavaScript file on the page:
To do this, you can directly include the contents of the script file on the page:

```html
<script>
@Html.HtmxAntiforgeryScript()
@Html.HtmxToolkitScript()
</script>
```

Expand All @@ -695,7 +690,7 @@ you can pass the debug parameter with a value of `true`:

```html
<script>
@Html.HtmxAntiforgeryScript(debug: true)
@Html.HtmxToolkitScript(debug: true)
</script>
```

Expand All @@ -710,7 +705,7 @@ Alternatively, you can register the corresponding endpoint for the script by cal
```csharp
app.UseAuthorization();
...
app.MapHtmxAntiforgeryScript();
app.MapHtmxToolkitScript();
app.MapControllers();
```

Expand All @@ -723,53 +718,36 @@ when the script content is modified.
If you want to change the path to your own, specify this path in the parameter.

```csharp
app.MapHtmxAntiforgeryScript("/my-path");
app.MapHtmxToolkitScript("/my-path");
```

Now, include it on the page.

```html
<script src="@Html.HtmxAntiforgeryScriptPath()"></script>
<script src="@Html.HtmxToolkitScriptPath()"></script>
```

Alternatively, to retrieve the debug version of the script, you can pass the `debug` parameter
with a value of `true`, which instructs to include a query parameter `?debug` in the path.
The presence of this parameter determines the loading of the debug version:

```html
<script src="@Html.HtmxAntiforgeryScriptPath(debug: true)"></script>
<script src="@Html.HtmxToolkitScriptPath(debug: true)"></script>
```

The `debug` parameter determines whether to load the minimized version (used by default)
or the debug version of the script.

## Supported Versions

| | Version |
|------|------------|
| .NET | 6, 7, 8, 9 |
| | Version |
|------|----------------|
| .NET | 6, 7, 8, 9, 10 |

## Contributions

Bug reports and contributions are welcome.

## Changelog

### 1.2.2
Explicitly pass `document` object to event listeners in `htmx-toolkit.js` to improve compatibility

### 1.2.1
Add `[DisallowNull]` attribute to `Reswap` property to disallow null input

### 1.2.0
* Add `AjaxContext` to align with the capabilities provided by htmx
* Add method overloads for `PushUrl` and `ReplaceUrl` that prevents URL changes (`PreventPushUrl` / `PreventReplaceUrl`)
* Add support `<htmx-config />` element as a standalone HTML element

### 1.1.0
* Add overloads for IsHtmxRequest and IsHtmxBoosted methods enabling retrieval of htmx request headers
* Improve HtmxRequestAttribute

## License
This package is released as open source under the **MIT License**.
See the [LICENSE](https://github.com/rameel/ramstack.htmxtoolkit/blob/main/LICENSE) file for more details.
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
</div>

<script src="https://unpkg.com/htmx.org@2"></script>
<script src="@Html.HtmxAntiforgeryScriptPath()"></script>
<script src="@Html.HtmxToolkitScriptPath()"></script>
<script src="~/js/demo.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion samples/Ramstack.HtmxToolkit.Demo/Program.cs
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

app.UseStaticFiles();
app.UseRouting();
app.MapHtmxAntiforgeryScript();
app.MapHtmxToolkitScript();
app.MapRazorPages();

app.Run();
40 changes: 10 additions & 30 deletions src/Ramstack.HtmxToolkit/Builder/EndpointRouteBuilderExtensions.cs
Original file line number Diff line number Diff line change
Expand Up @@ -16,44 +16,24 @@ public static class EndpointRouteBuilderExtensions
internal static string AssetPath { get; private set; } = $"/htmxtoolkit/{HtmxAssets.Hash}";

/// <summary>
/// Maps a GET request to the default path for the htmx anti-forgery script.
/// Maps an endpoint that serves the HTMX toolkit script at the default path.
/// </summary>
/// <remarks>
/// Ensure to include the following script tag in your <c>Layout.cshtml</c> or <c>Razor view</c>:
/// <code>
/// <![CDATA[
/// <script src="@Html.HtmxAntiforgeryScriptPath()"></script>
/// or
/// <script src="@Html.HtmxAntiforgeryScriptPath(debug: true)"></script>
/// ]]>
/// </code>
/// </remarks>
/// <param name="builder">The <see cref="IEndpointRouteBuilder"/> to add the route to.</param>
/// <param name="builder">The endpoint route builder.</param>
/// <returns>
/// An <see cref="IEndpointConventionBuilder"/> that can be used to further configure the endpoint.
/// The endpoint convention builder for the mapped script endpoint.
/// </returns>
public static IEndpointConventionBuilder MapHtmxAntiforgeryScript(this IEndpointRouteBuilder builder) =>
builder.MapHtmxAntiforgeryScript(AssetPath);
public static IEndpointConventionBuilder MapHtmxToolkitScript(this IEndpointRouteBuilder builder) =>
builder.MapHtmxToolkitScript(AssetPath);

/// <summary>
/// Maps a GET request to the specified path for the htmx anti-forgery script.
/// Maps an endpoint that serves the HTMX toolkit script at the specified path.
/// </summary>
/// <remarks>
/// Ensure to include the following script tag in your <c>Layout.cshtml</c> or <c>Razor view</c>:
/// <code>
/// <![CDATA[
/// <script src="@Html.HtmxAntiforgeryScriptPath()"></script>
/// or
/// <script src="@Html.HtmxAntiforgeryScriptPath(debug: true)"></script>
/// ]]>
/// </code>
/// </remarks>
/// <param name="builder">The <see cref="IEndpointRouteBuilder"/> to add the route to.</param>
/// <param name="path">The path to map the GET request to.</param>
/// <param name="builder">The endpoint route builder.</param>
/// <param name="path">The path at which to serve the script.</param>
/// <returns>
/// An <see cref="IEndpointConventionBuilder"/> that can be used to further configure the endpoint.
/// The endpoint convention builder for the mapped script endpoint.
/// </returns>
public static IEndpointConventionBuilder MapHtmxAntiforgeryScript(this IEndpointRouteBuilder builder, string path)
public static IEndpointConventionBuilder MapHtmxToolkitScript(this IEndpointRouteBuilder builder, string path)
{
if (path.Length == 0)
throw new ArgumentException(
Expand Down
22 changes: 10 additions & 12 deletions src/Ramstack.HtmxToolkit/HtmlHelperExtensions.cs
Original file line number Diff line number Diff line change
Expand Up @@ -24,26 +24,24 @@ public static class HtmlHelperExtensions
internal static HtmlString DebugPath { get; set; } = new(EndpointRouteBuilderExtensions.AssetPath + "?debug");

/// <summary>
/// Returns an HTML string containing the script for htmx to integrate with the anti-forgery feature of ASP.NET Core.
/// Returns the HTMX toolkit script content.
/// </summary>
/// <param name="_">The <see cref="IHtmlHelper"/> instance that this method extends.</param>
/// <param name="debug">A boolean value indicating whether to use the debug version of the script.
/// Defaults to <see langword="false" />.</param>
/// <param name="_">The HTML helper.</param>
/// <param name="debug">Whether to return the debug version of the script.</param>
/// <returns>
/// An HTML string of the script.
/// The HTMX toolkit script content.
/// </returns>
public static IHtmlContent HtmxAntiforgeryScript(this IHtmlHelper _, bool debug = false) =>
public static IHtmlContent HtmxToolkitScript(this IHtmlHelper _, bool debug = false) =>
debug ? s_debugScript : s_script;

/// <summary>
/// Returns an HTML string of the path to the script to integrate with the anti-forgery feature of ASP.NET Core.
/// Returns the path to the HTMX toolkit script endpoint.
/// </summary>
/// <param name="_">The <see cref="IHtmlHelper"/> instance that this method extends.</param>
/// <param name="debug">A boolean value indicating whether to use the debug version of the script.
/// Defaults to <see langword="false" />.</param>
/// <param name="_">The HTML helper.</param>
/// <param name="debug">Whether to return the debug version of the script.</param>
/// <returns>
/// An HTML string of the path to the script.
/// The HTMX toolkit script endpoint path.
/// </returns>
public static IHtmlContent HtmxAntiforgeryScriptPath(this IHtmlHelper _, bool debug = false) =>
public static IHtmlContent HtmxToolkitScriptPath(this IHtmlHelper _, bool debug = false) =>
debug ? DebugPath : Path;
}
Loading