BlazorでのWebアプリケーション開発手法１【C#】D09_プルダウンの選択している値をデータバインドで操作する

今回は、プルダウン（selectタグ）で現在どの項目が選択されているかを、プログラム側で認識する方法を解説します。使い方はこれまでのinput要素のデータバインドとまったく同じで、@bindを使います。

プルダウンを1つに整理する

サンプル画面には計測周期を選択するselectタグが3つ用意されていますが、今回はデータバインドの説明に使うため、2個目と3個目のselectタグを削除して1個だけ残します。残すselectタグには、value=”0″〜”3″の4つのoptionがあり、それぞれ「計測しない（任意計測）」「毎日」「毎週」「毎月」に対応しています。

図1　整理前：selectタグが3つ並んだ状態

図2　2個目・3個目のselectタグを削除し、1個だけ残した状態

データバインド用の変数を用意する

やり方はinputタグのときと同じです。まず@codeブロックの中に、選択された値を保存しておくための変数を用意します。option要素のvalueは”0″〜”3″という数値なので、変数の型はintにします。ここでは_selectedCycleという名前にします。

図3　@codeブロックにprivate int _selectedCycleを追加しているところ

続いて、この変数をselectタグに@bindで結び付けます。書き方はinputのときと同様に、select要素の属性として@bind=”_selectedCycle”を追加するだけです。これでプルダウンの選択状態が変わるたびに、_selectedCycleの値が自動的に更新されるようになります。

図4　select要素に@bind=”_selectedCycle”を追加し、フィールドの初期値を0にした状態

<select class="form-select"
        @bind="_selectedCycle">
    <option value="0">計測しない（任意計測）</option>
    <option value="1">毎日</option>
    <option value="2">毎週</option>
    <option value="3">毎月</option>
</select>
 
@code {
    private int _selectedCycle = 0;
}

確認用の保存ボタンを用意する

_selectedCycleの値が正しく変わっているかをブレークポイントで確認するため、ボタンを用意します。Counter画面の「Click me」ボタンをコピーしてプルダウンの下に貼り付け、@onclickの呼び出し先をSaveに、ボタンの文字を「保存」に書き換えます。あわせて@codeブロックにprivate void Save()メソッドを作成し、その中にブレークポイントを置いておきます。

図5　Counter.razorの「Click me」ボタンをコピーする

図6　保存ボタンとSave()メソッドを追加し、ブレークポイントを設置した状態

最後に、このページにも@rendermodeの指定が必要なので、Counter.razorの先頭にある@rendermode行をコピーして、MeasureSettingPage.razorの1行目に貼り付けます。

図7　Counter.razorからコピーした@rendermode行を貼り付けた状態

@page "/measuresetting"
@rendermode @(new InteractiveServerRenderMode(prerender:false))
 
<h3>計測設定</h3>

動作確認：選択のたびに値が更新される

実行して計測設定画面を開き、プルダウンで「毎週」を選択してから保存ボタンを押すと、Save()メソッドのブレークポイントで処理が止まります。ここで_selectedCycleにカーソルを合わせると、値が2になっていることが確認できます。

図8　プルダウンで「毎週」を選択し、保存ボタンを押す

図9　Save()メソッドでブレークし、_selectedCycleが2になっていることを確認

同様に「毎月」を選んで保存すると、今度は_selectedCycleが3になります。このように、@bindを使えばプルダウンの選択状態をプログラム側の変数としてそのまま扱うことができます。たとえば保存ボタンが押されたときにこの値をデータベースへ保存する、といった処理にそのまま利用できます。

プログラム側からプルダウンの選択状態を変える

@bindは双方向のデータバインドなので、プログラム側から変数の値を変えれば、プルダウンの表示（選択状態）もそれに合わせて変わります。試しに_selectedCycleの初期値を2に書き換えてから実行してみます。

図10　_selectedCycleの初期値を2に書き換えたところ

図11　実行すると、初期値2に対応する「毎週」が最初から選択されている

次に、保存ボタンを押したタイミングで強制的に値を書き換えたらどうなるかも確認します。Save()メソッドの中で_selectedCycle = 3;という1行を追加してみます。

図12　Save()メソッド内で_selectedCycle = 3;を追加

private int _selectedCycle = 2;
 
private void Save()
{
    _selectedCycle = 3;
}

実行すると、起動直後は初期値2に対応する「毎週」が表示されますが、保存ボタンを押すと_selectedCycleが3に書き換わり、プルダウンの表示も「毎月」に切り替わります。

図13　保存ボタンを押すと、コード側の代入によりプルダウンの表示が「毎月」に変わる

このように、プルダウンの選択状態は@bindでデータバインドしておけば、画面からプログラムへも、プログラムから画面へも、双方向に値をやり取りできます。ぜひ実際に手を動かして試してみてください。