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

前回に続き、単方向データバインドについてもう少し詳しく見ていきます。今回はCounter.razorに変数を自分で追加しながら、@の役割や、テキストと式を組み合わせるときの注意点を実際に手を動かして確認していきます。

変数を使ったデータバインド

まずは@codeブロックに文字列型のフィールドを追加します。

private string _value = "AAABBB";

これをHTML側でそのまま _value と書くと、Razorはこれをただの文字として扱うため、画面には「_value」という文字列がそのまま表示されてしまいます。

図1　@を付けずに_valueと書いた場合のコード

図2　文字列「_value」がそのまま表示される

先頭に @ を付けることで、続く部分がC#のコードであると認識されるようになります。@_value と書き直すと、変数の値であるAAABBBが表示されます。

図3　@_value と記述したコード

図4　変数の値AAABBBが表示される

改行と段落

@_value をそのまま直書きすると改行されずボタンと横並びになってしまいます。HTMLで改行したい場合は <br /> を使います。

<br />

図5　<br /> を追加したコード

図6　<br /> により改行される

また、以前解説した通り、pタグで囲むとひとつの段落として改行してくれます。

<p>@_value</p>

図7　pタグで囲んだコード

図8　pタグにより段落として改行される

C#コードを直接埋め込む

変数だけでなく、@ の後ろに DateTime.Now のようなC#のコードを直接書くこともできます。

<p>@DateTime.Now</p>

図9　@DateTime.Now と記述したコード

図10　現在の日時が表示される

@ の後ろはC#コードとして認識されるので、ToStringによる書式指定も普通に行えます。

<p>@DateTime.Now.ToString("yyyy/MM/dd")</p>

ただし、いつもの癖でここにセミコロンを付けてしまうと、それも文字列の一部とみなされ、画面にそのままセミコロンが表示されてしまうので注意が必要です。

図11　誤ってセミコロンを付けたコード

図12　「2024/11/23;」のようにセミコロンがそのまま表示される

式を続けて書く

@_value と @DateTime.Now のように、式を続けて書くこともできます。

<p>@_value@DateTime.Now</p>

図13　2つの式を続けて記述したコード

図14　AAABBBと日時が続けて表示される

文字列の直後に@を書くときの注意点

「今の時間は」という文字列の直後にスペースを空けずに @DateTime.Now を書くと、Razorはこれを文字列の続きと判断してしまい、@DateTime.Now の部分がC#コードとして評価されず、そのままの文字列として表示されてしまいます。

<p>今の時間は@DateTime.Now</p>

図15　文字列に直接@DateTime.Nowを続けたコード

図16　「今の時間は@DateTime.Now」がそのまま文字列として表示される

これを解決するには2つの方法があります。ひとつ目は、半角スペースを空けて @ + 値であることを認識させる方法です。

<p>今の時間は @DateTime.Now</p>

図17　半角スペースを空けたコード

図18　正しく日時が評価されて表示される

半角スペースを空けたくない場合は、@ の後ろの値の部分を丸カッコで囲むことでも、データバインドされた値であると正しく認識させることができます。

<p>今の時間は@(DateTime.Now)</p>

図19　丸カッコで囲んだコード

図20　スペースなしでも正しく日時が評価されて表示される

プロパティ・メソッドを使ったデータバインド

@ の後ろに書けるのは変数やC#コードの直書きだけでなく、プロパティやメソッドも使用できます。まずプロパティの例です。

public string Value => "XXX";

これを @Value のようにHTML側で参照すると、変数のときと同様にプロパティの値（XXX）が表示されます。

図21　読み取り専用プロパティValueの定義

図22　@Value と記述して参照するコード

メソッドの場合も同様にデータバインドできます。メソッドなので、呼び出す際は引数を表すカッコが必要です。半角スペースを空けたくない場合は、これまでと同様に値の部分を丸カッコで囲みます。

public string GetString()
{
    return "YYYYYY";
}

図23　文字列を返すGetStringメソッドの定義

図24　@(GetString()) と丸カッコで囲んで記述したコード

図25　これまでのすべての結果がブラウザに表示された状態

このように、単方向データバインドのポイントは「@ を付けるとその後ろがC#コードとして認識される」という点です。直接C#コードを書いてもよいですし、変数を使ってもよい、プロパティを使ってももちろんOKで、メソッドも同様に使うことができます。