ASP.NET Blazor 复选框联动异常及事件差异咨询

通用网格组件表头放置全选复选框，选中时可全选所有行的复选框，该功能目前运行正常，但存在逻辑异常：取消任意行复选框的选中状态时，表头主复选框应当同步取消选中，当前该逻辑未按预期生效。

@if (Items == null)
{
    <p><em>Loading...</em></p>
}
else {
    <table class="table">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="chkAll" checked="@SelectMain" @onchange="ChangeCheckboxState"/>
                </th>
                @Columns(default(TItem))
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Items) {
            var id = $"chk{counter}";
            <CascadingValue Value="item">
                <tr>
                    <td class="col-checkbox chkColumn quarter">
                       <input type="checkbox" id="@id" checked="@SelectAll" @onchange="ChangeCheckboxSingle"/>
                    </td>
                    @Columns(item)
                </tr>
            </CascadingValue>
            counter++;
        }
        </tbody>
    </table>
}

@code {
    [Parameter]
    public IList<TItem> Items { get; set; }

    [Parameter]
    public RenderFragment<TItem>? Columns { get; set; }
    public bool SelectAll { get; set; } = false;
    public bool SelectMain { get; set; } = false;
    int counter = 1;

    void ChangeCheckboxState(ChangeEventArgs e){
        if (Convert.ToBoolean(e.Value))
            SelectAll = true;
        else
            SelectAll = false;
    }

    void ChangeCheckboxSingle(ChangeEventArgs e){
        SelectMain = false;
        StateHasChanged();
    }
}

现有代码存在两处核心逻辑错误，导致状态同步失效：

1. 点击表头全选框时，仅更新了控制行选中状态的SelectAll变量，没有同步更新绑定表头自身选中状态的SelectMain，状态链路从一开始就是断裂的。
2. 所有行的复选框都绑定同一个SelectAll全局布尔值，既无法记录单条行的独立选中状态，也无法在所有行被手动选中时自动同步表头状态，只要触发过全选，所有行的选中状态就被锁死在同一个值，取消单条行选中的操作不会实际生效。

替换原有单一布尔值的状态管理逻辑，用集合存储实际选中的行数据，通过计算属性自动同步全选框状态，修复后代码如下：

@if (Items == null)
{
    <p><em>Loading...</em></p>
}
else {
    <table class="table">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="chkAll" checked="@SelectMain" @onchange="ChangeCheckboxState"/>
                </th>
                @Columns(default(TItem))
            </tr>
        </thead>
        <tbody>
            @foreach (var (item, index) in Items.Select((val, i) => (val, i))) {
            <CascadingValue Value="item">
                <tr>
                    <td class="col-checkbox chkColumn quarter">
                       <input type="checkbox" id="@($"chk{index}")" checked="@SelectedItems.Contains(item)" @onchange="(e)=>ChangeCheckboxSingle(e, item)"/>
                    </td>
                    @Columns(item)
                </tr>
            </CascadingValue>
        }
        </tbody>
    </table>
}

@code {
    [Parameter]
    public IList<TItem> Items { get; set; }

    [Parameter]
    public RenderFragment<TItem>? Columns { get; set; }
    
    // 存储实际选中的行数据，替代原有的全局SelectAll布尔值
    private HashSet<TItem> SelectedItems = new();
    // 全选框状态自动计算：选中行数等于总条数时即为选中状态
    private bool SelectMain => SelectedItems.Count == Items.Count;

    void ChangeCheckboxState(ChangeEventArgs e){
        bool isChecked = Convert.ToBoolean(e.Value);
        SelectedItems.Clear();
        if (isChecked)
        {
            foreach(var item in Items) SelectedItems.Add(item);
        }
    }

    void ChangeCheckboxSingle(ChangeEventArgs e, TItem item){
        bool isChecked = Convert.ToBoolean(e.Value);
        if (isChecked)
        {
            SelectedItems.Add(item);
        }
        else
        {
            SelectedItems.Remove(item);
        }
    }
}

修复说明：

• 移除了全局SelectAll、自增counter变量，用HashSet<TItem>存储选中行，支持单条记录的独立选中状态追踪
• 将SelectMain改为自动计算属性，状态变更时会自动触发组件重渲染，无需手动调用StateHasChanged：任意行取消选中时选中数变化，全选框自动取消勾选；所有行被手动选中时，全选框自动同步为选中状态
• 直接通过遍历索引生成行复选框id，避免原计数器累加导致的id重复问题

• @onchange是表单元素专属事件：仅作用于input、select、textarea这类表单控件，当控件值发生变更并提交时触发，比如复选框勾选/取消、输入框失焦且内容变化、下拉选项切换时触发，事件参数会携带控件变更后的新值，是处理表单交互的常用事件。
• @onselectionchange是全局文本选区监听事件：默认绑定在document对象上，监听的是页面内文本选区的变化，比如用户鼠标选中一段文字、键盘移动选区光标时触发，和表单控件的值变化完全无关，不能用来监听复选框、下拉框这类控件的选中状态变更。

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