Blazor 8 SSR模式下EditForm提交提示缺少Model/EditContext

问题原因 #

在Blazor 8 SSR模式下使用EditForm时，POST回发阶段若模型绑定出现异常（如formData实例化失败、字段绑定不匹配），会触发InvalidOperationException: EditForm requires either a Model parameter, or an EditContext parameter错误。

解决方案 #

1. 显式创建EditContext #

手动创建EditContext并传递给EditForm，避免自动绑定逻辑的不确定性。

2. 完善模型初始化 #

确保模型所有属性都有初始值，防止绑定过程中出现null引用。

3. 修正表单字段绑定 #

使用Blazor的@bind语法自动生成正确的表单字段名，同时预填充关联ID，避免手动处理hidden字段的value。

修改后的完整代码 #

<Sheet cssClass="mb-3">
    <SheetTitle Text="Admin Area"></SheetTitle>
    @if (Mini.Blocked)
    {
        <div>This Miniature has been blocked by an Admin</div>
    }
    else
    {
        <EditForm EditContext="@_editContext" FormName="BlockMiniature" method="post" OnSubmit="@OnBlockSubmit">
            <input type="hidden" @bind-value="formData.MiniatureId" />
            <TextareaField @bind-Value="formData.Reason"></TextareaField>
            <div class="flex justify-center">
                <Button type="submit">Block Miniature</Button>
            </div>
        </EditForm>
    }
</Sheet>

@code {
    [Parameter]
    public Miniature Mini { get; set; }

    [SupplyParameterFromForm]
    public BlockMiniatureForm formData { get; set; } = new();
    
    private EditContext? _editContext;

    protected override void OnInitialized()
    {
        _editContext = new EditContext(formData);
        formData.MiniatureId = Mini.Id;
    }

    public class BlockMiniatureForm
    {
        public Guid MiniatureId { get; set; }
        public string Reason { get; set; } = string.Empty;
    }

    public async Task OnBlockSubmit(EditContext arg)
    {
        if (!arg.Validate()) return;
        
        BlockMiniatureForm form = (BlockMiniatureForm)arg.Model;
        await mediatr.Send(new BlockMiniatureCommand(form.MiniatureId, form.Reason));
    }
}

额外注意事项 #

• 若TextareaField是自定义组件，需确保它正确实现双向绑定逻辑，能将用户输入同步回formData.Reason。
• 可添加DataAnnotationsValidator组件实现表单验证，提交前验证模型合法性，避免无效请求。

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