Blazor InputCheckbox：基于数据库表数据预设复选框状态

1. 定义数据模型 #

先明确核心数据结构：

// 物品实体
public class Item
{
    public int Id { get; set; }
    public string Name { get; set; }
}

// 用户-物品关联实体（对应数据库关联表）
public class UserItem
{
    public int UserId { get; set; }
    public int ItemId { get; set; }
}

2. 组件内准备数据 #

在Blazor组件中声明两个核心集合：所有物品列表，以及当前用户已关联的物品ID集合（用HashSet<int>提升查找效率）：

@code {
    private List<Item> _allItems = new();
    private HashSet<int> _userAssociatedItemIds = new();
    private int _currentUserId = 1; // 当前用户ID，可从认证信息/路由等实际场景获取

    protected override async Task OnInitializedAsync()
    {
        // 从数据库加载所有物品
        _allItems = await GetAllItemsFromDatabase();
        // 从数据库加载当前用户关联的物品ID列表
        var userItems = await GetUserAssociatedItems(_currentUserId);
        _userAssociatedItemIds = new HashSet<int>(userItems.Select(ui => ui.ItemId));
    }

    // 模拟数据库查询方法（实际项目替换为真实数据访问逻辑）
    private Task<List<Item>> GetAllItemsFromDatabase()
    {
        return Task.FromResult(new List<Item>
        {
            new Item { Id = 1, Name = "物品1" },
            new Item { Id = 4, Name = "物品4" },
            new Item { Id = 5, Name = "物品5" },
            new Item { Id = 10, Name = "物品10" },
            new Item { Id = 12, Name = "物品12" }
        });
    }

    private Task<List<UserItem>> GetUserAssociatedItems(int userId)
    {
        return Task.FromResult(new List<UserItem>
        {
            new UserItem { UserId = 1, ItemId = 4 },
            new UserItem { UserId = 1, ItemId = 5 },
            new UserItem { UserId = 1, ItemId = 10 }
        });
    }
}

3. 渲染复选框并绑定状态 #

在组件HTML部分遍历所有物品，通过判断ID是否在已关联集合中来预设选中状态，同时处理选中/取消事件维护集合：

@foreach (var item in _allItems)
{
    <div class="checkbox-item">
        <input type="checkbox" 
               id="item-@item.Id" 
               checked="@_userAssociatedItemIds.Contains(item.Id)"
               @onchange="(e) => ToggleItemAssociation(item.Id, (bool)e.Value)" />
        <label for="item-@item.Id">@item.Name</label>
    </div>
}

在@code块中添加状态变更处理方法：

private void ToggleItemAssociation(int itemId, bool isChecked)
{
    if (isChecked)
    {
        _userAssociatedItemIds.Add(itemId);
    }
    else
    {
        _userAssociatedItemIds.Remove(itemId);
    }
    // 此处可添加同步到数据库的逻辑，比如调用API或直接操作DbContext
}

关键细节 #

• 用HashSet<int>存储已关联ID：Contains方法时间复杂度为O(1)，比List<int>的O(n)效率更高，适合物品数量较多的场景。
• 手动维护集合状态：由于HashSet的Contains是只读判断，无法直接通过@bind-checked双向绑定，因此需要配合@onchange事件手动更新集合。
• 数据加载时机：在OnInitializedAsync中完成数据库查询，避免页面初始加载时出现空数据。

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