Blazor WebAssembly中EditForm带@onclick提交按钮在.NET8失效问题

问题描述 #

• Blazor WebAssembly应用的EditForm里有两个提交按钮，其中一个绑定了@onclick处理程序，用来设置模型值区分点击的按钮
• 这套逻辑在.NET 6、7里完全正常：模型值能正确赋值，验证和提交流程都能正常执行
• 升级到.NET 8后，@onclick处理程序虽然能被调用，但完全触发不了验证和提交流程；手动调用EditContext.Validate()时，有错误会返回false，但页面上不会显示错误提示

问题根源 #

问题出在EditContext的创建方式：
原本用Getter属性来创建EditContext，每次访问Context都会生成一个全新的实例：

// 错误写法：每次引用都会创建新的EditContext
EditContext Context => new(this);

这种情况下，点击带@onclick的提交按钮时，EditForm使用的EditContext实例和组件内部状态不匹配，直接导致验证和提交流程无法正常触发。

解决方案 #

把EditContext改成字段初始化，保证整个组件生命周期内只用同一个EditContext实例：

// 正确写法：组件初始化时创建唯一的EditContext实例
EditContext Context = new(this);

修正后的完整代码示例 #

@page "/Test"
@using System.ComponentModel.DataAnnotations
<h3>Edit</h3>
<EditForm EditContext="Context" OnValidSubmit=@DoSomething>
    <DataAnnotationsValidator />
    <ValidationSummary />
    <InputText @bind-Value="@this.Text" />

    <button type="submit">正常工作</button>
    <button type="submit" @onclick=@Whatever>现在可以正常工作</button>

</EditForm>

@code {
    [Required]
    public string? Text { get; set; }
    
    // 初始化时创建唯一的EditContext实例
    EditContext Context = new(this); 

    private void Whatever()
    {
        // 这里添加区分按钮的逻辑，比如设置模型标记
    }

    private void DoSomething()
    {
        // 处理合法提交的逻辑
    }
}

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