web-dev-qa-db-ja.com

Blazor：マルチサイトリストへのバインド（理想的にはチェックボックスを使用して）

Blazorで実験する（サーバー、それが違いを生じさせた場合）、そして私は働くためにマルチサイトリストへのバインディングが困難になっています....

背景の少し：私はEFコアを扱っていて、多くの関係を持ち、人々と車の間で言ってみましょう。私は現在、既存の詳細を示すページをロードし、ユーザーがこのページを更新することを可能にします。

だから私のサービスでは、私は私の個人的なエンティティをDBからロードします、そしてこれには現在所有しているすべての車の詳細が含まれます。私はまた利用可能な車のリストをロードします。その後、My Serviceメソッドはマルチサイトリストを作成し、それをMy ViewModelに追加します（かみそりページに返される）。

サービス方法

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

これは架空のコードですが、私はあなたが写真を手に入れることを願っています。これをデバッグするとき（サービス方法で）このマルチスレットリストがすべての車のエントリを持つことを確認し、すでに選択されているものは選択どおりに表示されます。素晴らしい！

Blazor Razorページ

だから、これは私が不安定になるところです....このオブジェクトへのかみそりコントロールの双方向データバインディングの方法を実行することはできません。

  • <inputselect />を使用しようとしていますが、それが使用するのに最適なコントロールではないかもしれません。
  • 理想的には（実際には、それは「持つ必要がある」）、各オプションにチェックボックスを付ける必要があります。
  • マルチサイトリストの使用が本当に私を何も買うかどうか疑問に思います
data-bindingmulti-selectblazorblazor-server-side
6
DrGriff

マルチサイトリストをパラメータとして取り込むコンポーネントを操作するためにこれを手に入れました。これを達成するための優雅な方法があるかもしれません（あなたがより良い方法で知っていれば更新してください）。

@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;
        }
    }
}
 _
1
DrGriff

チェックボックスはBlazorの少し異なります。通常は、入力要素のbind-value属性を使用します。

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

代わりに、チェックボックスの@Bind構文を使用します。これははるかに堅牢で、両方の方法を実行します（コードからのバウンドのブール値を変更し、UIのチェックボックスと対話します）。以下の構文を参照してください。

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

Bind属性は、HTML要素の「チェックされた」プロパティにブール値を自動的にバインドします。

また、「value」プロパティではなく「選択した」プロパティにバインドしていることを確認してください。

組み込みバインドを使用すると、答えの中にしたときに手動でイベントを設定する必要があります。 IF/ELSEブロックを取り除くこともでき、Checkedプロパティを手動で設定するのではなく、ブール値にバインドしているため、コードを単一のコードフローにマージすることもできます。あなたがまだいくつかのプロセスを発射するためにイベントをタップする必要があるならば（ボックスのチェック上のUIの部分を隠すかもしれません）これが最終コードです。

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

}
 _
3
Eric Holland