IgbCombo – 双方向データバインディングする方法 [v.23.1.37, v.23.1.60]

Ignite UI for Blazor の コンボコンポーネント IgbCombo では、ValueKey パラメーターに指定したメンバー値について、双方向データバインディングを実装することができます。より具体的には、以下を実装します。

• モデルから UI へのデータバインディングのために、選択されている選択肢の ValueKey 値をIgbCombo コンポーネントの Value パラメータに配列で渡します。
• UI からモデルへのデータバインディングのために、Change イベントハンドラを補足し、選択状態の変化を取得します。

この記事で紹介している方法は、Ignite UI for Blazor の NuGet パッケージバージョン v.23.1.37 および v.23.1.60 で有効です。より新しい v.23.1.72 以降をお使いの場合は「IgbCombo – 双方向データバインディングする方法 [v.23.1.72 以降]」を参照ください。

例

例として、とある Razor コンポーネント内に以下のような選択肢データがあったとして、

// ※Person クラスは string Id と string Name の 2 つのプロパティを持つクラスです。
private readonly IEnumerable<Person> _data = new Person[]
{
    new(){ Id = "001", Name = "Taro" },
    new(){ Id = "002", Name = "Hanako" },
};

これを以下のように IgbCombo にバインドしているとします。

<IgbCombo 
    Data="_data"
    DisplayKey="@nameof(Person.Name)" 
    ValueKey="@nameof(Person.Id)">
</IgbCombo>

そして、以下のように用意された _selectedValues フィールド変数に、この IgbCombo の選択状態を ValueKey パラメーターに指定した Person.Id プロパティで示される値の配列として双方向バインディングしてみましょう。

private string[] _selectedValues = Array.Empty<string>();

モデルから UI へのデータバインディング

これは単純に、_selectedValues フィールド変数を、IgbCombo の Value パラメーターに渡せば良いです。

<IgbCombo 
    Data="_data" 
    DisplayKey="@nameof(Person.Name)" 
    ValueKey="@nameof(Person.Id)" 
    Value="_selectedValues"> @* ? Value パラメーターにフィールド変数を渡す *@
</IgbCombo>

こうすることで、フィールド変数 _selectedValues に Person.Id プロパティ値を示す配列を設定すると、それが IgbCombo の選択状態に反映されます。

UI からモデルへのデータバインディング

UI (IgbCombo) を操作して選択が変更された結果をモデル (フィールド変数 _selectedValues) に反映するには、IgbCombo の Change イベントコールバックをハンドルします。その Change イベントコールバックハンドラでは、現在選択されている項目の ValueKey 値が、イベント引数の .Detail.NewValue プロパティから取得できますので、これを _selectedValues フィールド変数に書き戻せばよいです。

つまり、以下のように Change イベントコールバックハンドラを用意し、

private void OnChange(IgbComboChangeEventArgs e)
{
    _selectedValues = e.Detail.NewValue;
}

このイベントコールバックハンドラを、IgbCombo コンポーネントの Change パラメーターに設定すればよいです。

<IgbCombo 
    Data="_data" 
    DisplayKey="@nameof(Person.Name)" 
    ValueKey="@nameof(Person.Id)" 
    Value="_selectedValues"
    Change="OnChange"> @* ? Change パラメーターにイベンハンドラを渡す *@
</IgbCombo>

以上で IgbCombo における ValueKey 値で示される選択状態を、双方向データバインディングすることができるようになりました。このように双方向データバインディングを実装しておくと、この例で言えば _selectedValues フィールド変数を参照することで、現在どの選択肢が選択状態にあるかを随時把握することも可能となります。

動作するサンプルプログラム全体は下記のダウンロードリンクまたは GitHub リポジトリから入手頂けます。

注意点

• IgbCombo の ValueKey パラメーターで指定されるメンバーの型は string 型である必要があります。
• IgbCombo の Value パラメーターおよび Change パラメーターは、Ignite UI for Blazor のバージョン 23.1 から有効です。バージョン 22.2 以前では上記で紹介している双方向データバインディングは利用できません。バージョン 22.2 以前で IgbCombo の選択状態を取得するには「IgbCombo – 選択されている値を取得する方法 – INFRAGISTICS ナレッジベース」を参照ください。