如何让Blazor的EditContext识别List的添加/移除变更？

Blazor的EditContext默认会监听模型属性的PropertyChanged事件，但普通List<T>的增删操作不会触发任何变更通知，所以EditContext无法感知到集合元素的添加或移除。下面提供两种可行的解决方式：

方法一：使用ObservableCollection替代List #

将formModel.Items的类型从List<FormProduct>改为ObservableCollection<FormProduct>，它内置实现了INotifyCollectionChanged接口，EditContext会自动监听集合的变更事件，无需额外代码。

修改模型定义（假设formModel是你的表单模型类）：

public class YourFormModel
{
    // 把List换成ObservableCollection
    public ObservableCollection<FormProduct> Items { get; set; } = new ObservableCollection<FormProduct>();
}

你的Add/Remove方法无需修改，直接使用ObservableCollection的Add/Remove即可：

public void AddProduct()
{
    formModel.Items.Add(new FormProduct()
    {
        Id = AvailableProducts.FirstOrDefault().Id,
        Product = AvailableProducts.FirstOrDefault(),
        Quantity = 1,
    });
}

public void RemoveProduct(FormProduct formProduct)
{
    formModel.Items.Remove(formProduct);
}

方法二：手动通知EditContext集合变更 #

如果不想替换集合类型，可以在增删元素后手动调用EditContext的NotifyFieldChanged方法，告知EditContext集合字段已变更：

修改你的Add和Remove方法：

public void AddProduct()
{
    formModel.Items.Add(new FormProduct()
    {
        Id = AvailableProducts.FirstOrDefault().Id,
        Product = AvailableProducts.FirstOrDefault(),
        Quantity = 1,
    });
    // 通知EditContext集合字段变更
    FormEditContext.NotifyFieldChanged(FieldIdentifier.Create(() => formModel.Items));
}

public void RemoveProduct(FormProduct formProduct)
{
    formModel.Items.Remove(formProduct);
    // 通知EditContext集合字段变更
    FormEditContext.NotifyFieldChanged(FieldIdentifier.Create(() => formModel.Items));
}

这样EditContext会重新验证模型并更新UI，就能正确感知到集合的增删操作了。

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