如何在Blazor重构代码中添加条件按需显示指定复选框

核心问题出在重构后没有把NavItem的分类过滤逻辑和复选框组正确绑定，导致所有组都被渲染。以下是清晰可维护的解决思路：

1. 结构化存储复选框数据 #

先把所有复选框按分类分组，让数据和视图逻辑分离，后续维护时只需修改数据结构即可：

// 示例：前端框架（Vue/React）用对象存储分类与复选框对应关系
const checkboxGroups = {
  fruits: [
    { label: '苹果', value: 'apple' },
    { label: '香蕉', value: 'banana' },
    { label: '橙子', value: 'orange' }
  ],
  nuts: [
    { label: '核桃', value: 'walnut' },
    { label: '杏仁', value: 'almond' }
  ],
  vegetables: [
    { label: '胡萝卜', value: 'carrot' },
    { label: '西兰花', value: 'broccoli' }
  ]
};

如果是后端渲染框架（比如Blazor），可以用字典结构存储：

var checkboxGroups = new Dictionary<string, List<CheckboxItem>>
{
    ["fruits"] = new List<CheckboxItem>
    {
        new() { Label = "苹果", Value = "apple" },
        new() { Label = "香蕉", Value = "banana" },
        new() { Label = "橙子", Value = "orange" }
    },
    ["nuts"] = new List<CheckboxItem>
    {
        new() { Label = "核桃", Value = "walnut" },
        new() { Label = "杏仁", Value = "almond" }
    },
    ["vegetables"] = new List<CheckboxItem>
    {
        new() { Label = "胡萝卜", Value = "carrot" },
        new() { Label = "西兰花", Value = "broccoli" }
    }
};

public class CheckboxItem { public string Label { get; set; } public string Value { get; set; } }

2. 基于NavItem过滤渲染 #

遍历NavItem中的分类，只渲染对应分类下的复选框组，确保只显示符合条件的选项：

Vue示例：

<div v-for="category in NavItem" :key="category">
  <h3>{{ category }}</h3>
  <div v-for="checkbox in checkboxGroups[category]" :key="checkbox.value">
    <label>
      <input type="checkbox" :value="checkbox.value">
      {{ checkbox.label }}
    </label>
  </div>
</div>

Blazor示例：

@foreach (var category in NavItem)
{
    if (checkboxGroups.TryGetValue(category, out var checkboxes))
    {
        <h3>@category</h3>
        @foreach (var checkbox in checkboxes)
        {
            <label class="checkbox-item">
                <input type="checkbox" value="@checkbox.Value" />
                @checkbox.Label
            </label>
        }
    }
}

@code {
    public List<string> NavItem { get; set; } = new() { "fruits", "nuts" };
}

关键注意事项 #

• 确保NavItem中的分类值和checkboxGroups的键完全匹配（大小写、拼写一致），否则对应组不会被渲染；
• 这种结构的好处是后续新增分类或修改复选框时，只需更新checkboxGroups数据，无需改动视图逻辑，可维护性大幅提升；
• 如果是其他框架（如React），核心逻辑一致：遍历NavItem，根据分类取出对应复选框列表渲染即可。

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