ASP.NET(C#) MVCモデル入門～表示形式を設定する

2024年8月13日

アノテーションで表示形式を設定する

前回の記事では、アノテーションを使ってラベルを設定しました。
今回は、前回作成したプログラムを元に、アノテーションを使って表示形式を設定します。
アノテーションを使った表示形式の設定方法に関する詳しい内容は、以下のマイクロソフト公式サイトを参照してください。

DisplayFormatAttribute クラス

表示形式の設定方法

ViewModel で定義したプロパティーの表示形式を設定するには、DisplayFormat()メソッドの DataFormatStringプロパティーを使用します。

[DisplayFormat(DataFormatString="表示形式")]

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

前回までは、生年月日が「2000/08/31」のように表示されていましたが、表示形式を「{0:yyyy年M月d日}」にすると、「2000年8月31日」と表示されます。
以下は、DisplayFormat()メソッドを使用した例です。

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

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

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

        [DisplayName("生年月日")]
        [DisplayFormat(DataFormatString = "{0:yyyy年M月d日}")]
        public DateOnly Birthday { get; set; }
    }
}

using System.ComponentModel;

using System.ComponentModel.DataAnnotations;

namespace MvcApp1.Models.ViewModels

{

public class HomeViewModel

{

[DisplayName("氏名")]

public string Name { get; set; }

[DisplayName("住所")]

public string Address { get; set; }

[DisplayName("生年月日")]

[DisplayFormat(DataFormatString = "{0:yyyy年M月d日}")]

public DateOnly Birthday { get; set; }

}

DisplayFormat()メソッドを使用するために、System.ComponentModel.DataAnnotations をインポートする必要があります。
DisplayFormat()メソッドの DataFormatStringプロパティーに、ビューに表示するデータ形式を設定します。

表示形式を設定した値の表示方法

ViewModel 側で表示形式を設定しても、ビュー側で @Model.Birthday とすると、設定通りの形式で表示されません。
設定した形式通りに表示するには、HTMLヘルパーの DisplayFor()メソッドを使用します。
DisplayFor()メソッドの引数の指定方法は、前回の LabelFor()メソッドと同様です。

Html.DisplayFor(ラムダ宣言演算子 => ラムダ宣言演算子.プロパティー名)

DisplayFormat()メソッドを使っているのは、Birthday(生年月日)だけですが、ビューでモデルの値を表示する際は、DisplayFor()メソッドを使うのが一般的なので、他の項目もDisplayFor()メソッドを使って表示させるようにします。

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

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

@model HomeViewModel

ViewData["Title"] = "Index";

}

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

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

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

プログラムの実行

プログラムを実行すると、以下のように生年月日が「yyyy年M月d日」の形式で表示されます。

記事一覧

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