BlazorでのWebアプリケーション開発手法１【C#】D18_ラジオボタンのデータバインド

前回の「D17 ラジオボタン」では、Bootstrap公式サンプルを利用してラジオボタンを表示し、name属性でグループ化することで排他選択（どちらか一方だけを選べる状態）ができるところまでを確認しました。今回はこのラジオボタンに対して、実際にデータバインドを行っていきます。

素朴にbool型でデータバインドしてみる

ラジオボタンのデータバインドと聞くと、チェックボックスのときと同じように@bindでbool型の値を設定すればよいのでは、と考えるのが自然です。まずはその方法を試してみます。

図1　D17で作成したラジオボタン（一般会員／ゴールド会員、name=”memberKind”でグループ化済み）

@codeブロックに、一般会員用の_isNormalとゴールド会員用の_isGoldという2つのbool型フィールドを用意します。ゴールド会員側は初期状態でチェックが入っていたので、初期値をtrueにしておきます。

図2　bool型フィールド _isNormal（false）・_isGold（true）を追加

private bool _isNormal = false;
private bool _isGold = true;

一般会員側のinputタグに@bind=”_isNormal”を設定します。

図3　一般会員のinputタグに @bind=”_isNormal” を設定

ゴールド会員側は、もともと付いていたchecked属性を削除し、代わりに@bind=”_isGold”を設定します。

図4　ゴールド会員のchecked属性を削除し @bind=”_isGold” に置き換え

<div class="form-check">
    <input class="form-check-input" type="radio" name="memberKind"
        id="normalMember" @bind="_isNormal">
    <label class="form-check-label" for="normalMember">
        一般会員
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="memberKind"
        id="goldMember" @bind="_isGold">
    <label class="form-check-label" for="goldMember">
        ゴールド会員
    </label>
</div>

_isGoldの初期値をtrueにしたので、実行するとゴールド会員側にチェックが入り、一般会員側は外れた状態になる、と予想されます。実際に実行して確認してみます。

図5　実行結果：予想に反して、一般会員・ゴールド会員のどちらにもチェックが入らない

予想に反して、どちらのラジオボタンにもチェックが入っていません。念のため、保存ボタンのSave()メソッドにブレークポイントを置いて動作を確認します。

図6　ゴールド会員を選択して保存 → ブレークポイントで _isGold・_isNormal はどちらも false

ゴールド会員を選択した状態で保存しても、_isGoldはtrueにならずfalseのままです。続けて一般会員を選択して保存してみます。

図7　一般会員を選択して保存 → こちらもどちらも false のまま

こちらも同様に、_isNormal・_isGoldのどちらもfalseのままで、データバインドがまったく機能していないことが分かります。これは、Blazorの@bindを使っても、ラジオボタンのように「1つ選択すると他の選択状態も連動して変わる」という部品では、単純なbool型のバインドではうまく扱えないためです。ラジオボタンについては、Blazorがあらかじめ用意している専用の入力コンポーネントを利用する必要があります。

Blazor提供の入力コンポーネントを使う

先ほどのHTMLのラジオボタン部分をすべて選択し、コメントボタンでコメントアウトしておきます。この下に、Blazorの入力コンポーネントを使った書き方を追加していきます。

図8　既存のHTMLラジオボタン（div.form-check×2）をコメントアウト

InputRadioGroupタグを配置する

コメントアウトした行の下に<InputRadioGroup>と入力します。IntelliSenseの候補にInputRadioGroupとInputRadioが表示されるので、まずInputRadioGroupを選択します。これはMicrosoftが提供している入力コンポーネント（Razorコンポーネント）の1つです。

図9　<InputRadioGroup> をIntelliSenseから選択

入力コンポーネントにバインドする際は、通常の@bindではなく@bind-Valueという構文を使う必要があります。InputRadioGroupタグに@bind-Value属性を追加します。

図10　InputRadioGroupタグに @bind-Value 属性を追加

バインド先はint型のフィールドにする

ラジオボタンは「選択されている値が1つに決まる」部品です。そこで、一般会員なら1、ゴールド会員なら2、というようにint型の値1つで表現すれば、単純にint一発でバインドできます。@codeブロックに、会員区分を表すprivate int _memberKindフィールドを追加します（デフォルト値は2＝ゴールド会員にしています）。あわせて、不要になった_isNormal・_isGoldの2つのbool型フィールドはコメントアウトしておきます。

図11　_isNormal・_isGold をコメントアウトし、private int _memberKind = 2; を追加

// private bool _isNormal = false;
// private bool _isGold = true;
private int _memberKind = 2;

InputRadioGroupの@bind-Valueには、この_memberKindを指定します。

図12　@bind-Value=”_memberKind” を設定

InputRadioタグで選択肢を作る

次に、実際のラジオボタン本体となるInputRadioタグをInputRadioGroupの中に配置します。InputRadioにはValue属性を指定し、これが_memberKindに入る区分値になります。一般会員をValue=”1″としたうえで、labelタグで囲んで「一般会員」という表示文字列を追加します。

図13　<InputRadio Value=”1″ /> をlabelタグで囲み、表示文字列「一般会員」を追加

同じ要領でもう1つInputRadioを作成し、Value=”2″・表示文字列「ゴールド会員」とします。

図14　2つ目の InputRadio（Value=”2″）に表示文字列「ゴールド会員」を設定

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

動作確認

ここまでできたら実行して確認します。計測設定画面を開くと、一般会員・ゴールド会員のラジオボタンが表示され、どちらか一方を選択できるようになっています。

図15　計測設定画面：一般会員／ゴールド会員のラジオボタンが表示され、ゴールド会員を選択した状態

一般会員を選択して保存ボタンを押し、Save()メソッドのブレークポイントで確認すると、_memberKindが1になっています。

図16　一般会員を選択して保存 → ブレークポイントで _memberKind が 1

続けてゴールド会員を選択して保存すると、_memberKindは2になります。

図17　ゴールド会員を選択して保存 → _memberKind が 2 に更新

このように、どのラジオボタンが選択されているかをint型の値1つで判定できるようになりました。ラジオボタンをデータバインドするときは、選択肢の数だけbool型フィールドを用意するのではなく、会員区分のような「実際の区分値」そのものをint型（あるいは列挙型など）でバインドするのがポイントです。書き方自体も非常にシンプルなので、ぜひこの方法でラジオボタンのデータバインドを行ってみてください。