Blazor Server任务列表勾选复选框后下一项自动勾选问题排查

问题原因 #

你遇到的自动勾选下一个任务的问题，核心是循环生成的复选框没有唯一标识，导致Blazor重新渲染DOM时复用了之前的节点，错误保留了勾选状态。

当你勾选一个任务标记为完成后，该任务因showCompletedTasks=false从列表中移除，Blazor会重新渲染剩余任务的DOM。由于所有复选框没有唯一id，浏览器/Blazor会复用之前的DOM节点，把原本已勾选的状态“继承”给了下一个任务的复选框。

修复步骤 #

1. 给每个复选框添加唯一ID并关联Label #

修改任务列表中复选框的代码，用任务的Id生成唯一id，同时用label关联，确保每个复选框都是唯一可识别的：

<td>
    <input type="checkbox" 
           id="task-checkbox-@task.Id" 
           checked="@task.TaskCompleted" 
           @onchange="@(async (e) => await ToggleTaskCompletion(task, (bool)e.Value))" />
    <label for="task-checkbox-@task.Id" class="ms-1">@task.TaskName</label>
</td>

2. 确保UI状态正确同步 #

在ToggleTaskCompletion方法末尾，显式触发状态更新，避免状态不同步：

private async Task ToggleTaskCompletion(ArcTask task, bool isCompleted)
{
    task.TaskCompleted = isCompleted;
    await TaskRepo.UpdateAsync(task);
    tasks = await TaskRepo.GetAllAsync("TaskCompleted DESC, TaskPriority ASC");
    // 显式触发UI更新
    await InvokeAsync(StateHasChanged);
}

额外优化建议 #

• 可访问性：关联label后，点击任务名称也能勾选复选框，提升用户体验
• 性能优化：更新单个任务后，无需重新拉取所有任务，直接在本地集合中更新状态即可：

  private async Task ToggleTaskCompletion(ArcTask task, bool isCompleted)
  {
      task.TaskCompleted = isCompleted;
      await TaskRepo.UpdateAsync(task);
      // 直接更新本地集合，避免重复数据库查询
      tasks = tasks.Select(t => t.Id == task.Id ? task : t);
      await InvokeAsync(StateHasChanged);
  }
  

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