Blazor EditForm提交两次触发SaveProduct重复写入数据库问题求解

问题根本原因 #

你给保存按钮同时绑定了两次SaveProduct触发逻辑：

1. 按钮是type="submit"类型，放在EditForm内部时，点击后会自动触发EditForm上绑定的OnValidSubmit=@(async () => await SaveProduct())逻辑
2. 你又额外给该按钮加了@onclick="(() => SaveProduct())的点击事件绑定
   一次点击触发两次调用，就会出现重复插入两条数据的问题。

修复方案（二选一即可，推荐第一种） #

方案1：删除按钮上的额外点击绑定 #

直接移除保存按钮的@onclick属性即可，表单验证通过后EditForm的OnValidSubmit会自动触发保存逻辑，修改后的按钮代码如下：

<input type="submit" class="form-control col-1 btn btn-primary" value="保存" />

方案2：移除EditForm的OnValidSubmit绑定，改为纯按钮点击触发 #

如果你不需要依赖EditForm的自动验证触发逻辑，可以删掉EditForm标签上的OnValidSubmit绑定，同时把按钮的type改为button避免默认提交行为：

<!-- EditForm去掉OnValidSubmit -->
<EditForm Model="@product">
<!-- 其余代码不变 -->

<!-- 按钮修改为 -->
<input type="button" class="form-control col-1 btn btn-primary" @onclick="(() => SaveProduct())" value="保存" />

注意：该方案需要你自行在SaveProduct中处理表单验证逻辑，否则未通过校验的数据也会被提交。

可选优化：加防重提交锁 #

为了避免网络卡顿、用户重复点击等极端情况导致的重复提交，可以在SaveProduct方法中加一个状态锁：

private bool _isSaving = false;
private async Task SaveProduct()
{
    if(_isSaving) return;
    try
    {
        _isSaving = true;
        // 原有业务逻辑不变
    }
    finally
    {
        _isSaving = false;
    }
}

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