Htmxor 0.0.0-alpha.1.20

This is a prerelease version of Htmxor.

There is a newer prerelease version of this package available.
See the version list below for details.

dotnet add package Htmxor --version 0.0.0-alpha.1.20

NuGet\Install-Package Htmxor -Version 0.0.0-alpha.1.20

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="Htmxor" Version="0.0.0-alpha.1.20" />

For projects that support PackageReference, copy this XML node into the project file to reference the package.

paket add Htmxor --version 0.0.0-alpha.1.20

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: Htmxor, 0.0.0-alpha.1.20"

#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 Htmxor as a Cake Addin
#addin nuget:?package=Htmxor&version=0.0.0-alpha.1.20&prerelease

// Install Htmxor as a Cake Tool
#tool nuget:?package=Htmxor&version=0.0.0-alpha.1.20&prerelease

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

Htmxor - supercharging Blazor Static SSR with Htmx

Htmxor logo

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.cs to 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.razor to 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.

Product	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.

Compatible target framework(s)

Included target framework(s) (in package)

Learn more about Target Frameworks and .NET Standard.

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.