ASP.NET Core 8中Blazor+HTMX表单仅发GET请求问题排查

核心原因与修复方案 #

1. 给按钮显式添加type="submit" #

Blazor环境下按钮默认行为可能出现偏差，直接指定提交类型，确保触发表单提交事件，让HTMX能正确拦截并发起POST请求：

<button type="submit" class="btn btn-primary">Click me</button>

2. 阻止Blazor拦截表单提交事件 #

Blazor会自动处理DOM事件，可能抢在HTMX之前拦截表单提交动作，导致HTMX无法触发POST请求。在form标签上添加@onsubmit:preventDefault，阻止原生提交逻辑同时让HTMX完全接管请求：

<form id="counter" hx-post="slacktest/ui" hx-swap="outerHTML" 
      hx-target="#counter" @onsubmit:preventDefault>

3. 手动触发HTMX初始化动态DOM #

Blazor是动态渲染组件的，HTMX默认只在页面加载时初始化DOM元素。组件渲染完成后，需要通知HTMX处理新生成的表单元素：
先注入IJSRuntime，再在OnAfterRenderAsync方法中调用HTMX的初始化方法：

@inject IJSRuntime JSRuntime

@code {
    [Parameter] public SlackUIModel SlackForm { get; set; } = new();
    [Parameter] public ValidationResult ValidationResult { get; set; } = new();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("htmx.process", "#counter");
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

4. 检查Antiforgery Token渲染情况 #

确认<HtmxAntiforgeryToken/>正确生成了对应的token字段，ASP.NET Core默认要求POST请求携带该token，缺失可能导致请求被拦截或自动转为GET。

总结 #

这不是Blazor与HTMX的核心兼容性问题，主要是两者的DOM事件处理、动态元素初始化逻辑冲突导致的，按上述步骤排查修复即可解决。

内容的提问来源于stack exchange，提问作者Enrico