ASP.NET(C#) MVCモデル入門～ViewModelのプロパティーにラベルを設定する

2024年8月11日

プロパティーにアノテーションでラベルを設定する

ViewModel で定義したプロパティーに、ラベルを設定することができます。
これは、アノテーション(annotation：注釈)といい、ラベルを設定する以外にもプロパティーに対して属性を設定したり、入力値の検証を行うことができます。
アノテーションを使うには、System.ComponentModel または System.ComponentModel.DataAnnotations をインポートする必要があります
今回は、前回作成したプログラムを元に、プロパティーに対するラベルの設定方法と、ビューでの表示方法を解説します。

ラベルの設定方法

ViewModel で定義したプロパティーにラベルを設定するには、いくつかやり方があります。
アノテーションは、各プロパティーの上に記述します。

[DisplayName("ラベル名")]
または
[Display(Name="ラベル名")]

DisplayName()メソッドを使用する場合は、System.ComponentModel をインポートする必要があります。
Display()メソッドを使用する場合は、System.ComponentModel.DataAnnotations をインポートする必要があります。
必要なライブラリーは、アノテーションにカーソルを合わせて「Ctrl」キー＋「.」を押下し、「using ～」を選択すると、自動的にインポートされます。

以下は、DisplayName()メソッドを使用した例です。

using System.ComponentModel;

namespace MvcApp1.Models.ViewModels
{
    public class HomeViewModel
    {
        [DisplayName("氏名")]
        public string Name { get; set; }

        [DisplayName("住所")]
        public string Address { get; set; }

        [DisplayName("生年月日")]
        public DateOnly Birthday { get; set; }
    }
}

using System.ComponentModel;

namespace MvcApp1.Models.ViewModels

{

public class HomeViewModel

{

[DisplayName("氏名")]

public string Name { get; set; }

[DisplayName("住所")]

public string Address { get; set; }

[DisplayName("生年月日")]

public DateOnly Birthday { get; set; }

}

アノテーションを使ったラベルの詳しい情報は、以下のマイクロソフト公式サイトを参照してください。

DisplayNameAttribute クラス

DisplayAttribute クラス

ラベルの表示方法

ViewModel で設定したラベルをビューで表示するには、以下の HTMLヘルパーを使います。

Html.LabelFor(ラムダ宣言演算子 => ラムダ宣言演算子.プロパティー名)
または
Html.DisplayNameFor(ラムダ宣言演算子 => ラムダ宣言演算子.プロパティー名)

HTMLヘルパー内の記述のやり方が分かりづらいのですが、これはラムダ式といって、名前のない関数です。
ラムダ宣言演算子が渡され、ViewModel の該当のプロパティーを取得して、HTMLヘルパーのメソッドにその値を返すという仕組みになります。
※ラムダ宣言演算子の名称は自由に指定できます。

HTMLヘルパーとは？

HTMLヘルパーとは、ビューにラベル、テキストボックス、リンク、ドロップダウンリストなどの標準的なHTMLの要素を生成するメソッドです。
HTMLヘルパーの詳しい内容は、以下のマイクロソフト公式サイトを参照してください。

System.Web.Mvc.Html 名前空間

@model HomeViewModel
@{
    ViewData["Title"] = "Index";
}

<h2>@Html.LabelFor(model => model.Name)：@Model.Name</h2>
<h2>@Html.LabelFor(model => model.Address)：@Model.Address</h2>
<h2>@Html.LabelFor(model => model.Birthday)：@Model.Birthday</h2>

@model HomeViewModel

ViewData["Title"] = "Index";

}

<h2>@Html.LabelFor(model => model.Name)：@Model.Name</h2>

<h2>@Html.LabelFor(model => model.Address)：@Model.Address</h2>

<h2>@Html.LabelFor(model => model.Birthday)：@Model.Birthday</h2>

1行目の「@model」は決まりですが、6～8行目で使用している「model」の名称は任意です。
「aaa => aaa.Name」と記述しても問題ありませんが、特に理由がなければ「model」を使いましょう。

プログラムの実行

プログラムを実行すると、以下のように ViewModel で設定したラベルが表示されます。

記事一覧

ASP.NET(C#) MVCモデル入門【記事一覧】