BlazorでのWebアプリケーション開発手法１【C#】D03_入力データをリアルタイムで通知する方法

今回は、入力データをリアルタイムで更新する方法を解説します。

Home.razorの入力欄はすでに@bindによって_areaNameプロパティと双方向データバインドされています。この状態で、入力した値がどのタイミングでプログラム側に反映されるかを確認していきます。

図1　Home.razorの現在のコード（@bind=”_areaName”）

通常、@bindによるデータバインドは、入力欄からフォーカスが外れた（ロストフォーカスした）タイミングで値が更新されます。文字を入力している最中は、まだプログラム側に値は反映されません。

図2　「高松AA」と入力している途中の画面

この更新タイミングを画面上で確認できるようにするため、入力欄の下に現在の_areaNameの値を表示するpタグを追加します。

<input type="text" @bind="_areaName" class="form-control"/>
<p>パラメータを @_areaName で送信します</p>

_areaNameの前後には、表示を見やすくするために半角スペースを入れています。この状態で実行すると、初期値の「高松」がそのままpタグに表示されます。

図3　実行直後の画面。「パラメータを 高松 で送信します」と表示される

ここで入力欄に「A」「AA」と文字を追加していっても、pタグの表示はまだ「高松」のまま変化しません。

図4　「高松AAA」と入力してもpタグの表示は「高松」のまま

この状態で入力欄からフォーカスを外す（ロストフォーカスする）と、pタグの表示が「高松AAA」に更新されます。

図5　ロストフォーカス後、「パラメータを 高松AAA で送信します」に更新された画面

続けて「姫路」と入力し直しても、同様にフォーカスが外れるまでは表示が変わらず、ロストフォーカスして初めて「姫路」に更新されます。

図6　ロストフォーカス後、「パラメータを 姫路 で送信します」に更新された画面

文字を入力した瞬間にリアルタイムで値を反映したい場合は、input要素に@bind:event=”oninput”属性を追加します。

<input type="text"
    @bind="_areaName"
    @bind:event="oninput"
    class="form-control"/>

図7　@bind:event=”oninput”を追加したコード

これを実行し、入力欄に文字を入力すると、フォーカスを外さなくても入力した瞬間にpタグの表示がリアルタイムで更新されるようになります。

図8　「高松AAAA」と入力中でもリアルタイムに反映される画面

図9　「姫路」と入力中でもリアルタイムに反映される画面

この状態で「計測画面を開く」のリンクをクリックすると、リアルタイムで更新された値（姫路）が正しくURLパラメータとして渡されていることが確認できます。

図10　計測画面に遷移し、計測場所に「姫路」が渡されている画面

このように、データバインドの値を入力と同時にリアルタイムで反映させたい場合は、@bind:eventにoninputを指定することで実現できます。