Blazor复选框组双向绑定问题：子组件操作未同步父组件

问题根源 #

子组件修改了Item的Selected属性，但父组件无法自动感知到这种内部属性变化——Blazor仅在参数引用本身改变时才会触发父组件重新渲染，而List<Item>是引用类型，内部元素属性变化不会触发参数更新，导致父组件的选中计数无法同步。

解决步骤 #

1. 让Item实现INotifyPropertyChanged #

确保属性变化能被绑定系统感知：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class Item : INotifyPropertyChanged
{
    private string _name;
    private bool _selected;

    public string Name
    {
        get => _name;
        set
        {
            _name = value;
            OnPropertyChanged();
        }
    }

    public bool Selected
    {
        get => _selected;
        set
        {
            _selected = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 修改子组件，添加状态变化回调 #

在复选框绑定后触发回调，通知父组件更新：

<div class="btn-group">
    @foreach(Item item in Items)
    {
        <!-- 用GetHashCode()替代未定义的Id属性，避免重复ID -->
        <input id="chk_@item.GetHashCode()" type="checkbox" class="btn-check" 
               @bind="item.Selected" @bind:after="NotifyParent">
        <label for="chk_@item.GetHashCode()" class="btn btn-success">@item.Name</label>
    }
</div>

@code {
    [Parameter]
    public List<Item> Items { get; set; } = new();

    // 定义回调事件，通知父组件状态变化
    [Parameter]
    public EventCallback OnSelectionUpdated { get; set; }

    private async Task NotifyParent()
    {
        await OnSelectionUpdated.InvokeAsync();
    }
}

3. 父组件监听回调，触发重新渲染 #

接收子组件的通知，手动触发父组件更新：

<Child Items="items" OnSelectionUpdated="UpdateSelectedCount"></Child>
<p>@items.Where(n => n.Selected).Count() Items Selected</p>

@code {
    private List<Item> items = new()
    {
        new Item { Name = "Foo" },
        new Item { Name = "Bar" }  
    };

    private void UpdateSelectedCount()
    {
        // 手动触发父组件重新渲染，更新计数
        StateHasChanged();
    }
}

补充说明 #

• 原代码中Item类缺少Id属性，改用GetHashCode()生成唯一ID避免DOM元素ID冲突，也可以给Item添加Guid或自增int类型的Id属性。
• 若使用Blazor Server，上述方案可直接生效；若为Blazor WebAssembly，逻辑一致，无需额外配置。

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