Blazor WebAssembly
Blazor WebAssemblyはWebAssemblyによって.NET環境がブラウザに用意されC#で書いたコードがそのまま動いちゃうすごいやつです。そしてきちんとSPAフレームワークになっているのですがDOMとモデルの双方向バインディングで少しハマったので記録として残しておきます。
Blazor WebAssemblyは、.NETとC#などを用いてWebブラウザ上で実行可能なWebアプリケーションを開発できるフレームワークおよび実行系です。
Blazor WebAssembly 3.2.0はBlazor WebAssemblyとしてフル機能が実装され、本番運用に対応したバージョンです。これによりBlazor WebAssemblyは正式版としてリリースされたことになります。
要件
下記のようなinputタグの値を変えたら、リアルタイムでh2タグのインナーテキストも変更させることが要件です。
<h2>@name</h2><inputtype="text"/>NG実装
双方向バンディングの@bindを使ってみます。
<h2>@name</h2><inputtype="text"@bind="name"/>@code{stringname="";}上記では双方向にバインドできていますが、フォーカスが離れたり、エンターを押したりしないと反映されません。
OK実装①
@bind-valueで双方向バインディングしつつ、@bind-value:eventでインプットイベント拾います。
<h2>@name</h2><inputtype="text"@bind-value="name"@bind-value:event="oninput"/>@code{stringname="";}フォーカスアウトやエンター入力で発生する@bind異なり、テキストボックスの値が変更されたときにイベントが発生します。
単純な実装でコード量が少ないです。
OK実装②
@oninputで入力時に実行されるメソッドをバンディングします。
バインドしたメソッド内でnameの値を書き換えて画面に反映します。
値の変更だけでなく、何かしら処理をしたい場合に使います。
<h2>@name</h2><inputtype="text"value="@name"@oninput="HandleInput"/>@code{stringname="";voidHandleInput(ChangeEventArgse){// メソッド内でなにか処理をできるname=e.Value.ToString();}}おまけ
@bindは下記のように@onchangeを使ったコードに内部的に変換されるらしく、
１つの要素に対して@bindと@onchangeを同時に使用することはできないようです。
<input@bind="CurrentValue"/><inputtype="text"value="@CurrentValue"@onchange="@((ChangeEventArgs __e) => CurrentValue = __e.Value.ToString())"/>