Htmx

The Confinity Page Module has an integration for htmx. It allows re-rendering of single ConfinityContent components which are on a page.

That the ConfinityContent component can be found the according id must be passed over as an additional header. This can be done natively with hx-headers='{"hx-confinity-component": "@Model.Id"}' or by using our tag helper hx-confinity-content="@Model.Id". Apart from this, htmx has no further limitations.

Setup

  1. Add the HtmxModule module.
  2. Make sure you provide the htmx javascript where needed

Accessing hx

Data passed from htmx can be accessed by injecting HtmxContext.

Example Component

@using Confinity.Htmx
@model DocsDemos.Modules.Htmx.HtmxSimpleComponent.HtmxSimpleComponent
@addTagHelper *, Confinity.Htmx

<div hx-get="?" hx-confinity-content="@Model.Id" hx-swap="HtmxSwapping.OuterHtml">
    The server time is: @DateTimeOffset.Now.ToString("HH:mm:ss zz")
    <button hx-submit>Refresh</button>
</div>