Blazor:绑定到MultiSelectList(理想情况下带有复选框) [英] Blazor: binding to a MultiSelectList (ideally with a checkbox)

问题描述

使用Blazor(服务器，如果有什么不同)进行实验，我很难绑定到MultiSelectList上来工作....

Experimenting with Blazor (Server, if that makes any difference), and I'm having difficulty getting binding to a MultiSelectList to work....

背景知识:我正在与EF Core打交道，并且在人与汽车之间建立了多对多关系.我当前正在加载一个显示现有详细信息的页面，并允许用户更新此页面.

Bit of background: I'm dealing with EF Core and have a Many-to-Many relationship, let's say between people and cars. I'm currently loading a page that shows the existing details, and allowing the user to update this page.

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

So in my Service, I load my Person entity from the DB, and this includes the details of all the cars they currently own. I also load the list of all the available cars. My Service method then creates a MultiSelectList and adds it to my ViewModel (to be returned to the Razor Page):

服务方法

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

这是虚拟代码，但我希望您能理解.调试时(在Service方法中)，我可以看到此MultiSelectList为每个汽车都有一个条目，并且已经选择的汽车显示为Selected.太好了！

This is fictitious code, but I hope you get the picture. When debugging this (in the Service method) I can see that this MultiSelectList has an entry for every car, and the ones that are already selected are showing as Selected. Great!

Blazor Razor Page

因此，这就是我要解决的问题....我不知道如何对Razor控件进行双向数据绑定.

So, this is where I come unstuck.... I can't work out how to do the two-way data-binding of a Razor control to this object.

• 我正在尝试使用< InputSelect/> ;，但这可能不是最好的控件.
• 理想情况下(实际上，更多的是必须拥有")，每个选项都应具有CheckBox.
• 我想知道使用MultiSelectList是否真的可以给我带来任何好处

推荐答案

我将其与使用MultiSelectList作为参数的组件一起使用.可能有更优雅的方法来实现此目的(如果您知道更好的方法，请进行更新).

I got this to work with a component that takes the MultiSelectList as a parameter. There may be more elegant ways to achieve this (please do update if you know of a better way).

@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;
        }
    }
}

这篇关于Blazor:绑定到MultiSelectList(理想情况下带有复选框)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！