BlazorでのWebアプリケーション開発手法１【C#】D16_複数のチェックボックスを並べる

今回は、複数のチェックボックスを画面に並べる方法を解説します。

現在、計測設定画面（MeasureSettingPage.razor）には、チェックボックスが1個・ラベルが1個の組み合わせが1つだけ用意されています。基本的にこの<div>は「チェックボックス1個＋ラベル1個」で対になっており、これで1つのまとまりです。もう1個チェックボックスを作りたい場合は、同じ書き方でもう1組書けばよいということになります。

図1　既存のチェックボックス（自動更新／_isAuto）のコード

同じ書き方でもう1組コピーする

既存の<div class=”form-check”>〜</div>のブロックをまるごとコピーして、その下に貼り付けます。この時点ではまだ、id・for・データバインド先の変数（_isAuto）・ラベルの文字（自動更新）が1個目と同じままです。データバインドする値は当然変わってくるので、これから書き換えていきます。

図2　<div>ブロックをコピーして2組目を追加した直後（内容はまだ1組目と同じ）

新しいフィールドを追加する

2組目のチェックボックスをデータバインドするための新しいフィールドとして、@codeブロックに private bool _isWarning = false; を追加します。

図3　@codeブロックに新しいフィールド _isWarning を追加

@bindの参照先を変更し、チェンジイベントは付けない

2組目のinput要素の @bind=”_isAuto” を @bind=”_isWarning” に書き換えます。また、1組目には付いていた @bind:after=”AutoChanged” は、今回は不要なので削除しておきます（チェンジイベントは無しにしておきます）。

図4　@bindを_isWarningに変更し、@bind:afterは削除

idを変更する

この id はもちろん変えないといけないので、”warningCheckBox” にしておきます。

図5　idを warningCheckBox に変更

forとラベルの文字を変更する

label要素側の for も、input要素のidと文字列を合わせて warningCheckBox に変更します。ラベルの表示文字も「自動更新」から「異常検知」など、適当な文字に書き換えます。

図6　forをwarningCheckBoxに合わせ、ラベル文字を「異常検知」に変更

ここまでの変更で、2組目のコードは次のようになります。

<div class="form-check">
    <input type="checkbox" class="form-check-input"
           @bind="_isWarning"
           id="warningCheckBox" />
    <label class="form-check-label"
           for="warningCheckBox">異常検知</label>
</div>

実行して確認する

これで実行すると、チェックボックスが2つ表示され、それぞれが独立してデータバインドされている状態になります。

図7　実行結果：チェックボックスが2つ表示される（自動更新はオフ、異常検知はオン）

ブレークポイントで確認すると、_isAuto は false、_isWarning は true というように、それぞれのチェック状態が対応するフィールドに正しく反映されていることが分かります。片方だけチェックを入れ替えれば、対応するフィールドの値だけが変化します。

図8　@codeブロックのフィールド定義（_isAuto／_isWarningともにbool・既定値false）

横に並べる（form-check-inline）

なので、普通に縦に並べたかったらこれでOKですし、横に並べたいという時もあると思うので、それを指定するのが<div>のクラスです。<div class=”form-check”>の後ろに form-check-inline というクラスがあるので、これを2つの<div>両方に付けておきます。

<div class="form-check form-check-inline">
    ...（自動更新のチェックボックス）
</div>

<div class="form-check form-check-inline">
    ...（異常検知のチェックボックス）
</div>

図9　両方の<div>にform-check-inlineクラスを追加

これで見ると、2つのチェックボックスが横並びになっていることが確認できます。

保存ボタンの位置を調整する

ただし、このままだと保存ボタンも同じ行に横並びで表示されてしまいます。これはここに改行（<br/>）を入れてもらってもいいですし、もしくはここでdiv……ボタンはボタンで1つのコンテナに移してあげたら別のグルーピングになるので、それでもこういう感じで見えます。

まずは<br/>を挟む方法です。

</div>

<br/>
<button class="btn btn-primary" @onclick="Save">保存</button>

図10　チェックボックスの後ろに<br/>を追加

実行すると、チェックボックスは横並びのまま、保存ボタンだけ改行されて下に表示されるようになります。

図11　実行結果：<br/>により保存ボタンが次の行に表示される

もう1つの方法として、保存ボタンを専用の<div>で囲んで別グループにするやり方もあります。最終的には、<br/>の代わりにボタンを<div>で囲む形にしています。

<div>
    <button class="btn btn-primary" @onclick="Save">保存</button>
</div>

図12　<br/>の代わりにボタンを<div>で囲んだ最終コード

こんな感じで、チェックボックスを縦に並べたり横に並べたりできますので、いろいろ試してみてください。

図13　最終的な実行結果：チェックボックスは横並び、保存ボタンは独立した行に表示