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

本レクチャーでは、Counter.razor画面を題材に、Razorコンポーネントにおける「単方向データバインド」の書き方を解説します。

@codeブロックとC#コード

Counter.razorの下部にある@codeで囲まれた部分には、通常のC#コードを記述できます。ここには、currentCountというint型のフィールドと、そのフィールドをインクリメントするIncrementCountメソッドが定義されています。

図1　Counter.razorのコード全体（@currentCountの記述箇所）

HTML側で@を使ってC#の変数を参照する

@codeブロック内で宣言した変数は、先頭に@を付けることでHTML側から参照できます。例えばpタグの中に@currentCountと書くと、そのcurrentCountフィールドの値がそのままHTMLに埋め込まれて表示されます。

図2　@currentCountにカーソルを合わせると、Counter.currentCountフィールド（int型）であることが確認できる

このように変数の頭に@を付けてデータバインドしておくと、その変数の値が変わったときに、画面に表示されている値も自動的に追従して変わります。

これが「単方向データバインド」

この書き方は「単方向データバインド」と呼ばれます。ユーザーからの入力を受け付けるものではなく、あくまでプログラム側が持っている値を画面に表示するだけ、という一方向の連携になっている点がポイントです。値をただ表示したいだけの場合は、このように@をつけて変数名を書くだけで実現できます。

図3　@currentCountの記述箇所に「単方向データバインド」の吹き出し

動作確認：初期値を変更してみる

実際の挙動を確認するため、currentCountの初期値を0から999に書き換えます。

@code {
    private int currentCount = 999;
 
    private void IncrementCount()
    {
        currentCount++;
    }
}

図4　currentCountの初期値を999に変更

この状態でアプリを実行すると、画面上のCurrent countBBBの表示も初期値の999になっていることが確認できます。

図5　実行結果。Current countBBB: 999 と表示される

さらに「Click me」ボタンを押すと、IncrementCountメソッドが呼ばれてcurrentCountがインクリメントされ、その都度、画面の表示もリアルタイムに更新されていきます。

図6　ボタンを複数回クリックし、Current countBBB: 1007 のように値が増えていく様子

まとめ

C#コードの変数の頭に@を付けてHTML側に埋め込むことで、プログラムの値をそのまま画面に表示する「単方向データバインド」ができます。値が変わればHTML側の表示も連動して変わるため、値を表示するだけでよい場面ではこのシンプルな書き方が有効です。