Blazor中如何仅列出已勾选的枚举值？

核心问题分析 #

你的代码目前存在三个关键问题：

• 所有复选框使用相同的id和label的for属性，导致交互异常（点击任意标签会触发所有复选框）
• 未绑定复选框的选中状态，无法跟踪用户选择
• AddBrowsers方法直接添加所有枚举项，没有过滤选中的选项

修正后的完整代码实现 #

1. 确保TestBrowser类定义（如果未定义）

public class TestBrowser
{
    public Browsers BrowserName { get; set; }
    public bool isChecked { get; set; }
}

2. 页面组件代码

@page "/Sub2"
@using TestPatternBuilder.Data

<div class="col">
    <div>Browsers:</div>
    @foreach (var browser in Enum.GetValues<Browsers>())
    {
        <input class="form-check-input mx-0" 
               type="checkbox" 
               id="browser-@browser" 
               @bind="browserSelections[browser]" />
        <label class="ms-1" for="browser-@browser">@browser</label><br />
    }

    <button class="btn btn-secondary my-3" @onclick="AddBrowsers">Add Browsers</button>

    <ul class="mt-2">
        @foreach (var br in selectedBrowsers)
        {
            <li>@br.BrowserName</li>
        }
    </ul>
</div>

@code{
    List<TestBrowser> selectedBrowsers = new List<TestBrowser>();
    // 用字典跟踪每个枚举项的选中状态
    Dictionary<Browsers, bool> browserSelections = new();

    protected override void OnInitialized()
    {
        // 初始化字典，给每个枚举项设置默认未选中
        foreach (var browser in Enum.GetValues<Browsers>())
        {
            browserSelections.Add(browser, false);
        }
    }

    private void AddBrowsers()
    {
        // 清空现有列表（可选，根据需求决定是否保留之前的选择）
        selectedBrowsers.Clear();
        
        // 只添加选中的枚举项
        foreach (var selection in browserSelections.Where(s => s.Value))
        {
            selectedBrowsers.Add(new TestBrowser 
            { 
                BrowserName = selection.Key, 
                isChecked = true 
            });
        }
    }
}

关键修改说明 #

• 唯一ID绑定：将复选框的id设置为browser-@browser，对应的label的for属性也同步，确保每个复选框和标签正确关联
• 选中状态绑定：使用@bind="browserSelections[browser]"将复选框的选中状态绑定到字典中对应的布尔值，Blazor会自动同步用户的选择
• 初始化字典：在OnInitialized方法中初始化字典，给每个枚举项设置默认的未选中状态
• 过滤选中项：在AddBrowsers方法中，通过Where(s => s.Value)筛选出选中的项，再添加到目标列表中

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