プロパティにアノテーションでラベルを設定する
ViewModelで定義したプロパティに、ラベルを設定することができます。
これは、アノテーション(annotation:注釈)といい、主に入力値の検証などに使います。
今回は、前回のプログラムを元に、プロパティに対するラベルの設定方法と、ビューでの表示方法を解説します。
アノテーションを使ったラベルの詳しい情報は、以下のマイクロソフトのサイトを参照してください。
ラベルの設定方法
ViewModelで定義したプロパティにラベルを設定するには、DisplayNameを使います。
プロパティの上に、<DisplayName("ラベル名")>と記述します。
この時、赤波線が表示されるので、そこにカーソルを合わせると、System.ComponentModelのインポートが促されるので、画面に従ってインポートします。
それぞれのプロパティの上に、ラベルを設定します。
1 2 3 4 5 6 7 8 9 10 11 12 |
Imports System.ComponentModel Public Class HomeViewModel <DisplayName("氏名")> Public Property Name As String <DisplayName("住所")> Public Property Address As String <DisplayName("生年月日")> Public Property Birthday As Date End Class |
ラベルの表示方法
ViewModelで設定したラベルをビューで表示するには、HTMLヘルパーのLabelFor()を使用します。
Html.LabelFor(Function(モデル) モデル.プロパティ名)
Html.LabelFor()の中の記述が分かりづらいのですが、これはラムダ式といって、名前のない関数です。
関数に引数として渡されたモデルから該当のプロパティを取得して、Html.LabelFor()メソッドにその値を返すという内容になります。
※モデルの名称は任意です。
HTMLヘルパーとは?
HTMLヘルパーとは、ビューにテキスト ボックス、リンク、ドロップダウンリストなどの標準的なHTMLの要素を生成するメソッドです。
下記の例では、Function(model)としていますが、これはFunction(model As HomeViewModel)の省略形です。
一般的に「model」という名称を使用しますが、特に決まりはありません。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@ModelType HomeViewModel @Code ViewData("Title") = "Index" End Code <h2> @Html.LabelFor(Function(model) model.Name) @Model.Name </h2> <h2> @Html.LabelFor(Function(model) model.Address) @Model.Address </h2> <h2> @Html.LabelFor(Function(model) model.Birthday) @Model.Birthday </h2> |
プログラムの実行
プログラムを実行すると、以下のようにViewModelで設定したラベルが表示されます。