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

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

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

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

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

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

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

Imports System.ComponentModel
Imports System.ComponentModel.DataAnnotations

Public Class HomeViewModel
    <DisplayName("氏名")>
    <Required()>
    Public Property Name As String

    <DisplayName("住所")>
    <Required()>
    Public Property Address As String

    <DisplayName("生年月日")>
    <DisplayFormat(DataFormatString:="{0:yyyy年MM月dd日}")>
    <Required()>
    Public Property Birthday As Date
End Class

Imports System.ComponentModel

Imports System.ComponentModel.DataAnnotations

Public Class HomeViewModel

<DisplayName("氏名")>

<Required()>

Public Property Name As String

<DisplayName("住所")>

<Required()>

Public Property Address As String

<DisplayName("生年月日")>

<DisplayFormat(DataFormatString:="{0:yyyy年MM月dd日}")>

<Required()>

Public Property Birthday As Date

End Class

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

必須入力項目が未入力だった場合に、エラーメッセージを表示させるには、HTMLヘルパーのHtml.ValidationMessageFor()を使います。
Formの送信先を、HomeControllerのInput()メソッドにして、入力画面を再度表示させるようにします。

@ModelType HomeViewModel
@Code
    ViewData("Title") = "Input"
End Code

@Using Html.BeginForm("Input", "Home", FormMethod.Post)
    @<div class="container">
        <div class="label">
            <p class="label">@Html.LabelFor(Function(model) model.Name)</p>
            <p class="label">@Html.LabelFor(Function(model) model.Address)</p>
            <p class="label">@Html.LabelFor(Function(model) model.Birthday)</p>
        </div>
        <div class="input">
            <p>
                @Html.TextBoxFor(Function(model) model.Name, New With {.size = 20})
                @Html.ValidationMessageFor(Function(model) model.Name)
            </p>
            <p>
                @Html.TextBoxFor(Function(model) model.Address, New With {.size = 50})
                @Html.ValidationMessageFor(Function(model) model.Address)
            </p>
            <p>
                @Html.TextBoxFor(Function(model) model.Birthday, New With {.type = "date"})
                @Html.ValidationMessageFor(Function(model) model.Birthday)
            </p>
            <input type="submit" value="送信" />
        </div>
    </div>
End Using

@ModelType HomeViewModel

@Code

ViewData("Title") = "Input"

End Code

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

@<div class="container">

<p class="label">@Html.LabelFor(Function(model) model.Name)</p>

<p class="label">@Html.LabelFor(Function(model) model.Address)</p>

<p class="label">@Html.LabelFor(Function(model) model.Birthday)</p>

</div>

<p>

@Html.TextBoxFor(Function(model) model.Name, New With {.size = 20})

@Html.ValidationMessageFor(Function(model) model.Name)

</p>

<p>

@Html.TextBoxFor(Function(model) model.Address, New With {.size = 50})

@Html.ValidationMessageFor(Function(model) model.Address)

</p>

<p>

@Html.TextBoxFor(Function(model) model.Birthday, New With {.type = "date"})

@Html.ValidationMessageFor(Function(model) model.Birthday)

</p>

</div>

End Using

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

HomeControllerに、元々あったInput()メソッドとは別に、Submitボタンを押下した際に呼び出されるInput()メソッドを作成します。
二つ目のInput()メソッドには、入力した値を格納したViewModelが引数として渡されます。
また、同じ名前のメソッドがある場合、システムがどちらのメソッドを使うか判断できず、エラーとなります。
そのため、二つ目のInput()メソッドは、POSTでリクエストされたことを指定するために、メソッドの上に<HttpPost()>を記述します。
これは、分岐処理として使われるもので、同じ名前のメソッドが一つしかなければ、<HttpGet()>や<HttpPost()>を指定しなくても、リクエストがGETでもPOSTでもメソッドは呼び出されます。
13行目のModelState.IsValidは、渡されたViewModelの状態を確認しています。
これは、ViewModelの状態が有効であればTrue、それ以外の場合はFalseを返します。
13行目から16行目は、ViewModelの状態が正しくなければInputビューに戻り、正しければIndexビューを呼び出すという処理になります。

Imports System.Web.Mvc

Namespace Controllers
    Public Class HomeController
        Inherits Controller

        Function Input() As ActionResult
            Return View()
        End Function

        <HttpPost()>
        Function Input(vm As HomeViewModel) As ActionResult
            If Not ModelState.IsValid Then
                Return View(vm)
            End If
            Return View("Index", vm)
        End Function

        Function Index(vm As HomeViewModel) As ActionResult
            Return View(vm)
        End Function
    End Class
End Namespace

Imports System.Web.Mvc

Namespace Controllers

Public Class HomeController

Inherits Controller

Function Input() As ActionResult

Return View()

End Function

<HttpPost()>

Function Input(vm As HomeViewModel) As ActionResult

If Not ModelState.IsValid Then

Return View(vm)

End If

Return View("Index", vm)

End Function

Function Index(vm As HomeViewModel) As ActionResult

Return View(vm)

End Function

End Class

End Namespace

デフォルトの<Required()>のメッセージ

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

エラーメッセージはデフォルトで、「<DisplayName()>で指定した値」＋「フィールドが必要です。」が表示されます。
エラーメッセージを変更するには、Required属性を以下のようにします。

<Required(ErrorMessage:="〇〇")>

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

<Required(ErrorMessage:="{0}が未入力")>

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

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

未入力項目とメッセージを赤色にするには、スタイルシート(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(VB.NET) MVCモデル入門【記事一覧】