Blazor - InputCheckbox：根据数据库表中的内容进行复选框

Question

我正在尝试根据数据库表中包含的数字预填充复选框。例如，表条目可能包括：

用户ID	商品编号
1	4
1	5
1	10
2	4
2	6
2	54

在我的页面上，我想根据输入的用户填写复选框。所以用户 1 会是（当然没有漂亮的 Blazor UI）：

商品名称	复选框
狗(4)	X
猫(5)	X
兔子(6)
山羊(10)	X
骆驼(54)

当页面打开时，我希望检查项目以匹配数据库中的内容。我希望我能以某种方式通过从对象项 id 中获取数字列表（示例中为 4、5 和 10）来实现这一点。

我知道如何使用布尔值和事件处理程序处理 Blazor 复选框，但不确定如何将其基于列表。

Answer 1

在 Blazor 应用程序中创建一个模型来表示项目以及它们是否被选中。例如：

public class ItemModel
{
    public int ItemId { get; set; }
    public string ItemName { get; set; }
    public bool IsChecked { get; set; }
}

使用数据库数据初始化模型

List<ItemModel> items = new List<ItemModel>
{
    new ItemModel { ItemId = 4, ItemName = "Dog" },
    new ItemModel { ItemId = 5, ItemName = "Cat" }
};

foreach (var item in items)
{
    if (userSelectedItems.Contains(item.ItemId))
    {
        item.IsChecked = true; // Compare where "X"
    }
}

或者你可以将“X”存储在模型中并进行比较

将复选框绑定到模型

@foreach (var item in items)
{
    <input type="checkbox" @bind="item.IsChecked">@item.ItemName (@item.ItemId)
}