これまでの計測画面は、計測値・計測日時・計測場所のいずれも固定値のままHTML側に直接書き込まれていました。通常、こうした値は固定であるはずがなく、実際のデータを表示できるようにする必要があります。今回のレクチャーでは、これらの固定値を@codeブロック内のC#の変数に置き換え、HTML側にデータバインドする方法を解説します。

図1　計測画面の初期表示。計測値・計測日時・計測場所がすべて固定値で表示されている

対象となるMeasurePage.razorの初期コードは以下の通りです。計測値・計測日時・計測場所の3つの行が、いずれも文字列としてそのままHTMLに埋め込まれています。

@page "/measure"
 
<PageTitle>計測</PageTitle>
<h3>計測画面</h3>
 
<p>計測値を表示します</p>
<p>計測値：12.34 m/s</p>
<p>計測日時：2024/12/12 12:34:56</p>
<p>計測場所：神戸</p>
 
@code {
 
}

図2　MeasurePage.razorの初期コード。@codeブロックはまだ空の状態

計測値を変数に置き換える

まず@codeブロックの中に、private string _measureValue というフィールドを追加します。続けてHTML側に書かれている”12.34 m/s”という固定値を切り取り、_measureValueの初期値としてダブルクォーテーションの中に貼り付けます。

図3　@codeブロックにprivate string _measureValueフィールドを追加し、HTML側の固定値を選択したところ

図4　切り取った”12.34 m/s”を_measureValueの初期値として貼り付けたところ

次に、HTML側の元の位置には、C#のコードであることを示す@マークを付けて_measureValueと記述します。これにより、HTML側の表示内容とC#側の変数が結び付きます。

<p>計測値：@_measureValue</p>

図5　HTML側を@_measureValueに書き換えたところ

この状態で実行すると、置き換え前と同じ「計測値：12.34 m/s」という表示になることが確認できます。値そのものはC#側の変数に移っただけで、見た目は変わりません。

図6　実行結果。計測値の表示は変更前と変わらず「12.34 m/s」のまま

計測日時・計測場所も同様に変数化する

同じ要領で、計測日時と計測場所も変数に置き換えていきます。@codeブロックに private string _measureDate フィールドを追加し、HTML側の”2024/12/12 12:34:56″を切り取って初期値に設定します。

図7　private string _measureDateフィールドを追加したところ

図8　切り取った日時の文字列を_measureDateの初期値として設定したところ

HTML側も同様に@_measureDateと書き換えます。

<p>計測日時：@_measureDate</p>

図9　HTML側を@_measureDateに書き換えたところ

続けて計測場所も同じ手順で置き換えます。private string _measureArea フィールドを追加し、”神戸”を初期値として設定、HTML側は@_measureAreaと記述します。

図10　private string _measureAreaフィールドを追加し、”神戸”を初期値として設定したところ。HTML側もすべて@マーク付きの変数参照に置き換わっている

以上で、3つの値すべてが変数に置き換わりました。最終的なMeasurePage.razorの全体コードは以下の通りです。

@page "/measure"
 
<PageTitle>計測</PageTitle>
<h3>計測画面</h3>
 
<p>計測値を表示します</p>
<p>計測値：@_measureValue</p>
<p>計測日時：@_measureDate</p>
<p>計測場所：@_measureArea</p>
 
@code {
    private string _measureValue = "12.34 m/s";
    private string _measureDate = "2024/12/12 12:34:56";
    private string _measureArea = "神戸";
}

図11　変数化が完了したMeasurePage.razorの全体コード

この状態で実行すると、置き換え前とまったく同じ「計測値：12.34 m/s」「計測日時：2024/12/12 12:34:56」「計測場所：神戸」という表示が得られます。これで、C#側で定義した変数の値をHTML側にデータバインドすることができました。

図12　最終的な実行結果。固定値だった頃とまったく同じ表示が、変数を通じて再現されている