BlazorでのWebアプリケーション開発手法１【C#】D02_双方向データバインド

今回は「双方向データバインド」について解説します。これまで扱ってきたデータバインドは、変数名の頭に @ マークを付けることで、プログラム側で変更した値が画面に反映されるというものでした。これは「片側」だけの反映であり、単方向のデータバインドです。

双方向データバインドとは、その名の通り両方向、つまりプログラム側で変更した値が画面に反映されるだけでなく、画面側で入力・変更した値もプログラム側に反映される、という仕組みを指します。

単方向データバインドの限界を確認する

まず、これまでのやり方（@ マークによる単方向バインド）では双方向の反映ができないことを、実際に確認してみます。Home.razor の input タグは、これまで value=”AAA” という固定文字列になっていました。

図1　変更前の Home.razor。input タグの value は “AAA” という固定文字列になっている

まず @code ブロックに private string _areaName フィールドを追加します。

図2　@code ブロックに private string _areaName フィールドを追加したところ

@code {
    private string _areaName = "";
    // ...
}

続いて、input タグの value 属性を、この _areaName を @ マークでバインドする形に書き換えます。あわせて _areaName の初期値として「高松」を設定しておきます。

図3　input タグの value を @_areaName にバインドしたところ

private string _areaName = "高松";
 
<input type="text" value="@_areaName" class="form-control" />

この状態で実行すると、input には初期値の「高松」が表示されます。

図4　実行結果。input に初期値「高松」が表示されている

ここで、画面上の入力欄の値を「姫路」に書き換えてみます。

図5　入力欄の値を「姫路」に書き換えたところ

あらかじめ ShowMeasure() メソッドにブレークポイントを設定しておき、「ボタンで計測画面を開く」ボタンを押してブレークポイントで停止させ、_areaName の値を確認してみます。画面上は「姫路」に書き換えたにもかかわらず、_areaName の値は初期値の「高松」のままになっていることが分かります。

図6　ブレークポイントで停止し _areaName の値を確認すると、画面を「姫路」に書き換えたにもかかわらず初期値の「高松」のままになっている

これが、@ マークによるバインドが単方向（プログラム→画面）にしか効かないということです。画面側で入力した値がプログラム側の変数に反映されていません。

@bind を使った双方向データバインド

双方向にデータバインドしたい場合は、@bind を使用します。先ほどの value=”@_areaName” の部分を、@bind=”_areaName” という形に書き換えます。@bind の右辺側では、_areaName の前に @ マークは付けません。

図7　value=”@_areaName” を @bind=”_areaName” に書き換えたところ

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

この状態で再度実行し、入力欄の値を「高松」から「姫路」に書き換えたうえで「ボタンで計測画面を開く」ボタンを押してブレークポイントで停止させると、今度は _areaName の値がきちんと「姫路」に更新されていることが確認できます。

図8　@bind に書き換え後、入力欄を「姫路」に変更してブレークポイントで確認すると、_areaName の値も「姫路」に更新されている

これで、画面側で入力した値がプログラム側の変数にも反映される、双方向のデータバインドができるようになりました。

バインドした値を計測画面へのパラメータとして渡す

ついでに、この _areaName の値を計測画面への遷移パラメータとして渡すこともできます。ShowMeasure() メソッド内の NavigateTo の遷移先文字列を “measure/” + _areaName という形に書き換えます。

図9　NavigateTo の遷移先を “measure/” + _areaName に書き換えたところ

private void ShowMeasure()
{
    //入力チェック
 
    _navigationManager.NavigateTo("measure/" + _areaName);
}

実行して入力欄を「姫路」にしたうえでボタンを押すと、URL が https://localhost:7246/measure/姫路 のように _areaName の値がそのままパラメータとして渡り、計測画面の「計測場所」にも「姫路」が表示されることが確認できます。

図10　URL に /measure/姫路 とパラメータが渡り、計測画面の「計測場所」にも「姫路」が表示されている

このように、双方向データバインドは画面からの入力値をそのままプログラムで扱いたい場面で活用できます。ぜひ実際に手を動かして試してみてください。