BlazorでのWebアプリケーション開発手法１【C#】D19_ラジオボタンのチェンジイベント

前回の講義では、ラジオボタンの双方向データバインドを行いました。今回は、その値が変更されたタイミングでイベントを取得する方法を解説します。

これまでのテキスト入力欄やチェックボックスでは、変更イベントを取得する際に @bind:after を使ってきました。しかし今回のラジオボタン（InputRadioGroup）は、他の入力コンポーネントと少し形が異なります。値のバインドが @bind ではなく @bind-Value という書き方になっているため、チェンジイベントを取得する属性も同様に @bind-Value:after という書き方になります。

図1　変更前のInputRadioGroup（@bind-Value=”_memberKind”のみ）

まずは現在のコードを確認します。InputRadioGroup要素には @bind-Value=”_memberKind” のみが指定されており、まだチェンジイベントを取得する仕組みはありません。ここに @bind-Value:after を追加していきます。

<InputRadioGroup @bind-Value="_memberKind">
    <label>
        <InputRadio Value="1" /> 一般会員
    </label>
    <label>
        <InputRadio Value="2" /> ゴールド会員
    </label>
</InputRadioGroup>

@bind-Value の行の下で「@」を入力すると、IntelliSenseの候補一覧が表示されます。この中から Value:after に相当する候補（今回は直接 @bind-Value:after と入力）を選び、チェンジイベント用の属性を追加します。

図2　「@」入力時に表示されるIntelliSense候補

@bind-Value:after=”” まで入力した状態です。ダブルクォートの中に、値が変更されたときに呼び出すメソッド名を指定します。

図3　@bind-Value:after=”” を入力した直後

メソッド名として MemberKindChanged と入力します。まだ存在しないメソッド名ですが、IntelliSenseの候補にも表示され、後でこの名前のメソッドを @code ブロック内に作成します。

図4　MemberKindChangedと入力している様子

InputRadioGroupの記述はこれで完成です。続いて @code ブロックの末尾、既存の ProductChanged・AutoChanged メソッドの下に、新しく MemberKindChanged メソッドを作成します。

図5　既存のProductChanged・AutoChangedメソッドの下（新規メソッド追加前）

空のメソッドを作成し、動作確認のためにメソッド内にブレークポイントを設置します。

private void MemberKindChanged()
{
}

完成したInputRadioGroupの全体は以下のとおりです。@bind-Value と @bind-Value:after を並べて記述しています。

<InputRadioGroup @bind-Value="_memberKind"
                 @bind-Value:after="MemberKindChanged">
    <label>
        <InputRadio Value="1" /> 一般会員
    </label>
    <label>
        <InputRadio Value="2" /> ゴールド会員
    </label>
</InputRadioGroup>

図6　完成したInputRadioGroup（デバッグ実行中）

この状態で実行（F5）します。起動直後は「ゴールド会員」が選択されている状態です。

図7　起動直後の画面（ゴールド会員が選択された状態）

ここで「一般会員」に切り替えると、MemberKindChangedメソッドのブレークポイントで処理が止まります。_memberKindにマウスを乗せてツールチップを確認すると、値が1になっていることが確認できます。

図8　ブレークポイント停止時のツールチップ（_memberKind = 1）

実行を継続すると、画面上でも「一般会員」が選択された状態になっていることが確認できます。

図9　「一般会員」に切り替わった画面

続けて「ゴールド会員」に戻すと、再びMemberKindChangedメソッドで通知を受け取ります。

図10　「ゴールド会員」に切り替わった画面

同様にブレークポイントで_memberKindの値を確認すると、今度は2になっていることが確認できます。

図11　ブレークポイント停止時のツールチップ（_memberKind = 2）

このように、InputRadioGroupを使ったラジオボタンでチェンジイベントを取得したい場合は、これまでの @bind:after ではなく @bind-Value:after を使う点に注意してください。バインドの書き方（@bind-Value）に合わせて、afterの書き方も変わるということを覚えておきましょう。