Blazor WebAssembly中实现子子组件响应模型变更的最佳实践

项目背景 #

基于.NET 8 Blazor WebAssembly开发，采用标准CRUD API存储数据，初始渲染后完全由客户端与API交互，无服务器端数据处理。

数据模型定义 #

public class HouseModel {
    public int HouseId { get; set; }
    public int HouseNumber { get; set; }
    public IEnumerable<Person> Parents { get; } 
    public List<Person> People { get; set; }
    public string Summary { get; }
}

public class PersonModel {
    public int PersonId { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
    public bool Parent { get; set; }
}

数据编辑类 #

负责规则校验及API数据保存：

public class HouseEditor {
    public Task SetHouseNumber(int houseId, int houseNumber) { ... }
    public Task SetPersonName(int personId, string name) { ... }
    public Task SetParent(int personId, bool isParent) { ... }
}

组件结构伪代码 #

House.blazor #

• 将HouseNumber绑定到<input>，修改时调用HouseEditor.SetHouseNumber()
• 动态显示房屋内所有家长，响应人员变更
• 引入PersonList组件展示所有人员

PersonList.blazor #

• 显示人员统计摘要（总人数、家长数、年龄最大者）
• 遍历HouseModel.People列表，将每个Person作为参数传递给PersonDetail组件

PersonDetail.blazor #

• 将Person.Name绑定到<input>，修改时调用HouseEditor.SetPersonName()
• 显示人员年龄
• 用复选框绑定Person.Parent，切换时调用HouseEditor.SetParent()

当前实现与问题 #

目前通过级联参数传递HouseModel和HouseEditor，确保House和PersonList组件绑定到同一数据源，通过bind:get/bind:set实现模型读取与编辑更新，这两个组件能正常响应HouseModel变化。

但PersonDetail组件仅接收单个Person实例作为参数，无法感知HouseModel中对应数据的更新：
当切换人员#3的Parent复选框时，流程如下：

1. 调用HouseEditor.SetParent(3, true)
2. 校验房屋内家长数量是否在1-2之间
3. 向API提交新状态
4. 根据API响应更新HouseModel中的对应Person数据
5. House和PersonList组件同步更新
6. 问题出现：
   • 6a：PersonDetail的复选框变回未勾选，因为它读取的是最初传入的Person实例，而非HouseModel中已更新的实例
   • 6b：若API保存失败，HouseEditor会将Parent值恢复为旧值，但PersonDetail同样无法感知

解决方案建议 #

方案1：让PersonDetail直接绑定到HouseModel中的对应Person实例 #

不要将单个Person作为参数传递，而是通过级联参数传入HouseModel和PersonId，让PersonDetail自行从HouseModel.People中查找对应实例：

// PersonDetail.razor
[CascadingParameter] public HouseModel House { get; set; }
[Parameter] public int PersonId { get; set; }

private PersonModel Person => House.People.First(p => p.PersonId == PersonId);

这样PersonDetail始终读取HouseModel中的最新数据，API更新后能自动响应变化，无需额外刷新逻辑。

方案2：使用可观察对象通知属性变化 #

将PersonModel改为实现INotifyPropertyChanged接口，当Parent、Name等属性变更时触发通知：

public class PersonModel : INotifyPropertyChanged {
    private bool _parent;
    public bool Parent {
        get => _parent;
        set {
            if (_parent != value) {
                _parent = value;
                OnPropertyChanged();
            }
        }
    }

    // 其他属性同理实现

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

同时确保HouseEditor更新的是同一个Person实例的属性，而非替换实例。这样PersonDetail绑定到实例属性时，能收到属性变更通知并刷新UI。

方案3：通过StateHasChanged()手动触发目标组件刷新 #

在HouseEditor完成HouseModel更新后，通过事件通知PersonList，由PersonList定位到对应PersonDetail组件并调用StateHasChanged()：

1. 在HouseEditor中添加更新完成事件：

   public event Action<int> PersonUpdated; // 参数为更新的PersonId
   
   // 在SetParent等方法完成模型更新后触发
   PersonUpdated?.Invoke(personId);
   

2. 在PersonList中订阅该事件，找到对应PersonDetail组件并刷新：

   // PersonList.razor
   [CascadingParameter] public HouseEditor Editor { get; set; }
   private Dictionary<int, PersonDetail> _personComponents = new();
   
   protected override void OnInitialized() {
       Editor.PersonUpdated += OnPersonUpdated;
   }
   
   private void OnPersonUpdated(int personId) {
       if (_personComponents.TryGetValue(personId, out var component)) {
           component.StateHasChanged();
       }
   }
   
   // 在遍历渲染PersonDetail时记录组件引用
   @foreach (var person in House.People) {
       <PersonDetail @ref="@(_personComponents[person.PersonId])" Person="person" />
   }
   

此方案需维护组件引用，适合无法修改模型或级联参数的场景，但逻辑相对复杂。

方案对比 #

• 方案1最符合需求，无需修改模型，直接绑定到数据源中的实例，自动响应变化，实现简洁。
• 方案2适合需要细粒度属性变更通知的场景，但需修改模型实现，且需确保实例不变。
• 方案3属于补救性方案，适合已有代码无法大规模调整的情况，但增加了组件间的耦合。

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