Htmx for ASP.net projects
$ dotnet add package Rizzy.HtmxRizzy.Htmx is a lightweight .NET library designed to integrate htmx (version 2.0 or greater) functionality into your Rizzy-powered web applications. It centralizes all htmx-specific logic in one place, making it easier to manage dynamic client interactions, HTML swapping, and related response operations from your server-side code.
Seamless htmx Integration: Easily integrate htmx features into your application with centralized configuration and helper methods.
Dynamic Response Operations: Use the Response.Htmx action method to execute multiple operations on your response. For example:
HttpContext.Response.Htmx(response => {
response.PushUrl("/new-url")
.Reswap("outerHTML");
});
Fluent Builder APIs: Construct and customize triggers, swap styles, and other htmx behaviors using fluent builder classes.
Server-Side Configuration: Leverage source-generated JSON contexts for efficient serialization and deserialization of htmx configuration data.
Integrated with Rizzy: Works hand in hand with other Rizzy services and components to provide a cohesive experience.
Install the library via NuGet:
dotnet add package Rizzy.Htmx
In your application’s startup (e.g., in Program.cs), add Rizzy.Htmx to the service collection and configure it as needed:
using Rizzy.Htmx;
using Rizzy.Configuration;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddHtmx(options =>
{
// Enable browser history, define default swap delays, and more:
options.HistoryEnabled = true;
options.RefreshOnHistoryMiss = true;
options.DefaultSwapDelay = TimeSpan.FromMilliseconds(250);
// Additional configuration properties...
});
In your controllers, leverage Rizzy.Htmx to build your responses when handling htmx requests:
using Rizzy.Htmx;
using Rizzy.Framework.Mvc;
public class HomeController : RzController
{
public IResult Index()
{
// Return a view with htmx enhancements:
return View<MyComponent>(new { message = "Hello HTMX!" });
}
public IResult Update()
{
// Set multiple htmx response operations using the Response.Htmx action method:
HttpContext.Response.Htmx(response =>
{
response.PushUrl("/new-url")
.Reswap("outerHTML");
});
return Results.Ok("Update succeeded.");
}
}Ensure you are using htmx version 2.0 or greater. In your HTML pages, include the htmx client script via a CDN or serve it locally:
<script src="https://unpkg.com/htmx.org@2.0.0"></script>When you use Rizzy.Htmx alongside other Rizzy components, required assets may be automatically loaded.
The Rizzy.Htmx library provides several key features:
Configuration Objects: Define htmx behavior via objects such as HtmxConfig (including properties for history, caching, swap delays, etc.).
Request and Response Helpers: Use HtmxRequest and HtmxResponse to access or manipulate htmx-specific headers, such as push URL, redirection, and content swapping.
Fluent Builders: Create and manipulate htmx triggers and swap styles using builder classes (e.g., TriggerBuilder, SwapStyleBuilder).
Response.Htmx Action Method: Easily compose multiple response actions, for example:
HttpContext.Response.Htmx(response =>
{
response.PushUrl("/new-url")
.Reswap("outerHTML");
});
For complete API documentation, please refer to the Rizzy.Htmx documentation.
Contributions to Rizzy.Htmx are welcome. If you find bugs, have feature requests, or wish to contribute to the project, please create an issue or submit a pull request on the GitHub repository.
This project is licensed under the MIT License.
This README provides an overview of the Rizzy.Htmx library along with installation, configuration, and usage examples. Feel free to modify or extend it based on the needs of your project.