BlazorでのWebアプリケーション開発手法１【C#】D06_テキストチェンジイベントを拾う方法

これまでのレクチャーで、Home画面のエリア入力欄に文字を入力すると、画面下のパラメータ表示にリアルタイムで反映されるようになりました。しかし、その入力タイミングを「プログラム側のイベント」として拾う仕組みはまだ用意していません。今回は、入力されたタイミングをプログラム側でイベントとして検知する方法を解説します。

図1　実行画面。エリア欄に入力するとリアルタイムに下の表示へ反映される

図2　現在のHome.razorのコード。@bindでの双方向データバインドに加え、@bind:event=”oninput”でリアルタイム反映を行っている（D02・D03で作成）

AreaChangedメソッドを追加してブレークポイントを置く

まず、入力があったときに呼び出すためのメソッドとして、@codeブロックに AreaChanged() を追加し、その中にブレークポイントを置いておきます。

図3　@codeブロックにAreaChanged()メソッドを追加し、ブレークポイントを設置

@onchangeを追加するとコンパイルエラーになる

Blazorで一般的な変更通知のイベントは @onchange ですので、input要素に @onchange=”AreaChanged” を追加してみます。

<input type="text"
       @bind="_areaName"
       @bind:event="oninput"
       @onchange="AreaChanged"
       placeholder="エリアを入力してください"
       style="width:300px"
       class="form-control" />

図4　@onchange=”AreaChanged”を追加した状態

この状態では見た目上コンパイルエラーは出ていませんが、実際にビルドしようとすると次のエラーが表示されます。

図5　RZ10008：属性’onchange’がこの要素に対して2回以上使用されている、というエラー

これは、@bind ディレクティブ属性がすでに内部で onchange イベントを使っているためです。@bind にカーソルを合わせると、次のように説明が表示されます。「指定した式をvalue属性にバインドし、変更イベントデリゲートをonchange属性にバインドします」。つまり @bind を使っている時点で onchange はすでに1回使われており、そこへさらに @onchange を書くと、同じ属性を2回定義していることになってしまうのです。

図6　@bindのIntelliSense説明。value属性と、変更イベント（onchange）へのバインドを行うことがわかる

@bind:afterで変更後の処理を拾う

そこで @onchange の代わりに @bind:after を使います。.NET 7より前のバージョンでは、プロパティ経由で値の変更を拾うなど少し面倒な実装が必要でしたが、.NET 7以降はこの @bind:after が使えるようになり、扱いやすくなりました。@onchange を削除し、代わりに @bind:after=”AreaChanged” と書きます。

図7　@bind:after= と入力すると、IntelliSenseの候補にAreaChangedメソッドが表示される

<input type="text"
       @bind="_areaName"
       @bind:after="AreaChanged"
       placeholder="エリアを入力してください"
       style="width:300px"
       class="form-control" />

図8　@bind:after=”AreaChanged”に書き換えた状態。コンパイルエラーは解消される

実行して動作を確認する

この状態で実行してみます。エリア欄に文字を入力しただけでは、まだブレークポイントに止まりません。

図9　”1111111″と入力してもブレークポイントに来ておらず、パラメータもまだ送信されていない

入力欄からフォーカスを外す（ロストフォーカスする）と、そのタイミングでブレークポイントに到達します。これは @bind の既定の変更イベントが onchange（フォーカスが外れたときに発生）であるためです。

図10　ロストフォーカスすると、AreaChanged()内のブレークポイントで停止する

入力のたびにリアルタイムで通知させる

ロストフォーカスを待たずに、1文字入力するたびに通知を受け取りたい場合は、これまでのリアルタイム表示と同じように @bind:event=”oninput” を追加します。これにより、@bind:after で指定したメソッドが oninput のタイミングで呼ばれるようになります。

<input type="text"
       @bind="_areaName"
       @bind:event="oninput"
       @bind:after="AreaChanged"
       placeholder="エリアを入力してください"
       style="width:300px"
       class="form-control" />

図11　@bind:event=”oninput”と@bind:after=”AreaChanged”を組み合わせた最終的なコード

実行して “a”、続けて “b” と入力すると、1文字入力するたびにブレークポイントに到達し、_areaName が “a”→”ab” と更新されていくのが確認できます。画面下のパラメータ表示もリアルタイムに更新されます。

図12　”ab”と入力すると、1文字ごとに通知が発生し、パラメータ表示もリアルタイムに更新される

ロストフォーカスの通知だけでよい場合

リアルタイムな通知が不要で、ロストフォーカス時の通知だけで十分な場合は、追加した @bind:event=”oninput” を削除しておけば、元通りロストフォーカスのタイミングだけで @bind:after のメソッドが呼ばれるようになります。

図13　@bind:event=”oninput”を削除し、@bind:after=”AreaChanged”のみを残した状態

図14　この状態で実行すると、ロストフォーカスのタイミングでのみAreaChanged()のブレークポイントに到達する

まとめ

@bind は既定で onchange イベントにバインドされているため、同じ要素に @onchange を追加すると属性の重複でコンパイルエラーになります。値が変更された後に何らかの処理を実行したい場合は、@onchange の代わりに @bind:after を使います。@bind:event=”oninput” と @bind:after を組み合わせれば、1文字入力するたびにリアルタイムで通知を受け取ることができ、ロストフォーカス時の通知だけで十分な場合は @bind:event=”oninput” を外しておけばよい、という使い分けになります。