BlazorでのWebアプリケーション開発手法１【C#】D14_チェックボックス

今回はチェックボックスの使い方を解説します。引き続き MeasureSettingPage.razor を使い、商品名のプルダウンの下にチェックボックスを追加していきます。

チェックボックスを追加する

チェックボックスも通常の input タグで作成できます。type=”checkbox” と指定するだけで、チェックボックスとして表示されるようになります。

<input type="checkbox" />

図1

このように記述するだけで input タグがチェックボックスに変わります。

図2

実際にブラウザーで確認すると、小さな素のチェックボックスが表示されます。見た目としては少し寂しい印象です。

図3

Bootstrap でスタイルを整える

Bootstrap には class=”form-check-input” というチェックボックス用のクラスが用意されているので、これを指定します。

<input type="checkbox" class="form-check-input" />

図4

class 属性の候補一覧から form-check-input を選択し、追加します。

図5

ブラウザーで確認すると、先ほどより一回り大きく、見た目の整ったチェックボックスに変わっていることが分かります。

図6

Bootstrap 公式サイトで確認する

これもいつも通り、Bootstrap の公式サイトで「bootstrap checkbox」と検索して詳細を確認していきます。

図7

検索結果から Bootstrap 公式サイトの「チェックボックスとラジオ」のページを開きます。

図8

ページには Default checkbox と Checked checkbox の2つのチェックボックスのサンプルが掲載されています。1つ目のサンプルの HTML を見ると、input タグに class=”form-check-input” と type=”checkbox”、そして value 属性が指定されていることが分かります。

図9

value で値を指定することもできますが、基本的にはこれまでの入力エリアやプルダウンと同じように、@bind でチェック状態をプログラム側にバインドする方針で進めます。

チェック状態をデータバインドする

チェックの状態を保持するための bool 型フィールドを用意します。

private bool _isAuto = false;

図10

双方向データバインドなので、これまでと同じように @bind=”_isAuto” と指定するだけで、チェックの状態をプログラム側で管理できるようになります。

<input type="checkbox" class="form-check-input"

@bind="_isAuto" />

図11

実行してチェックを入れてから保存すると、ブレークポイントで _isAuto が true になっていることが確認できます。チェックを外して保存すると false になり、正しくデータバインドできていることが分かります。

図12

チェンジイベントを取得する

チェンジイベントの取得方法も、これまでのプルダウンや入力エリアと同様です。@bind:after にメソッド名を指定します。

なお、このとき “AutoChenged” のように綴りを誤ると、IDE が「スペルミス　すぐに直してます」とサジェストしつつ、CS0103（’AutoChenged’ という名前は現在のコンテキストに存在しません）のエラーが表示されます。メソッド名の綴りには注意が必要です。

図13

正しく AutoChanged と綴りを修正し、対応するメソッドを作成してブレークポイントを設置します。

<input type="checkbox" class="form-check-input"
       @bind="_isAuto"
       @bind:after="AutoChanged" />
 
private void AutoChanged()
{
}

図14

実行してチェックボックスにチェックを入れると AutoChanged が呼ばれ、ブレークポイントで _isAuto が true になっていることが確認できます。チェックを外すと同様に false で通知が来ることも確認でき、チェンジイベントが正しく取得できています。

図15

まとめ

チェックボックスは input タグに type=”checkbox” を指定するだけで作成でき、Bootstrap の class=”form-check-input” を付けることで見た目を整えられます。チェック状態の管理は @bind、変更の検知は @bind:after と、これまでのプルダウンや入力エリアと同じパターンで扱えることが分かりました。