Blazor Server表格自定义复选框过滤器状态丢失问题排查

问题场景 #

我正在开发一个Blazor Server校园项目，实现了表格自定义筛选功能：点击列筛选图标弹出带复选框的组件，勾选选项后点击OK按钮，表格会展示该列值与选中值匹配的数据。但目前存在问题：关闭筛选组件后再次打开，之前勾选的复选框状态无法保留。

核心问题分析 #

1. 复选框未绑定选中状态，组件初始化时无法根据已选数据恢复勾选状态
2. 使用List<Projects>存储选中项依赖对象引用，组件重建时（比如关闭再打开）对象实例可能变化，导致Contains判断失效
3. 所有复选框的id和标签的for属性为固定值，引发交互异常

解决方案 #

1. 改用值类型存储选中状态 #

使用HashSet<string>存储选中的releasename（值类型判断不受对象引用变化影响，更可靠），由父组件维护该状态，确保组件销毁重建时状态不丢失。

2. 绑定复选框选中状态 #

在复选框上通过checked属性动态绑定选中状态，根据HashSet中的值自动恢复勾选。

3. 修复复选框唯一标识 #

为每个复选框生成唯一的id和for属性，避免标签点击交互异常。

修改后的组件代码 #

Razor 部分 #

@using Devops.Data;

<div class="ml-[21.2vw] mt-[20vh] filter overflow-y-auto">
    <form>
        <fieldset>
            <div class="searchFILTER">
                <i id="searchFILTER" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 26" fill="none">
                    <svg id="searchFILTER" xmlns="http://www.w3.org/2000/svg" width="25" height="26" viewBox="0 0 25 26"
                         fill="none">
                        <g clip-path="url(#clip0_385_168)">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                  d="M17.5149 16.6719L21.5969 20.7539C21.6851 20.8421 21.7551 20.9469 21.8029 21.0622C21.8506 21.1775 21.8752 21.301 21.8752 21.4258C21.8752 21.5506 21.8506 21.6741 21.8029 21.7894C21.7551 21.9047 21.6851 22.0094 21.5969 22.0977C21.5087 22.1859 21.4039 22.2559 21.2886 22.3036C21.1734 22.3514 21.0498 22.376 20.925 22.376C20.8002 22.376 20.6767 22.3514 20.5614 22.3036C20.4461 22.2559 20.3414 22.1859 20.2531 22.0977L16.1719 18.0149C14.5556 19.2885 12.5138 19.8965 10.4641 19.7146C8.41436 19.5327 6.51155 18.5746 5.14483 17.0362C3.7781 15.4979 3.05072 13.4955 3.11143 11.4386C3.17213 9.3817 4.01635 7.42571 5.47142 5.97063C6.9265 4.51556 8.88248 3.67134 10.9394 3.61063C12.9963 3.54993 14.9986 4.27731 16.537 5.64404C18.0754 7.01077 19.0335 8.91357 19.2154 10.9633C19.3973 13.013 18.7893 15.0548 17.5156 16.6711L17.5149 16.6719ZM5.13986 11.6867C5.1397 10.4911 5.49411 9.32223 6.15825 8.328C6.82239 7.33377 7.76643 6.5588 8.87101 6.1011C9.97559 5.64341 11.1911 5.52353 12.3638 5.75664C13.5365 5.98975 14.6137 6.56537 15.4593 7.41071C16.3049 8.25606 16.8808 9.33315 17.1142 10.5058C17.3476 11.6784 17.228 12.894 16.7706 13.9987C16.3132 15.1034 15.5385 16.0476 14.5444 16.712C13.5504 17.3764 12.3816 17.7311 11.1859 17.7313C9.583 17.7294 8.04623 17.0918 6.91277 15.9583C5.77931 14.8249 5.14172 13.2881 5.13986 11.6852V11.6867Z"
                                  fill="#3D4A57" />
                        </g>
                        <defs>
                            <clipPath id="clip0_385_168">
                                <rect width="25" height="25" fill="white" transform="translate(0 0.5)" />
                            </clipPath>
                        </defs>
                    </svg>
                </i>
                <input type="text" class="w-[8.48vw]" placeholder="Search" />
            </div>

            <div class="space-y-2">
                @foreach (var item in SelectOptions)
                {
                    var checkboxId = $"release-{item.releasename}";
                    <div class="flex items-center mt-[1vh]">
                        <input id="@checkboxId" type="checkbox" name="type[@item.releasename]" class="h-[1.5vh] w-[1.5vw] check"
                               checked="@SelectedReleaseNames.Contains(item.releasename)"
                               @onchange="() => HandleCheckBox(item)" />
                        <label for="@checkboxId" class="ml-1 releaseTEXT"> @item.releasename </label>
                    </div>
                }
            </div>
        </fieldset>
    </form>
    <button @onclick="UpdatesortedProjects" name="commit" type="button" id="btn">
        OK
    </button>
</div>

@Code 部分 #

@code {
    [Parameter] public List<Projects> SelectOptions { get; set; } = new List<Projects>();
    [Parameter] public List<Projects> sortedProjects { get; set; } = new List<Projects>();
    [Parameter] public HashSet<string> SelectedReleaseNames { get; set; } = new HashSet<string>();
    [Parameter] public EventCallback<List<Projects>> OnUpdateSortedProjects { get; set; }

    private void HandleCheckBox(Projects project)
    {
        if (SelectedReleaseNames.Contains(project.releasename))
        {
            SelectedReleaseNames.Remove(project.releasename);
        }
        else
        {
            SelectedReleaseNames.Add(project.releasename);
        }
    }

    private async Task UpdatesortedProjects()
    {
        var filteredProjects = sortedProjects
            .Where(p => SelectedReleaseNames.Contains(p.releasename))
            .ToList();
        await OnUpdateSortedProjects.InvokeAsync(filteredProjects);
    }

    private void unselectAll()
    {
        SelectedReleaseNames.Clear();
        StateHasChanged();
    }
}

父组件配合注意事项 #

父组件需要维护SelectedReleaseNames集合，当打开筛选组件时，将该集合传递给子组件；关闭组件时保留该集合，下次打开时重新传入，即可恢复复选框状态。

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