data-binding - Blazor:绑定(bind)到 MultiSelectList(最好带有复选框)

Question

尝试使用 Blazor(服务器，如果这有什么不同的话)，我很难将绑定(bind)到 MultiSelectList 工作....

一点背景知识:我正在处理 EF Core 并且有一个多对多的关系，比如说人和汽车之间。我目前正在加载一个显示现有详细信息的页面，并允许用户更新此页面。

所以在我的服务中，我从数据库中加载我的 Person 实体，这包括他们当前拥有的所有汽车的详细信息。我还加载了所有可用汽车的列表。然后，我的 Service 方法创建一个 MultiSelectList 并将其添加到我的 ViewModel(要返回到 Razor 页面):

服务方式

vm.CarSelector = new MultiSelectList(
     allCars,
     nameof(Car.CarId), 
     nameof(Car.Name), 
     person.OwnedCars.Select(oc => oc.CarId));

这是虚构的代码，但我希望你能明白。在调试这个(在服务方法中)时，我可以看到这个 MultiSelectList 对每辆车都有一个条目，并且已经选择的那些显示为 Selected。伟大的!

Blazor Razor 页面

所以，这就是我陷入困境的地方......我无法弄清楚如何将 Razor 控件的双向数据绑定(bind)到这个对象。

我正在尝试使用 ，但这可能不是最好的控件。

理想情况下(实际上，这更像是“必须拥有”)，每个选项都应该有 CheckBox。

我想知道 MultiSelectList 的使用是否真的能给我带来什么

Answer 1

blazor 中的复选框有点不同。通常，您会在输入元素上使用 bind-value 属性，如下所示，但是，不建议这样做，因为您只能通过代码更改 bool 值来读取值而不能更新 UI:

    <input type="checkbox" @bind-value="@item.Selected"/>

相反，对复选框使用@bind 语法，它更加健壮并且可以双向工作(从代码中更改绑定(bind)的 bool 值并与 UI 上的复选框交互)。请参阅下面的语法:

    <input type="checkbox" @bind="@item.Selected"/>

bind 属性会自动将您的 bool 值绑定(bind)到 html 元素的“checked”属性。

还要确保绑定(bind)到“Selected”属性而不是“Value”属性。

使用内置绑定(bind)将避免像您在答案中所做的那样手动设置事件。您还可以摆脱 if/else block 并将代码合并到单个代码流中，因为您现在绑定(bind)到 bool 值而不是手动设置选中的属性。如果您仍然需要点击一个事件来触发某个进程(可能在选中一个框时隐藏部分 UI)，我建议使用 onclick 事件并为每行手动传递多选项目。这是最终代码:

@foreach(var item in list)
{
    <input type="checkbox" @bind="item.Selected" @onclick="(()=>handleClick(item))" />
}
@foreach(var item in list.Where(x=>x.Selected))
{
    <p> Item @item.Text is Selected</p>
}

@code {
    MultiSelectList list = new MultiSelectList(new List<Car> { new Car { Year = 2019, Make = "Honda", Model = "Accord" }, new Car { Make = "Honda", Model = "Civic", Year = 2019 } });

    private void handleClick(SelectListItem item)
    {        
        //Do something crazy
    }

}