Blazor .NET 6.0：无需JS和重取数据清除多选框选中项问题

第二种方案无效的原因 #

• 未跟踪选中状态：你的多选<select>没有将选项的选中状态绑定到C#端变量，DOM层面的选中状态完全由浏览器维护，和items集合无关。即使你重置items，只要option的value和文本没有变化，Blazor不会修改DOM中option的selected属性，之前的选中状态会保留。
• 数据未发生实质变更：你只是把相同的MyItems实例重新放回items集合，Blazor的变更检测会认为列表内容没有变化（每个item的Id和Description都没变），因此不会触发组件重新渲染来更新DOM状态。

正确的实现方式（无需JS，无闪烁） #

要实现无闪烁的清除选中项，核心是将选中状态绑定到C#变量，而非依赖DOM状态：

1. 添加跟踪选中项ID的集合：

private HashSet<int> SelectedItemIds = new HashSet<int>();

2. 修改<select>和<option>，绑定选中状态：

<select id="ProductItems" @onchange="ProductSelections" multiple size="10">
    @if (items != null)
    {
        @foreach (var item in items)
        {
            <option value="@item.Id" selected="@SelectedItemIds.Contains(item.Id)">@item.Description</option>
        }
    }
</select>

3. 更新ProductSelections方法，同步选中状态到集合：

private void ProductSelections(ChangeEventArgs e)
{
    SelectedItemIds.Clear();
    foreach (var id in e.Value as IEnumerable<string>)
    {
        if (int.TryParse(id, out var itemId))
        {
            SelectedItemIds.Add(itemId);
        }
    }
}

4. 清除选中项的按钮方法只需清空集合即可：

private void ButtonClearClick() 
{
    SelectedItemIds.Clear();
}

这样做的好处：

• 完全不需要重新加载数据或重置items集合，避免组件闪烁
• 选中状态由C#端控制，逻辑清晰，和DOM状态保持同步
• 纯Blazor实现，无需依赖JS

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