### Direct Routing Example

Source: https://github.com/egil/htmxor/blob/main/docs/index.md

Demonstrates how direct routing bypasses the root component and standard layout. It shows how a component can be routed to directly, optionally including a specified HtmxLayout.

```text
HTTP GET /my-htmx-page-with-layout
HtmxLayout --> MyHtmxPageWithHtmxLayout

HTTP GET /my-htmx-page
MyHtmxPage
```

--------------------------------

### Add Htmxor Services and Middleware to Program.cs

Source: https://github.com/egil/htmxor/blob/main/docs/index.md

Modify Program.cs to include Htmxor services and middleware for Blazor applications. This setup is essential for enabling Htmxor functionality.

```csharp
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);
          app.UseHsts();
      }

      app.UseHttpsRedirection();

      app.UseStaticFiles();
      app.UseAntiforgery();
    app.UseHtmxAntiforgery();
      app.MapRazorComponents<App>()
         .AddHtmxorComponentEndpoints(app);

      app.Run();
    
```

--------------------------------

### Setup Htmxor Services and Middleware

Source: https://context7.com/egil/htmxor/llms.txt

Registers Htmxor services and antiforgery middleware. Configure global htmx behavior via HtmxConfig. Registers direct-routing endpoints for Blazor components.

```csharp
var builder = WebApplication.CreateBuilder(args);

builder.Services
    .AddRazorComponents()
    .AddHtmx(config =>
    {
        config.DefaultSwapStyle = SwapStyle.outerHTML;
        config.SelfRequestsOnly = true;
        config.HistoryCacheSize = 20;
        config.ScrollBehavior = ScrollBehavior.smooth;
        config.GlobalViewTransitions = true;
    });

var app = builder.Build();

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntiforgery();
app.UseHtmxAntiforgery(); // Injects antiforgery token into htmx requests

app.MapRazorComponents<App>()
   .AddHtmxorComponentEndpoints(app); // Registers htmx direct-routing endpoints

app.Run();
```

--------------------------------

### Trigger Fluent Builder Examples

Source: https://context7.com/egil/htmxor/llms.txt

Construct complex hx-trigger attribute values using the Trigger fluent builder. Supports various events, conditions, delays, throttling, and queuing options.

```razor
@* LiveSearch.razor *@
@using static Htmxor.Constants

@* hx-trigger="keyup changed delay:500ms" *@
<input hx-get="/search"
       hx-target="#results"
       hx-trigger="@Trigger.OnEvent("keyup").Changed().Delay(TimeSpan.FromMilliseconds(500))" />

@* hx-trigger="click[ctrlKey] throttle:2s consume queue:last" *@
<button hx-post="/save"
        hx-trigger="@Trigger.OnEvent("click").WithCondition("ctrlKey").Throttle(TimeSpan.FromSeconds(2)).Consume().Queue(TriggerQueueOption.last)">
    Ctrl+Save
</button>

@* hx-trigger="every 10s" — polling *@
<div id="stock-ticker"
     hx-get="/stock-price"
     hx-trigger="@Trigger.Every(TimeSpan.FromSeconds(10))">
    Loading price...
</div>

@* hx-trigger="revealed" — lazy load on scroll into view *@
<img hx-get="/thumbnail/42"
     hx-trigger="@Trigger.Revealed()"
     hx-swap="outerHTML"
     src="/placeholder.png" />

@* hx-trigger="click, load" — fire on click OR on page load *@
<div hx-get="/notifications"
     hx-trigger="@Trigger.OnEvent("click").Or().Load()">
    Check Notifications
</div>

@* hx-trigger="intersect root:.feed threshold:0.25" *@
<div hx-get="/load-more"
     hx-trigger="@Trigger.Intersect(root: ".feed", threshold: 0.25f)"
     hx-swap="beforeend"
     hx-target="#feed">
    Load More
</div>

@* hx-trigger="sse:newMessage" *@
<div hx-get="/messages/latest"
     hx-trigger="@Trigger.Sse("newMessage")">
    Messages
</div>
```

--------------------------------

### Handle Standard and Direct Routing Modes in Blazor

Source: https://context7.com/egil/htmxor/llms.txt

Create Blazor components that respond to both full-page requests (Standard Routing Mode) and htmx fragment requests (Direct Routing Mode) on the same URL.

```razor
@* Layout-aware component responding to both routing modes *@
@page "/products"
@attribute [HtmxRoute("/products")]
@inject HtmxContext Htmx

@if (Htmx.Request.RoutingMode == RoutingMode.Standard)
{
    @* Full page — rendered inside App.razor → Routes → MainLayout → Products *@
    <h1>Product Catalog</h1>
    <input hx-get="/products"
           hx-trigger="input changed delay:300ms"
           hx-target="#product-grid"
           name="q"
           placeholder="Search..." />
    <div id="product-grid">
        <ProductGrid Items="@AllProducts" />
    </div>
}
else
{
    @* Direct htmx request — rendered standalone, wrapped only in HtmxorLayout *@
    @* Htmx.Request.IsHtmxRequest == true *@
    @* Htmx.Request.Target == "product-grid" *@
    <ProductGrid Items="@FilteredProducts" />
}

@code {
    [SupplyParameterFromQuery] public string? Q { get; set; }

    private List<string> AllProducts = ["Widget A", "Widget B", "Gadget X"];

    private List<string> FilteredProducts =>
        string.IsNullOrEmpty(Q)
            ? AllProducts
            : AllProducts.Where(p => p.Contains(Q, StringComparison.OrdinalIgnoreCase)).ToList();
}
```

--------------------------------

### Configure Global Htmx Settings

Source: https://context7.com/egil/htmxor/llms.txt

Configure global htmx behavior by passing an HtmxConfig object to AddHtmx. This controls swap styles, history, scrolling, security, and more.

```csharp
builder.Services
    .AddRazorComponents()
    .AddHtmx(config =>
    {
        // Swap behavior
        config.DefaultSwapStyle = SwapStyle.outerHTML;
        config.DefaultSwapDelay = TimeSpan.FromMilliseconds(0);
        config.DefaultSettleDelay = TimeSpan.FromMilliseconds(20);

        // History
        config.HistoryEnabled = true;
        config.HistoryCacheSize = 10;
        config.RefreshOnHistoryMiss = false;

        // Scroll
        config.ScrollBehavior = ScrollBehavior.smooth;
        config.ScrollIntoViewOnBoost = true;
        config.DefaultFocusScroll = false;

        // Security
        config.SelfRequestsOnly = true;
        config.AllowEval = false;
        config.WithCredentials = false;

        // Performance
        config.GetCacheBusterParam = true;
        config.GlobalViewTransitions = true;

        // CSS class names
        config.IndicatorClass = "is-loading";
        config.RequestClass = "htmx-request";

        // Request timeout
        config.Timeout = TimeSpan.FromSeconds(30);
    });
```

--------------------------------

### SwapStyleBuilder for hx-swap and HX-Reswap

Source: https://context7.com/egil/htmxor/llms.txt

Construct hx-swap attribute strings or HX-Reswap response headers using the SwapStyleBuilder. Supports delays, scroll control, focus preservation, and transitions.

```razor
@* Used directly in markup *@

@* hx-swap="outerHTML swap:200ms settle:100ms show:window:top" *@
<button hx-post="/submit"
        hx-swap="@(new SwapStyleBuilder(SwapStyle.outerHTML)
                      .AfterSwapDelay(TimeSpan.FromMilliseconds(200))
                      .AfterSettleDelay(TimeSpan.FromMilliseconds(100))
                      .ShowWindowTop())">
    Submit
</button>

@* hx-swap="innerHTML scroll:top ignoreTitle:true transition:true" *@
<div hx-get="/page-content"
     hx-swap="@(new SwapStyleBuilder(SwapStyle.innerHTML)
                   .ScrollTop()
                   .IgnoreTitle()
                   .IncludeTransition())">
    Load Content
</div>
```

```csharp
// Used in HtmxResponse.Reswap() from an event handler
private void OnPost(HtmxEventArgs e)
{
    e.Response.Reswap(
        new SwapStyleBuilder(SwapStyle.beforeend)
            .AfterSwapDelay(TimeSpan.FromMilliseconds(50))
            .ShowOnBottom("#item-list")
            .PreserveFocus()
    );
}
```

--------------------------------

### Htmxor Routing Mode Logic

Source: https://github.com/egil/htmxor/blob/main/docs/index.md

Illustrates the logic for determining the routing mode in Htmxor based on the presence and values of htmx request headers like HX-Request and HX-Boosted.

```python
if ( HX-Request is null || ( HX-Boosted is not null && HX-Target is null ) )
    RoutingMode.Standard
else
    RoutingMode.Direct

```

--------------------------------

### Update _Imports.razor for Htmxor Namespaces and Layout

Source: https://github.com/egil/htmxor/blob/main/docs/index.md

Update _Imports.razor to include necessary Htmxor namespaces and optionally set a default layout for components using the HtmxLayout attribute.

```csharp
@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
@using static Htmxor.Constants

@* only if adding a custom layout for using during direct requests in step 4 above *@
@attribute [HtmxLayout(typeof(HtmxorLayout))]

```

--------------------------------

### Create Optional Direct Request Layout

Source: https://github.com/egil/htmxor/blob/main/docs/index.md

Define an optional layout component for direct routing scenarios in Htmxor. This layout inherits from HtmxLayoutComponentBase and includes the HeadOutlet for dynamic page titles.

```razor
@inherits HtmxLayoutComponentBase
@Body

```

--------------------------------

### HtmxAsyncLoad Component Usage

Source: https://context7.com/egil/htmxor/llms.txt

Use HtmxAsyncLoad to render a placeholder during initial page load and load content asynchronously via HTMX. The ChildContent is rendered on the subsequent Direct request.

```razor
@* Dashboard.razor *@
@page "/dashboard"

<h1>Dashboard</h1>

<HtmxAsyncLoad Id="sales-chart" Element="section" class="card">
    <Loading>
        <div class="spinner">Loading sales data...</div>
    </Loading>
    <ChildContent>
        @* This renders only on the async htmx follow-up request *@
        <h2>Sales Chart</h2>
        <canvas id="chart-canvas" data-values="@SalesData"></canvas>
    </ChildContent>
</HtmxAsyncLoad>

<HtmxAsyncLoad Id="recent-orders">
    <ChildContent>
        <table>
            <tr><th>Order</th><th>Status</th></tr>
            @foreach (var order in Orders)
            {
                <tr><td>@order.Id</td><td>@order.Status</td></tr>
            }
        </table>
    </ChildContent>
</HtmxAsyncLoad>

@code {
    private string SalesData = "[100, 200, 150, 300]";
    private List<(int Id, string Status)> Orders = [(1, "Shipped"), (2, "Pending")];
}
```

--------------------------------

### HtmxLayoutAttribute and HtmxLayoutComponentBase

Source: https://context7.com/egil/htmxor/llms.txt

Designates a layout component for htmx Direct requests and provides a base class for such layouts. HtmxLayoutComponentBase automatically renders HeadOutlet for PageTitle updates.

```razor
@* Components/Layout/HtmxorLayout.razor *@
@inherits HtmxLayoutComponentBase
@Body
```

```razor
@* _Imports.razor — applies the htmx layout to all components in this folder *@
@using Htmxor
@using Htmxor.Components
@using Htmxor.Http
@using static Htmxor.Constants

@attribute [HtmxLayout(typeof(HtmxorLayout))]
```

```razor
@* Override the layout for a specific component with higher priority *@
@attribute [HtmxLayout(typeof(SpecialHtmxLayout), Priority = 10)]
@page "/special"

<h1>Special Page</h1>
```

--------------------------------

### Update App.razor for Htmxor Components

Source: https://github.com/egil/htmxor/blob/main/docs/index.md

Modify App.razor to include Htmxor components and enable hx-boost for enhanced navigation and forms. This integrates Htmxor's client-side features.

```razor
<!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>

<!--
  Adding hx-boost="true" is optional.
  hx-boost returns the "enhanced navigation" and "enhanced forms"
  features that are lost by removing blazor.web.js script below.
  Learn more here: https://htmx.org/attributes/hx-boost/
-->
<body hx-boost="true">
    <Routes />

    <script src="_framework/blazor.web.js"></script>
</body>

</html>

```

--------------------------------

### Handle Htmx POST and DELETE Events in Blazor

Source: https://context7.com/egil/htmxor/llms.txt

Implement custom Blazor event handlers for htmx POST and DELETE requests using HtmxEventArgs. This allows access to HtmxRequest and HtmxResponse objects.

```razor
@* TodoList.razor *@
@page "/todos"
@attribute [HtmxRoute("/todos", Methods = [HttpMethods.Post])]
@attribute [HtmxRoute("/todos/{Id:int}", Methods = [HttpMethods.Delete])]

<ul id="todo-list"
    onpost="@HandleAdd"
    ondelete="@HandleDelete">
    @foreach (var todo in Todos)
    {
        <li id="todo-@todo.Id">
            @todo.Text
            <button hx-delete="/todos/@todo.Id"
                    hx-target="#todo-@todo.Id"
                    hx-swap="outerHTML">
                Delete
            </button>
        </li>
    }
</ul>

<form hx-post="/todos" hx-target="#todo-list" hx-swap="beforeend">
    <input name="text" placeholder="New todo..." />
    <button type="submit">Add</button>
</form>

@code {
    private List<(int Id, string Text)> Todos = [(1, "Buy milk"), (2, "Write tests")];
    private int nextId = 3;

    [SupplyParameterFromForm] public string? Text { get; set; }
    [Parameter] public int Id { get; set; }

    private void HandleAdd(HtmxEventArgs e)
    {
        Todos.Add((nextId++, Text ?? "Untitled"));
        e.Response.Trigger("todoAdded");
    }

    private void HandleDelete(HtmxEventArgs e)
    {
        Todos.RemoveAll(t => t.Id == Id);
        e.Response.EmptyBody(); // Return 200 with no content — htmx removes the element
    }
}
```

--------------------------------

### HtmxRouteAttribute for Conditional Routing

Source: https://context7.com/egil/htmxor/llms.txt

Extends Blazor routing with htmx-aware constraints. A component is accessible only when specific htmx headers match, allowing different content for the same URL based on htmx triggers or targets.

```razor
@* SearchResults.razor *@
@* Standard Blazor route — full page render *@
@page "/search"

@* Direct htmx route — only matches when HX-Target is "results-list" *@
@attribute [HtmxRoute("/search", Target = "results-list")]

@* Route triggered only from the /products page *@
@attribute [HtmxRoute("/search", CurrentURL = "/products")]

@inject HtmxContext Htmx

@if (Htmx.Request.RoutingMode == RoutingMode.Direct)
{
    @* Render only the results fragment *@
    <ul id="results-list">
        @foreach (var item in Results)
        {
            <li>@item</li>
        }
    </ul>
}
else
{
    @* Full page render *@
    <h1>Search</h1>
    <input type="search" hx-get="/search" hx-target="#results-list" hx-trigger="input changed delay:300ms" />
    <ul id="results-list"></ul>
}

@code {
    private List<string> Results = ["Apple", "Banana", "Cherry"];
}
```

--------------------------------

### Using HtmxResponse Fluent API in Blazor

Source: https://context7.com/egil/htmxor/llms.txt

Chain HtmxResponse methods for setting HTMX-specific response headers. All methods return 'this' for chaining. This API is useful for controlling client-side behavior after a server-side action.

```razor
@* OrderForm.razor *@
@inject HtmxContext Htmx

<form hx-post="/order" hx-target="#order-result">
    <input name="quantity" type="number" value="1" />
    <button type="submit">Place Order</button>
</form>
<div id="order-result"></div>

@code {
    private void OnPost(HtmxEventArgs e)
    {
        bool success = ProcessOrder();

        if (success)
        {
            e.Response
                .PushUrl("/order/confirmation")          // push URL to history
                .Trigger("orderPlaced", new { OrderId = 42 }, TriggerTiming.AfterSwap)
                .Reswap(new SwapStyleBuilder(SwapStyle.outerHTML)
                    .AfterSwapDelay(TimeSpan.FromMilliseconds(200))
                    .ShowWindowTop());
        }
        else
        {
            e.Response
                .StatusCode(System.Net.HttpStatusCode.UnprocessableEntity)
                .Retarget("#error-banner")              // redirect swap to a different element
                .Reselect("#error-message")             // use only part of the response HTML
                .PreventBrowserHistoryUpdate();
        }
    }

    private bool ProcessOrder() => true;
}
```

--------------------------------

### Handling HTMX Requests in Blazor with HtmxContext

Source: https://context7.com/egil/htmxor/llms.txt

Use HtmxContext to access request details and control the response in Blazor components. Ensure HtmxContext is injected. All HtmxResponse methods will throw an exception if called during a non-HTMX request.

```razor
@* Counter.razor *@
@page "/counter"
@inject HtmxContext Htmx

<h1>Counter: @count</h1>
<button hx-post="/counter" hx-target="#counter-section" hx-swap="outerHTML">Increment</button>

@code {
    private int count = 0;

    // Blazor htmx event handler — fires on POST from htmx
    private void OnPost(HtmxEventArgs e)
    {
        count++;

        // Inspect the request
        bool isHtmx = e.Request.IsHtmxRequest; // true
        string? triggerId = e.Request.Trigger;  // "increment-btn"

        // Control the response
        e.Response
            .PushUrl($"/counter?count={count}")   // update browser URL
            .Trigger("counterUpdated")             // fire a client-side event
            .Reswap(SwapStyle.outerHTML);          // override swap style
    }
}
```

--------------------------------

### HtmxHeadOutlet Component for App.razor

Source: https://context7.com/egil/htmxor/llms.txt

Injects the htmx JavaScript bundle and a htmx-config meta tag into the head of your Blazor application. Set UseEmbeddedHtmx to false to load htmx from a CDN.

```razor
@* App.razor *@
<!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="app.css" />

    @* Injects htmx scripts and htmx-config meta tag *@
    <HtmxHeadOutlet />

    @* Set UseEmbeddedHtmx="false" if you load htmx from a CDN *@
    @* <HtmxHeadOutlet UseEmbeddedHtmx="false" /> *@

    <HeadOutlet />
</head>
<body hx-boost="true">
    <Routes />
    @* blazor.web.js is intentionally removed — htmx handles interactivity *@
</body>
</html>
```

--------------------------------

### Conditional Rendering with HtmxFragment Component

Source: https://context7.com/egil/htmxor/llms.txt

The HtmxFragment component renders its content conditionally based on HTMX request types and optional match predicates. Use RenderDuringStandardRequest to control rendering during full-page loads.

```razor
@* ProductCard.razor *@
@page "/products/{Id:int}"
@attribute [HtmxRoute("/products/{Id:int}", Target = "product-detail")]

<div id="product-list">
    <h1>Products</h1>
    @* This renders on full-page load only *@
    <HtmxFragment RenderDuringStandardRequest="true"
                  Match="@(req => req.Target != "product-detail")">
        <ul>
            <li hx-get="/products/1" hx-target="#product-detail">Product 1</li>
            <li hx-get="/products/2" hx-target="#product-detail">Product 2</li>
        </ul>
    </HtmxFragment>
</div>

@* This fragment only renders when HX-Target matches "product-detail" *@
<HtmxFragment Match="@(req => req.Target == "product-detail")"
              RenderDuringStandardRequest="false">
    <div id="product-detail">
        <h2>Product @Id Details</h2>
        <p>Description for product @Id.</p>
    </div>
</HtmxFragment>

@code {
    [Parameter] public int Id { get; set; }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.