如何阻止更新列表项时EditForm自动提交？

问题根源是表单内按钮的默认行为：HTML里的按钮默认type为submit，放在<EditForm>中时，点击会自动触发表单提交操作。

解决方案一：修改按钮类型为button（推荐） #

直接给MatButton指定Type="button"，让它仅执行点击事件，不触发表单提交：

<EditForm EditContext="FormEditContext" method="post" OnValidSubmit="SubmitForm">
<MatSelectItem 
    Context="Product"
    @bind-Value="@formModel.Product"
    TValue="TariffProductQuoteViewModel"
    Items="AvailableProducts.ToList()"
    Disabled="!CanEdit">
     <ItemTemplate>
        @Product.ProductName
     </ItemTemplate>
</MatSelectItem>
    <!-- 添加Type="button"属性 -->
    <MatButton OnClick="AddProduct" Type="button">+ Add Product</MatButton>
</EditForm>

解决方案二：通过事件参数阻止默认行为 #

如果无法直接设置按钮类型，可以在点击事件中传入MouseEventArgs并调用PreventDefault()来阻止表单提交：

修改按钮代码：

<MatButton OnClick="(e) => AddProduct(e)">+ Add Product</MatButton>

修改C#方法：

public void AddProduct(MouseEventArgs e)
{
    // 阻止默认的表单提交行为
    e.PreventDefault();
    
    // 空值判断避免空引用异常
    var firstProduct = AvailableProducts.FirstOrDefault();
    if (firstProduct != null)
    {
        formModel.Items.Add(new Product()
        {
            ProductId = firstProduct.Id,
            Product = firstProduct,
            Quantity = 1,
        });
    }
}

注意事项 #

如果有移除产品的按钮，同样需要按上述方法处理，避免触发表单自动提交。

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