Blazor WASM 表格排序时绑定实体的复选框未随行同步移动问题

根本原因 #

• 表格行渲染未指定唯一@key，触发 Blazor 默认 DOM 复用逻辑
  Blazor 渲染foreach循环生成的<tr>同级元素时，默认按元素的索引位置复用现有 DOM 节点以提升性能。排序后列表顺序发生变化，Blazor 不会移动现有 DOM 节点，只会更新当前索引位置 DOM 绑定的文本、属性值。未和 C# 属性双向绑定的 DOM 原生状态不会被同步更新，就会出现状态和行内容错位的问题。
• 复选框绑定逻辑和普通输入列存在差异
  你提到其他包含<input>的列可以正常排序，说明这些输入框已经正确和行实体的属性做了双向绑定，输入内容会实时同步到 C# 侧的实体对象，排序后 Blazor 会把实体的最新值同步到对应索引位置的输入框中。复选框异常通常是两种情况：
  1. 未正确和行实体的布尔属性做双向绑定，仅依赖 DOM 原生的checked状态，该状态不会同步到 C# 实体，排序后 DOM 被复用，选中状态就留在了原索引位置
  2. 绑定的是组件内的局部变量，而非每行对应实体的专属属性

可直接落地的修复方案 #

1. 在<tr>标签上添加@key="对应行实体的唯一标识字段"，例如@key="forecast.Id"，强制 Blazor 按实体标识匹配 DOM 节点，排序时直接移动对应行的整段 DOM，彻底避免按索引复用带来的状态错位
2. 检查复选框的绑定逻辑，确保用@bind-Checked绑定到对应行实体的公共布尔属性，示例如下：

<input type="checkbox" @bind-Checked="forecast.IsSelected" />

保证复选框的选中状态和 C# 实体完全同步。

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