Blazor Server表单提交API端点时出现POST错误排查

在Blazor Server环境下，尝试从.razor页面提交表单到自定义API控制器端点时，出现如下POST错误：

POST请求未指定要提交的表单。解决方法：确保表单元素带有@formname属性并设置唯一值，或在使用对应组件时传递FormName参数。

已尝试将OnSubmit替换为OnValidSubmit、为表单添加@formname参数等常规修复手段，均未解决问题。

页面代码（/test.razor） #

@page "/test"
@rendermode InteractiveServer

@inject HttpClient Http

<EditForm @formname="myForm" Model="formData" OnValidSubmit="HandleValidSubmit">
    <InputText @bind-Value="formData.Text" class="form-control" />
    <button type="submit" class="btn btn-primary">Submit</button>
</EditForm>

@if (!string.IsNullOrEmpty(message))
{
    <p>@message</p>
}

@code {
    private FormData formData = new();
    private string? message;

    private async Task HandleValidSubmit()
    {
        var response = await Http.PostAsJsonAsync("/api/command", formData);
        message = response.IsSuccessStatusCode ? "Success!" : "Failure.";
    }

    public class FormData
    {
        public string Text { get; set; } = string.Empty;
    }
}

API控制器代码 #

using Microsoft.AspNetCore.Mvc;

[ApiController]
[Route("api/[controller]")]
public class TestController : ControllerBase
{
    [HttpPost]
    public IActionResult PostCommand([FromBody] CommandData data)
    {
        // Do something with the data
        return Ok(new { status = "received", receivedText = data.Text });
    }

    public class CommandData
    {
        public string Text { get; set; } = string.Empty;
    }
}

最终解决方案 #

经过排查，问题根源在于App.razor页面存在重复渲染组件的标记，导致页面始终同时存在两个表单。移除App.razor中重复的组件渲染代码后，表单提交恢复正常。

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