Blazor EditForm提交至ASP.NET MVC POST端点失效问题求助

Blazor的EditForm默认会拦下表单的原生提交动作，要让它像传统HTML表单那样提交到POST端点并触发浏览器跳转，不用复杂JS定位元素，有两个简便方案：

方案一：保留Blazor提交逻辑，触发原生提交 #

如果你需要在提交前执行Blazor端的自定义逻辑，就在HandleValidSubmit里直接通过表单名称调用原生提交：

1. 先注入IJSRuntime
2. 在验证通过的方法里，用表单名称定位元素并调用submit

修改后的代码：

@inject IJSRuntime JSRuntime

<EditForm FormName="CreateProject" EditContext="@editContext" method="post" action="/game/create" OnValidSubmit="HandleValidSubmit">
    <FormHorizontal>
        <DataAnnotationsValidator />    
        <ValidationSummary />
        <InputText @bind-Value="Model.ProjectName" class="form-control" />
        <FormRow>
            <button type="submit" disabled="@formInvalid">提交</button>
        </FormRow>
    </FormHorizontal>
</EditForm>

@code {
    private EditContext? editContext;
    private YourModelType Model = new();
    private bool formInvalid => editContext?.Validate() == false;

    protected override void OnInitialized()
    {
        editContext = new EditContext(Model);
    }

    private async Task HandleValidSubmit()
    {
        // 直接通过FormName拿到表单，触发原生提交
        await JSRuntime.InvokeVoidAsync("document.forms['CreateProject'].submit()");
    }
}

方案二：移除提交事件绑定，直接用原生表单行为 #

如果不需要在提交前执行Blazor端逻辑，直接删掉OnValidSubmit绑定就行。Blazor只有绑定了OnValidSubmit/OnInvalidSubmit时才会拦截原生提交，移除后表单会自动按传统方式提交，同时还能保留Blazor的客户端验证功能。

示例代码：

<EditForm FormName="CreateProject" EditContext="@editContext" method="post" action="/game/create">
    <FormHorizontal>
        <DataAnnotationsValidator />    
        <ValidationSummary />
        <InputText @bind-Value="Model.ProjectName" class="form-control" />
        <FormRow>
            <button type="submit" disabled="@formInvalid">提交</button>
        </FormRow>
    </FormHorizontal>
</EditForm>

@code {
    private EditContext? editContext;
    private YourModelType Model = new();
    private bool formInvalid => editContext?.Validate() == false;

    protected override void OnInitialized()
    {
        editContext = new EditContext(Model);
    }
}

这个方案最简洁，完全不需要JS，直接回归传统表单的提交流程。

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