Blazor静态服务器组件双EditForm提交报错：找不到指定表单名

报错原因是在使用Enhance的Blazor静态服务器组件中，第一个表单提交后切换显示第二个表单时，客户端Blazor运行时未正确注册第二个表单的FormName，导致提交时无法找到对应表单实例。

1. 核心修改点 #

• 移除两个EditForm的FormName属性：由于表单互斥显示，Blazor会自动关联当前渲染的表单，无需手动指定名称。
• 添加@key属性：强制Blazor识别不同的表单实例，避免组件复用导致的状态残留问题。
• 提交方法改为异步（符合Blazor最佳实践）。

修改后的完整代码 #

@if(ShowSecondForm)
{
    <EditForm id="SecondForm" Model="SecondModel" method="post" OnValidSubmit="SecondValidSubmit" class="mt-4" Enhance @key="SecondFormKey">
        <DataAnnotationsValidator />
        <InputText @bind-Value="SecondModel.FieldOne" class="form-control" autocomplete="FieldOne" aria-required="true" />
        <label for="FieldOne" class="form-label">FieldOne</label>
        <ValidationMessage For="() => SecondModel.FieldOne" class="text-danger" />
    
        <br/>
        <button type="submit" class="w-100 btn btn-primary">Submit</button>
    </EditForm>
}
else
{
    <EditForm id="FirstForm" Model="FirstModel" method="post" OnValidSubmit="FirstValidSubmit" class="mt-4" Enhance @key="FirstFormKey">
        <DataAnnotationsValidator />
        <InputText @bind-Value="FirstModel.FieldOne" class="form-control" autocomplete="FieldOne" aria-required="true" />
        <label for="FieldOne" class="form-label">FieldOne</label>
        <ValidationMessage For="() => FirstModel.FieldOne" class="text-danger" />

        <br/>
        <button type="submit" class="w-100 btn btn-primary">Submit</button>
    </EditForm>
}
@code {
    private bool ShowSecondForm = false;
    private readonly string FirstFormKey = "FirstForm";
    private readonly string SecondFormKey = "SecondForm";

    [SupplyParameterFromForm]
    private FirstModel FirstModel { get; set; } = new();

    [SupplyParameterFromForm]
    private SecondModel SecondModel { get; set; } = new();

    protected override void OnInitialized()
    {
        FirstModel ??= new();
        SecondModel ??= new();
    }
    
    public async Task FirstValidSubmit()
    {
        // 处理第一个表单的业务逻辑
        ShowSecondForm = true;
        await Task.CompletedTask;
    }

    public async Task SecondValidSubmit()
    {
        // 处理第二个表单的数据，例如持久化存储
        await Task.CompletedTask;
    }
}

额外注意事项 #

• 确保FirstModel和SecondModel是可序列化的类：包含公共无参构造函数，所有属性具备get/set访问器。
• 若仍存在问题，检查是否有全局JS脚本干扰Blazor的表单注册逻辑。

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