Ignite UI for Blazor の コンボコンポーネント IgbCombo では、ValueKey パラメーターに指定したメンバー値について、@bind-Value 構文により、双方向データバインディングすることができます。
この記事で紹介している方法は、Ignite UI for Blazor の NuGet パッケージバージョン v.23.1.72 以降で有効です。それより前のバージョンをお使いの場合は「IgbCombo – 双方向データバインディングする方法 [v.23.1.37, v.23.1.60]」を参照ください。
例
例として、とある Razor コンポーネント内に以下のような選択肢データがあったとして、
// ※Person クラスは int Id と string Name の 2 つのプロパティを持つクラスです。
private readonly IEnumerable<Person> _data = new Person[]
{
new(){ Id = 1, Name = "Taro" },
new(){ Id = 2z, Name = "Hanako" },
};
これを以下のように IgbCombo にバインドしているとします。
<IgbCombo
Data="_data"
DisplayKey="@nameof(Person.Name)"
ValueKey="@nameof(Person.Id)">
</IgbCombo>
そして、以下のように用意された _selectedValues フィールド変数に、この IgbCombo の選択状態を ValueKey パラメーターに指定した Person.Id プロパティで示される値の配列として双方向バインディングしてみましょう。
private object[] _selectedValues = Array.Empty<object>();
双方向データバインディング
これは単純に、_selectedValues フィールド変数を、IgbCombo に @bind-Value パラメーターに渡せば良いです。
<IgbCombo
Data="_data"
DisplayKey="@nameof(Person.Name)"
ValueKey="@nameof(Person.Id)"
@bind-Value="_selectedValues"> @* ? @bind-Value 構文にフィールド変数を渡す *@
</IgbCombo>
こうすることで、フィールド変数 _selectedValues に Person.Id プロパティ値を示す配列を設定すると、それが IgbCombo の選択状態に反映されますし、逆にユーザー操作によって選択状態が変更されると、その選択結果がフィールド変数 _selectedValues に書き戻されます。
以上で IgbCombo における ValueKey 値で示される選択状態を、双方向データバインディングすることができるようになります。このように双方向データバインディングを実装しておくと、この例で言えば _selectedValues フィールド変数を参照することで、現在どの選択肢が選択状態にあるかを随時把握することも可能となります。
動作するサンプルプログラム全体は下記のダウンロードリンクまたは GitHub リポジトリから入手頂けます。
注意点
- IgbCombo の @bind-Value パラメーターに渡すフィールド変数 (あるいはプロパティ) の型は、object 型の配列 (object[]) である必要があります。
- ValueKey で指定したメンバーの型が数値系の型の場合、ユーザー操作によって @bind-Value にしてしたフィールド変数に選択された項目の ValueKey 値が書き戻される際は、すべて double 型に変換されます。データソースに渡した項目の型と必ずしも一致しない場合があります。
- Ignite UI for Blazor のバージョン 23.1.72 から、ValueKey パラメーターで指定されるメンバーの型は 任意のプリミティブ型を渡せるようになりました (23.1.72 より前のバージョンでは、string 型である必要がありました)。
- IgbCombo の @bind-Value パラメーターの利用は、Ignite UI for Blazor のバージョン 23.1.72 から有効です。バージョン 23.1.72 より前のバージョンでは上記で紹介している双方向データバインディングは利用できません。
バージョン 23.1.37 および 23.1.60 で IgbCombo の双方向バインディングを利用するには「IgbCombo – 双方向データバインディングする方法 [v.23.1.37, v.23.1.60]」を、
バージョン 22.2.x およびそれ以前で IgbCombo の選択状態を取得するには「IgbCombo – 選択されている値を取得する方法 – INFRAGISTICS ナレッジベース」を参照ください。
