Blazor .NET 8中EditForm模型绑定失败求助

核心问题分析 #

• EditForm的Model参数与手动创建的EditContext冲突
  当你给EditForm设置Model参数时，组件会自动基于该Model实例创建并管理对应的EditContext，负责表单的绑定、验证逻辑。你在OnInitializedAsync里手动创建的context没有传递给EditForm，完全未生效；如果后续误将该context传给EditForm，会与Model参数生成的EditContext冲突，直接导致绑定失效。

• 未处理引用类型的复用问题（非绑定失败直接原因，但会引发后续bug）
  当前代码提交后未重置newModel实例，由于CamModel是引用类型，后续输入会修改已添加到camModels中的对象，导致数据混乱。

修复方案 #

方案一：仅使用EditForm的Model参数（推荐） #

这是Blazor表单的标准用法，无需手动管理EditContext：

Razor代码：

<div class="row">
    <EditForm Model="@newModel" FormName="SubmitModel" OnSubmit="SubmitModel">
        <DataAnnotationsValidator />        
        <div class="row">
            <div class="col-sm-12">
                <label for="modelName">ModelName: </label>
                <InputText id="modelName" @bind-Value="newModel.ModelName"/>
            </div>
            <div class="col-sm-12">
                <button type="submit">Add</button>
            </div>
        </div>
    </EditForm>
</div>

C#代码：

// 改用属性（Blazor绑定的规范写法，比字段更可靠）
private CamModel newModel { get; set; } = new CamModel();

// 删除手动创建EditContext的代码，无需额外初始化

private async Task SubmitModel()
{
    // 先执行表单验证（可选但推荐）
    var editContext = new EditContext(newModel);
    if (!editContext.Validate())
    {
        return;
    }

    newModel.Id = Guid.NewGuid();
    camModels.Add(newModel);
    // 重置模型，避免后续编辑影响已添加的对象
    newModel = new CamModel();
    //await modelGrid.RefreshDataAsync();        
}

方案二：手动管理EditContext（适合复杂场景） #

如果需要自定义EditContext的行为，需移除EditForm的Model参数，直接传入手动创建的EditContext：

Razor代码：

<div class="row">
    <EditForm EditContext="@context" FormName="SubmitModel" OnSubmit="SubmitModel">
        <DataAnnotationsValidator />        
        <div class="row">
            <div class="col-sm-12">
                <label for="modelName">ModelName: </label>
                <InputText id="modelName" @bind-Value="newModel.ModelName"/>
            </div>
            <div class="col-sm-12">
                <button type="submit">Add</button>
            </div>
        </div>
    </EditForm>
</div>

C#代码：

private CamModel newModel { get; set; } = new CamModel();
private EditContext context;

protected override Task OnInitializedAsync()
{
    // 基于模型创建EditContext并关联到表单
    context = new EditContext(newModel);
    return base.OnInitializedAsync();
}

private async Task SubmitModel()
{
    // 使用已有的EditContext验证
    if (!context.Validate())
    {
        return;
    }

    newModel.Id = Guid.NewGuid();
    camModels.Add(newModel);
    // 重置模型和对应的EditContext
    newModel = new CamModel();
    context = new EditContext(newModel);
    //await modelGrid.RefreshDataAsync();        
}

关键注意事项 #

• 永远不要同时给EditForm设置Model和EditContext参数，二者只能选其一，否则必然引发绑定逻辑混乱。
• 绑定对象推荐使用属性而非字段，这是Blazor组件的最佳实践，能避免潜在的UI更新问题。
• 提交表单后务必重置引用类型的模型实例，防止后续操作修改已提交的数据。

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