BlazorでのWebアプリケーション開発手法１【C#】D13_プルダウンのチェンジイベントを取得する

今回は、プルダウン（select要素）のチェンジイベントを取得する方法を解説します。やり方は、以前の入力欄（input要素）のイベント取得のときと同じで、@bind:after を使って値が変わった後に呼ばれるメソッドを紐付けます。

イベントハンドラーメソッドを作成する

まず、商品のプルダウンが変わったときに呼ばれるメソッドを用意しておきます。private void で ProductChanged という名前のメソッドを新規作成します。

図1　MeasureSettingPage.razor の @code ブロック。プライベートフィールドと OnInitialized の内容を確認しているところ

図2　Save() メソッドの下に、新しいメソッドを追加するための空行を用意する

図3　「private void Produ」まで入力し、IntelliSense の候補からメソッド名を補完しているところ

図4　ProductChanged() メソッドが作成された状態。中身はまだ空のまま

この時点でのコードは次のとおりです。

private void ProductChanged()
{
}

select要素に @bind:after を追加する

続いて、商品名のプルダウンに使われている select 要素を確認します。この select には既に @bind=”_selectedProductId” が設定されています。

図5　@code ブロック全体を表示し、商品プルダウン（select要素）を含む画面全体の構成を確認しているところ

図6　select 要素に既に設定されている @bind=”_selectedProductId” を確認しているところ

この @bind の次の行に、@bind:after= で先ほど作成した ProductChanged を指定します。行を追加する場所はどこでも構いませんが、わかりやすいように @bind の直後の行に追記します。

図7　@bind=”_selectedProductId” の次の行にカーソルを置き、新しい行を追加したところ

図8　@bind: と入力すると、IntelliSense に @bind や @bind-、tabindex などの候補が表示される

図9　@bind:after=”product まで入力すると、IntelliSense に ProductChanged メソッドの候補が表示される

候補から ProductChanged を選択すると、次のように入力が完了します。

図10　@bind:after=”ProductChanged” の入力が完了した状態

動作確認

ProductChanged メソッドにブレークポイントを設置し、実行して動作を確認します。

図11　ProductChanged() メソッドの中身にブレークポイントを設置したところ

実行して計測設定画面を開き、商品名のプルダウンを開くと、選択肢として p100・p200・p300 が表示されます。

図12　計測設定画面でプルダウンを開いた状態。商品名を入力してください、p100、p200、p300 の選択肢が表示されている

2番目の p200 を選択すると、設置したブレークポイントで処理が停止します。このとき _selectedProductId を確認すると、選択した値である 200 になっており、正しくイベントが発生していることがわかります。

図13　ブレークポイントで停止し、_selectedProductId が 200 になっていることをマウスオーバーで確認しているところ

続けて実行を再開し、3番目の p300 を選択すると、同様にブレークポイントで停止し、今度は _selectedProductId が 300 になっていることが確認できます。

図14　3番目の商品を選択したときに、_selectedProductId が 300 になっていることを確認しているところ

プルダウンのチェンジイベントは、このような要領で取得してください。

inputのoninputとの違い

以前、input要素でイベントを取得したときには、@bind:event=”oninput” という記述を使いました。これは、既定ではロストフォーカス時にしか値が反映されないところを、リアルタイムで通知させるための指定です。

図15　Home.razor の input 要素。@bind:event=”oninput” と @bind:after=”AreaChanged” が設定されている

一方、プルダウン（select要素）の場合は、選択した時点で oninput と同じ動きで通知が来る仕様になっているため、@bind:event=”oninput” の記述は特に必要ありません。@bind:after だけを入れておけば十分です。

まとめ

最終的な select 要素のコードは次のとおりです。@bind:after=”ProductChanged” を追加するだけで、プルダウンの選択が変わったタイミングで任意の処理を実行できるようになります。

<select class="form-select"
        @bind="_selectedProductId"
        @bind:after="ProductChanged"
        disabled="@_productDisabled">
    <option value="-1" selected>商品名を入力してください</option>
    @foreach (var val in _products)
    {
        <option value="@val.ProductId">@val.ProductName</option>
    }
</select>

図16　完成した select 要素のコード。@bind=”_selectedProductId” の下に @bind:after=”ProductChanged” が追加されている