Htmxor 0.0.0-alpha.1.40
See the version list below for details.
dotnet add package Htmxor --version 0.0.0-alpha.1.40
NuGet\Install-Package Htmxor -Version 0.0.0-alpha.1.40
<PackageReference Include="Htmxor" Version="0.0.0-alpha.1.40" />
paket add Htmxor --version 0.0.0-alpha.1.40
#r "nuget: Htmxor, 0.0.0-alpha.1.40"
// Install Htmxor as a Cake Addin #addin nuget:?package=Htmxor&version=0.0.0-alpha.1.40&prerelease // Install Htmxor as a Cake Tool #tool nuget:?package=Htmxor&version=0.0.0-alpha.1.40&prerelease
Htmxor - supercharging Blazor Static SSR with Htmx
This packages enables Blazor Static SSR (.NET 8 and later) to be used seamlessly with Htmx.
Blazor Static SSR comes with basic interactivity via enhanced navigation and enhanced form handling. Adding Htmx (htmx.org) to the mix gives you access to another level of interactivity while still retaining all the advantages of Blazor SSR stateless nature.
NOTE: This package is highly experimental!
Nuget: https://www.nuget.org/packages/Htmxor
Samples
The following Blazor Web Apps (Htmxor) are used to test Htmxor and demo the capabilities of it.
Getting started
Download the Minimal Htmxor App template for a complete (but) minimal Blazor + htmx app, with various small examples included.
Starting fresh, here is what you need to do.
Include the Htmxor package from NuGet.
Modify
Program.csto look like this:
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services
.AddRazorComponents()
+ .AddHtmx();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntiforgery();
+ app.UseHtmxAntiforgery();
app.MapRazorComponents<App>()
+ .AddHtmxorComponentEndpoints(app);
app.Run();
Note, there is an overload for AddHtmx(options => { ... }) that allows you to configure all htmx's configuration options for your app.
- Modify
App.razorto look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="MinimalHtmxorApp.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
+ <HtmxHeadOutlet />
<HeadOutlet />
</head>
+
+ <body hx-boost="true">
<Routes />
- <script src="_framework/blazor.web.js"></script>
</body>
</html>
- Optionally, create a htmx-request specific layout, e.g.,
/Components/Layout/HtmxorLayout.razor:
@*
This is a default layout component that is used with htmx requests.
It only includes the <HeadOutlet /> which makes it possible to update the
page title during htmx requests by using the <PageTitle></PageTitle> component.
*@
@inherits LayoutComponentBase
<HeadOutlet />
@Body
- Optionally, update
_Imports.razor:
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
+ @using Htmxor.Components
+ @using Htmxor.Http
+ @using Htmxor
+ @attribute [HxLayout(typeof(HtmxorLayout))]
Note that we set up the custom layout for all components by defining the [HxLayout(typeof(HtmxorLayout))] attribute in the _Imports.razor file.
Documentation
- Routing in Htmxor: Covers how routing works in Htmor, compared to Blazor Static Web apps.
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net8.0 is compatible. 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. |
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.1)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.