dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
21.99k stars 1.72k forks source link

MAUI blazor form HTML and JS POST DO NOT WORK #24336

Open infofromca opened 3 weeks ago

infofromca commented 3 weeks ago

Description

MAUI blazor form HTML POST AND JS POST DO NOT WORK

Steps to Reproduce

1--USE HTML 5 FORM

, after click submit button, actually hit the server by GET.

Link to public reproduction project repository

https://github.com/infofromca/js_post

Version with bug

8.0.80 SR8

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

Unknown/Other

Affected platforms

Windows maybe also others

Affected platform versions

net8.0-windows10.0.19041.0

Did you find any workaround?

No response

Relevant log output

No response

infofromca commented 2 weeks ago
@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

This  workS in WebAssembly BLAZOR

<form action="https://localhost:44303/api/employees/nobody/6" method="post">
    <input type="number" name="Id" />
    <input type="text" name="name" />
    <input type="number" name="Salary" />
    <button type="submit"></button>
</form>

======================

@page "/"

<h1>Hello, world!</h1>
This does not work in MAUI BLAZOR!!!
<form action="https://localhost:44303/api/employees/nobody/6" method="post">
    <input type="number" name="Id" />
    <input type="text" name="name" />
    <input type="number" name="Salary" />
    <button type="submit"></button>
</form>

================= This is very strange issue IMO. Why even html 5 is not supported in MAUI BLAZOR??? IT SHOULD NOT BE Backlog , because <EditForm Model="@employee" OnValidSubmit="HandleValidSubmit"> cannot deal with all situations easily

infofromca commented 1 week ago

more, The following also changed to GET method:

export function attachDummyButtonClick(url, buttonSelector, formSelector) {
    Array.from(document.querySelectorAll(buttonSelector)).forEach((button) => {
        button.addEventListener('click', async (event) => {
            event.preventDefault();

            const form = document.querySelector(formSelector);
            form.action = url;
            form.method = 'POST';// 'GET'; // Change to the desired method (e.g., 'POST', 'PUT', etc.)
            form.submit();
        });
    });
}
Eilon commented 5 days ago

Hi @infofromca , in general in Blazor forms just post to the app itself. Is there a reason that the action in <form action="https://localhost:44303/api/employees/nobody/6" method="post"> is posting to a specific host/port? Is that trying to post and re-load the whole page? Or is it just posting to an API and not expecting any redirect or other full-page response?

BTW the reason it works in Blazor WebAssembly is that it's running in a browser, so almost any HTML feature will work in the normal way. But in BlazorWebView there is no browser, just a webview control, and it's specifically configured for hosting local Blazor apps. There's no web server, no ports, no HTTP at all. For that reason I wouldn't expect it to work.