ASP.NET(C#) MVCモデル入門～未入力項目をチェックする

未入力項目を赤色にしてメッセージを表示する方法

今回は、前回のプログラムに未入力項目チェックを追加します。
最終的には、下図のようなイメージになりますが、設定手順が複雑なので一つずつ、順番にやり方を解説します。

今回使うアノテーションとモデルの検証の詳しい内容は、以下のマイクロソフト公式サイトを参照してください。

ASP.NET Core MVC および Razor Pages でのモデルの検証

ViewModelにアノテーションのRequired属性を設定

まず、ViewModelにアノテーションの Required属性を設定します。
Required属性は、プロパティーを必須入力項目に設定します。
以下のように、アノテーションのRequired属性をプロパティーの上に記述します。

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

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

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

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

using System.ComponentModel;

using System.ComponentModel.DataAnnotations;

namespace MvcApp1.Models.ViewModels

{

public class HomeViewModel

{

[DisplayName("氏名")]

[Required()]

public string Name { get; set; }

[DisplayName("住所")]

[Required()]

public string Address { get; set; }

[DisplayName("生年月日")]

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

[Required()]

public DateOnly Birthday { get; set; }

}

ビューに検証エラーメッセージを表示

必須入力項目が未入力だった場合に、エラーメッセージを表示させるには、HTMLヘルパーの Html.ValidationMessageFor()メソッドを使います。
Form の送信先を HomeController の Input()メソッドにして、入力画面を再度表示させるようにします。
Html.ValidationMessageFor()メソッドの詳しい内容は、以下のマイクロソフト公式サイトを参照してください。

IHtmlHelper<TModel>.ValidationMessageFor<TResult> メソッド

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

@using (Html.BeginForm("Input", "Home", FormMethod.Post))
{
    <p>
        @Html.LabelFor(model => model.Name)：
        @Html.TextBoxFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </p>
    <p>
        @Html.LabelFor(model => model.Address)：
        @Html.TextBoxFor(model => model.Address)
        @Html.ValidationMessageFor(model => model.Address)
    </p>
    <p>
        @Html.LabelFor(model=> model.Birthday)：
        @Html.TextBoxFor(model => model.Birthday, new { type = "date" })
        @Html.ValidationMessageFor(model => model.Birthday)
    </p>
    <p><input type="submit" value="　送　信　" /></p>
}

@model HomeViewModel

ViewData["Title"] = "Input";

}

@using (Html.BeginForm("Input", "Home", FormMethod.Post))

{

@Html.LabelFor(model => model.Name)：

@Html.TextBoxFor(model => model.Name)

@Html.ValidationMessageFor(model => model.Name)

@Html.LabelFor(model => model.Address)：

@Html.TextBoxFor(model => model.Address)

@Html.ValidationMessageFor(model => model.Address)

@Html.LabelFor(model=> model.Birthday)：

@Html.TextBoxFor(model => model.Birthday, new { type = "date" })

@Html.ValidationMessageFor(model => model.Birthday)

}

コントローラーに二つ目のInput()メソッドを追加

HomeController に、元々あった Input()メソッドとは別に、Submitボタンを押下した際に呼び出される Input()メソッドを作成します。
二つ目の Input()メソッドには、入力した値を格納した ViewModel が引数として渡されます。
また、同じ名前のメソッドがある場合、システムがどちらのメソッドを使うか判断できず、エラーとなります。
そのため、二つ目の Input()メソッドは、POST でリクエストされた時に呼び出されるようにするために、メソッドの上に [HttpPost] を記述します。
それに併せて、元々あった Input()メソッドの方を [HttpGet] にしておきます。
17行目の ModelState.IsValid は、渡された ViewModel の状態を確認して、有効であれば True、それ以外の場合は False を返します。
ViewModel の状態が正しくなければ ViewModel を渡して Inputビューに戻ります。
正しければ if文の中は通らず、 Indexビューを呼び出します。
なお、同じ名前のメソッドが一つしかなければ、[HttpGet] や [HttpPost] を指定しなくても、リクエストが GET でも POST でもメソッドは呼び出されます。
ルーティングに関する詳しい内容は、以下のマイクロソフト公式サイトを参照してください。

ASP.NET Core でのコントローラーアクションへのルーティング

using Microsoft.AspNetCore.Mvc;
using MvcApp1.Models.ViewModels;

namespace MvcApp1.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public IActionResult Input()
        {
            return View();
        }

        [HttpPost]
        public IActionResult Input(HomeViewModel vm)
        {
            if (!ModelState.IsValid)
            {
                return View(vm);
            }
            return View("Index", vm);
        }

        public IActionResult Index(HomeViewModel vm)
        {
            return View(vm);
        }
    }
}

using Microsoft.AspNetCore.Mvc;

using MvcApp1.Models.ViewModels;

namespace MvcApp1.Controllers

{

public class HomeController : Controller

{

[HttpGet]

public IActionResult Input()

{

return View();

}

[HttpPost]

public IActionResult Input(HomeViewModel vm)

{

if (!ModelState.IsValid)

{

return View(vm);

}

return View("Index", vm);

}

public IActionResult Index(HomeViewModel vm)

{

return View(vm);

}

デフォルトの[Required()]のメッセージ

上記までの内容で、プログラムを実行させてみましょう。
入力項目に何も設定しない場合は、デフォルトで下図のようなエラーメッセージが表示されます。

エラーメッセージを変更するには、Required属性を以下のようにします。

[Required(ErrorMessage = "〇〇")]

「"〇〇"」の部分にメッセージを記述します。
また、[DisplayName()] で設定した値を表示するには、「{0}」と記述します。
本記事の最初に提示したサンプルのようなメッセージにするには、以下のようになります。

[Required(ErrorMessage = "{0}が未入力")]

生年月日は「The value '' is invalid.」というメッセージが表示されますが、生年月日の Birthdayプロパティーは NULL非許容型なので、氏名や住所と同じメッセージを表示するためには、NULL許容型にする必要があります。
NULL許容型にするには、以下のようにプロパティーの型(ここでは DateOnly)の後ろに「?」を付加します。

public DateOnly? Birthday { get; set; }

プログラムを実行すると、下図のように指定したエラーメッセージになります。

未入力項目とメッセージを赤色にする

未入力項目のテキストボックスとメッセージを赤色にするには、スタイルシート(site.css)に以下のクラスを追加します。
HTMLヘルパーにより、自動的にクラスがタグに設定されます

クラス名	内容
field-validation-error	エラー発生時に、HTMLヘルパーのValidationMessageFor()メソッドが自動的に設定
input-validation-error	エラー発生時に、HTMLヘルパーのTextBoxFor()メソッドなどが自動的に設定

今回は、エラーメッセージを red、未入力項目を lightpink にしています。

.field-validation-error {
    color: red;
}

.input-validation-error {
    background-color: lightpink;
}

.field-validation-error {

color: red;

}

.input-validation-error {

background-color: lightpink;

}

以上で、必須項目が未入力だった場合に、エラーメッセージを表示し、エラーメッセージと入力ボックスを赤色にする手順は終了です。

記事一覧

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