传递参数时Razor组件EditForm提交刷新页面致数据丢失问题

当路由传递CustomerId参数时，点击提交按钮触发页面刷新，OnInitializedAsync重新执行导致修改数据丢失，核心原因是EditContext绑定的模型实例被替换后，组件未正确同步状态，导致EditForm未按Blazor的异步方式处理提交，触发了传统HTML表单的刷新行为。

1. 避免替换模型实例，更新现有实例属性 #

不要直接替换_personalInfo的引用，而是将获取到的客户数据赋值给现有实例的属性，这样EditContext始终绑定同一个实例，无需重新创建，保证绑定一致性：

protected override async Task OnInitializedAsync()
{
    _editContext = new EditContext(_personalInfo);

    _customerResponse = await CustomerSvc.GetCustomer(CustomerId ?? 0);

    if (_customerResponse.StatusCode == System.Net.HttpStatusCode.OK)
    {
        var customerData = _customerResponse.Content.Serialize().Deserialize<PersonalInfoModel>();
        // 逐个赋值属性，保留原实例引用
        _personalInfo.Id = customerData.Id;
        _personalInfo.Name = customerData.Name;
        _personalInfo.Email = customerData.Email;
        // 其他属性依次赋值...
        
        // 无需重新创建EditContext，原EditContext会感知到属性变化
        // 如需手动触发验证，可调用_editContext.Validate();
    }
}

2. 若必须替换实例，强制同步组件状态 #

如果一定要替换_personalInfo实例，需在创建新的EditContext后调用StateHasChanged()，强制组件重新渲染以绑定新的EditContext：

protected override async Task OnInitializedAsync()
{
    _editContext = new EditContext(_personalInfo);

    _customerResponse = await CustomerSvc.GetCustomer(CustomerId ?? 0);

    if (_customerResponse.StatusCode == System.Net.HttpStatusCode.OK)
    {
        _personalInfo = _customerResponse.Content.Serialize().Deserialize<PersonalInfoModel>();
        _editContext = new EditContext(_personalInfo);
        // 强制组件重新渲染，绑定新的EditContext
        StateHasChanged();
    }
}

3. 改用OnParametersSetAsync处理路由参数 #

OnInitializedAsync仅在组件首次初始化时执行一次，若后续路由参数变化（如从创建页导航到更新页）无法重新加载数据。建议将参数相关逻辑移到OnParametersSetAsync，确保参数变化时重新处理：

protected override async Task OnParametersSetAsync()
{
    // 仅当CustomerId变化时重新加载数据，避免重复请求
    if (_customerResponse == null || CustomerId != (_personalInfo.Id as int?))
    {
        _customerResponse = await CustomerSvc.GetCustomer(CustomerId ?? 0);

        if (_customerResponse.StatusCode == System.Net.HttpStatusCode.OK)
        {
            var customerData = _customerResponse.Content.Serialize().Deserialize<PersonalInfoModel>();
            _personalInfo.Id = customerData.Id;
            _personalInfo.Name = customerData.Name;
            // 其他属性赋值...
        }
        else
        {
            // 创建模式，重置模型
            _personalInfo = new PersonalInfoModel();
        }
        _editContext = new EditContext(_personalInfo);
    }
}

4. 确保EditForm提交按钮类型正确 #

在Razor页面中使用button标签并指定type="submit"，避免触发默认表单行为：

@page "/PersonalInfo/{CustomerId:int?}"
<EditForm EditContext="_editContext" OnValidSubmit="@Submit">
    <!-- 表单字段示例 -->
    <InputText @bind-Value="_personalInfo.Name" />
    
    <!-- 提交按钮 -->
    <button type="submit">保存</button>
</EditForm>

修改后，提交时会触发Blazor的异步Submit方法，而非传统表单刷新，数据不会丢失；模型与EditContext的绑定保持一致，验证和提交逻辑可正常执行。

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