Blazor and HMTX: form only get

[enrico-rossini-tracebit]

I have a project in .NET8 for ASP.NET Core. This project has HTMX. Now, I want to add Blazor to the solution. I have quite a simple page that mimics the example on GitHub.

<CascadingValue Value="ValidationResult">
    <form id="counter" hx-post="test/ui" hx-swap="outerHTML" 
        hx-target="#counter">
        <HtmxAntiforgeryToken/>
        <input type="hidden" id="check" value="@SlackForm.Check" />
        <button class="btn btn-primary">Click me</button>
    </form>
</CascadingValue>

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

I added in the Program.cs the minimal APIs for this page. The issue is that every time I click the button, the request from the form is to the GET. There is no way to send a request as a POST.

Do you have any idea if this is related to a configuration of the project or something related to the HTMX working with Blazor?

[Telroshan]

Hey, what URL do you see in your network inspector for that GET request ?

If the request is made to the current page, then it probably means htmx hasn't had the chance to initialize your form at all (making it therefore fallback to the native default behavior, i.e. GET request against the current page URL)

If that's the case:

• it could be as simple as the htmx script not being included on your page at all (make sure it is loaded)
• if those elements aren't rendered in the initial server response's HTML content, and it's instead any frontend library that appends those elements to the page, you'll likely want to use htmx.process to get htmx to correctly initialize such elements (also see the 3rd party javascript section of the docs)

If that's not the case, please provide more information about that request (ideally, provide the whole request data, with headers and payload)

Hope this helps!

[benjaminsampica]

If you’re adding Blazor interactivity (Blazor.web.js) to the example, one thing to keep in mind is that Blazor will by default send fetch requests (enhanced navigation just like HTMX) to same-origin endpoints via GET, unless configured not to do so - manually opting out of enhanced navigation or building a Blazor-enhanced form.

This is probably intercepting the behavior you’re expecting out of HTMX.

If this isn’t enough, as Telroshan said, some additional details would help.

[nickpreston24]

@enrico-rossini-tracebit If all else fails, and you give up, I suggest adding a combination of AlpineJS and Hydro to a new Razor project.

I'm assuming this project is brand new.

Benefits of Razor x HTMX&Hydro + Alpine ('RazorHAT'):

• Faster Hot Reloads than Blazor
• YOU control WHEN requests render, not Blazor
• Pushes you to learn HTMX and AlpineJS and maximize Razor views knowledge.
• You can make your own HydroViews and html tags, which can replace .razor components, while retaining Razor's Partials, Views and ViewComponents - all of which have their own niches and strengths.

Drawbacks:

• You have to figure out how these 3-4 pieces of tech can work together (but once you do, you'll be flying so fast, it won't matter)

• You won't have Mommy Microsoft trying to coddle you (a plus for me)

• YOU suffer early on, but you also set the pace once you realize YOU are the "framework", not Blazor, not React or anything else that tries to solve the problem, but ends up becoming a paradigm or a cult, instead of what you needed in the first place (oh God, what have we done to this industry!?)

I've gone thru learning Razor Pages, and it's really, really nice to have my project (re)load in < 250 ms in Hot Reload no matter how many nugets or random JS libs I use.

If you want tips on how to do this, feel free to ask. Otherwise, I recommend searching htmx on Khalid A's blog, or starting with this guide, here

Good luck, and have fun.