Blazor:绑定到多重选择列表(最好带有复选框)

Question

试验 Blazor(服务器，如果这有什么不同的话(，我很难绑定到 MultiSelectList 才能工作......

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

因此，在我的服务中，我从数据库中加载我的 Person 实体，这包括他们当前拥有的所有汽车的详细信息。 我还加载了所有可用汽车的列表。 然后，我的服务方法创建一个多选列表并将其添加到我的视图模型(将返回到剃刀页面(：

服务方式

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

这是虚构的代码，但我希望你明白这一点。 在调试它时(在服务方法中(，我可以看到这个多选列表对每辆车都有一个条目，而已经选择的那些显示为"已选择"。 伟大！

布拉泽剃刀页面

所以，这就是我解开的地方。 我无法弄清楚如何将 Razor 控件双向绑定到此对象。

• 我正在尝试使用<输入选择 />，但这可能不是最好的控件。
• 理想情况下(实际上，这更像是"必须拥有"(，每个选项都应该有复选框。
• 我想知道使用多选列表是否真的能给我买到任何东西

Answer 1

blazyor 中的复选框略有不同。通常，您将在输入元素上使用绑定值属性，如下所示，但是，不建议这样做，因为您只能读取值，而不能通过代码更改布尔值来更新 UI：

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

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

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

bind 属性会自动将布尔值绑定到 html 元素的"checked"属性。

还要确保绑定到"选定"属性而不是"值"属性。

使用内置绑定将避免像在答案中那样手动设置事件。您还可以摆脱 if/else 块并将代码合并到单个代码流中，因为您现在绑定到布尔值而不是手动设置 checked 属性。如果您仍然需要利用一个事件来触发某些进程(可能在选中框时隐藏 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
}
}

Answer 2

我让它与一个将MultiSelectList作为参数的组件一起工作。 可能有更优雅的方法来实现这一点(如果您知道更好的方法，请进行更新(。

@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Mvc.Rendering
<div class="multiselect">
<div id="checkboxes">
@foreach (var item in this.Items)
{
<div>
<label for="@item.Value">
@if (item.Selected)
{
<input type="checkbox" id="@item.Value" checked="checked" @onchange="@((e) => CheckboxChanged(e, item.Value))" />
}
else
{
<input type="checkbox" id="@item.Value" @onchange="@((e) => CheckboxChanged(e, item.Value))" />
}
@item.Text
</label>
</div>
}
</div>
</div>
@code
{
[Parameter]
public MultiSelectList Items { get; set; } = null!;
private void CheckboxChanged(ChangeEventArgs e, string key)
{
var i = this.Items.FirstOrDefault(i => i.Value == key);
if (i != null)
{
i.Selected = (bool)e.Value;
}
}
}