IgbSelect の@bind-Valueを用いて、双方向バインディングを実現する方法についてご紹介します。

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

双方向バインディングを用いることで、IgbSelect のリスト内の項目を選択し、その選択状態をコードビハインドのプロパティと連動させることが可能です。

<IgbSelect @bind-Value="_selectedValue">
    @foreach (var item in _data)
    {
        <IgbSelectItem Value="@item.Id">@item.Name</IgbSelectItem>
    }
</IgbSelect>

@bind-Valueを使うことで、選択した値をリアルタイムで _selectedValue プロパティに反映します。

実行結果

ドロップダウンを操作すると、選択された果物名がリアルタイムで更新されます。

関連ドキュメント

製品について

Ignite UI for Blazor