IgbRadio – 双方向バインディングする方法(※v.24.1.46 以降)

@bind-Value を使用した双方向バインディング機能は、Ignite UI for Blazor の NuGet パッケージバージョン 24.1.46 以降でご利用いただけます。これより前のバージョンでは動作しないため、必要に応じてアップデートを行ってください。

本記事では、バージョン 24.1.46 以降で利用可能な @bind-Value を用いて、IgbRadio で双方向バインディングを実現する方法についてご紹介します。

IgbRadioの双方向バインディング設定

まず、IgbRadioGroup を利用して、複数のラジオボタンをグループ化します。@bind-Value を使って、選択されたラジオボタンの値をリアルタイムでデータに反映させます。

<IgbRadioGroup @bind-Value="selectedFruit">
    <IgbRadio Value="Apple">
        Apple
    </IgbRadio>
    <IgbRadio Value="Orange">
        Orange
    </IgbRadio>
    <IgbRadio Value="Grape">
        Grape
    </IgbRadio>
</IgbRadioGroup>

selectedFruit の初期値を設定することで、ページ読み込み時に特定のラジオボタンをデフォルトで選択しておくことも可能です。以下の例では、Orange が初期選択されます。

@code {
    private string selectedFruit = "Orange";
}

実行結果

上記のコードを実行すると、ラジオボタンで果物（Apple、Orange、Grape）を選択でき、選択された果物がリアルタイムで画面に表示されます。

関連ドキュメント

• Radio と Radio Group (infragistics.com)