C# サンプル集

エラーメッセージを一か所にまとめて表示する

2024/3/29

この記事は ASP.NET Core Razor Pages を対象にしています。

この記事内のサンプルは、プロジェクトテンプレート「ASP.NET Core Web アプリ」を使用して、PagesフォルダーにこのRazorページを追加する前提です。

エラーメッセージをまとめて表示し、エラー項目を赤くする
エラーメッセージをまとめて表示し、エラー項目の見出しに＊を表示する
エラーメッセージをまとめて表示し、エラー項目にも個別にメッセージを表示する

エラーメッセージをまとめて表示し、エラー項目を赤くする

この例では、送信ボタンクリックすると、エラーメッセージを一か所にまとめて表示し、エラーのある項目を赤くします。

ErrorSummary.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel;

namespace WorkStandard.Pages.validationlook
{
    public class ErrorSummaryModel : PageModel
    {
        [BindProperty]
        [DisplayName("お名前")]
        [Required(ErrorMessage = "{0}は省略できません。")]
        public string? UserName { get; set; }

        [BindProperty]
        [DisplayName("住所")]
        [Required(ErrorMessage = "{0}は省略できません。")]
        public string? Address { get; set; }

        [BindProperty]
        [DisplayName("電話番号")]
        [DataType(DataType.PhoneNumber)]
        [Required(ErrorMessage = "{0}は省略できません。")]
        [StringLength(1000, MinimumLength = 3, ErrorMessage = "{0}は{2}文字以上入力してください。")]
        [RegularExpression("[0-9]*",ErrorMessage = "{0}は数字で入力してください。")]
        public string? PhoneNumber { get; set; }

        public void OnPost()
        {
            if (!ModelState.IsValid)
            {
                return;
            }

            System.Diagnostics.Debug.WriteLine("エラーなし");
        }
    }
}

→ Debug.WriteLineが表示される場所

ErrorSummary.cshtml

@page
@model WorkStandard.Pages.validationlook.ErrorSummaryModel

<form method="post">
    <div asp-validation-summary="All" class="text-danger"></div>
    <div class="mb-3">
        <label asp-for="UserName"></label>
        <input asp-for="UserName" class="form-control" />
    </div>
    <div class="mb-3">
        <label asp-for="Address"></label>
        <input asp-for="Address" class="form-control" />
    </div>
    <div class="mb-3">
        <label asp-for="PhoneNumber"></label>
        <input asp-for="PhoneNumber" class="form-control" />
    </div>
    <div>
        <input type="submit" class="btn btn-primary" />
    </div>
</form>

@section Scripts
{
    <script>
        @* エラーがある項目を赤く表示します。 *@
        var umaUtil = umaUtil || {};
        umaUtil.TurnOnBootstrapError = function (doc) {
            const fields = doc.querySelectorAll('.input-validation-error');
            fields.forEach(field => {
                field.classList.add('is-invalid');
            });
        };
        umaUtil.TurnOnBootstrapError(document);
    </script>
}

メモ：クライアントサイドのエラーチェックを行うと想定通り動作しません。

主なCSSクラスの効果

mb-3 下に少し余白(margin)を設けます。→ 余白
form-control inputをBootstrapの外観にします。→ Bootstrapのフォームの概要
text-danger 文字を赤くして、危険であることを示します。→ テーマカラー
btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン

エラーメッセージをまとめて表示し、エラー項目の見出しに＊を表示する

この例では、送信ボタンクリックすると、エラーメッセージを一か所にまとめて表示し、エラーのある項目のラベルの横に赤い＊を表示します。

ErrorSummaryAndIndicator.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel;

namespace WorkStandard.Pages.validationlook
{
    public class ErrorSummaryAndIndicatorModel : PageModel
    {
        [BindProperty]
        [DisplayName("お名前")]
        [Required(ErrorMessage = "{0}は省略できません。")]
        public string? UserName { get; set; }

        [BindProperty]
        [DisplayName("住所")]
        [Required(ErrorMessage = "{0}は省略できません。")]
        public string? Address { get; set; }

        [BindProperty]
        [DisplayName("電話番号")]
        [DataType(DataType.PhoneNumber)]
        [Required(ErrorMessage = "{0}は省略できません。")]
        [StringLength(1000, MinimumLength = 3, ErrorMessage = "{0}は{2}文字以上入力してください。")]
        [RegularExpression("[0-9]*",ErrorMessage = "{0}は数字で入力してください。")]
        public string? PhoneNumber { get; set; }

        public void OnPost()
        {
            if (!ModelState.IsValid)
            {
                return;
            }

            System.Diagnostics.Debug.WriteLine("エラーなし");
        }
    }
}

→ Debug.WriteLineが表示される場所

ErrorSummaryAndIndicator.cshtml

@page
@model WorkStandard.Pages.validationlook.ErrorSummaryAndIndicatorModel

<form method="post">
    <div asp-validation-summary="All" class="text-danger"></div>
    <div class="mb-3">
        <div>
            <label asp-for="UserName"></label>
            <span class="text-danger d-none fw-bold" asp-validation-for="UserName">＊</span>
        </div>
        <input asp-for="UserName" class="form-control" />
    </div>
    <div class="mb-3">
        <div>
            <label asp-for="Address"></label>
            <span class="text-danger d-none fw-bold" asp-validation-for="Address">＊</span>
        </div>
        <input asp-for="Address" class="form-control" />
    </div>
    <div class="mb-3">
        <div>
            <label asp-for="PhoneNumber"></label>
            <span class="text-danger d-none fw-bold" asp-validation-for="PhoneNumber">＊</span>
        </div>
        <input asp-for="PhoneNumber" class="form-control" />
    </div>
    <div>
        <input type="submit" class="btn btn-primary" />
    </div>
</form>

@section Scripts
{
    <script>
        @* エラーがある項目のasp-validation-forが付いたspanを表示します。 *@
        var umaUtil = umaUtil || {};
        umaUtil.TurnOnErrorIndicator = function (doc) {
            const fields = doc.querySelectorAll('.field-validation-error');
            fields.forEach(field => {
                field.classList.remove('d-none');
            });
        };
        umaUtil.TurnOnErrorIndicator(document);
    </script>
}

メモ：クライアントサイドのエラーチェックを行うと想定通り動作しません。

メモ：asp-validation-forがついたspanに文字を設定する場合の挙動について記載されたドキュメントを発見できていませんので、この例を重要な仕組みで採用する場合は、十分にご確認をお願いします。

主なCSSクラスの効果

mb-3 下に少し余白(margin)を設けます。→ 余白
d-none 要素を表示しません。→ 要素の非表示
fw-bold 文字を太字にします。→ 太字と斜体
form-control inputをBootstrapの外観にします。→ Bootstrapのフォームの概要
text-danger 文字を赤くして、危険であることを示します。→ テーマカラー
btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン

エラーメッセージをまとめて表示し、エラー項目にも個別にメッセージを表示する

この例では、クライアント側での検証を使用しているため、すべてのエラーがまとめて表示されるわけではありません。クライアント側での検証を無効にすると、すべてのエラーがまとめて表示されます。クライアント側での検証を無効にするには、サンプルのcshtml内の「クライアント側で検証を有効にします。」と記載した部分のプログラムをコメントにしてください。

ErrorSummaryAndMessage.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel;

namespace WorkStandard.Pages.validationlook
{
    public class ErrorSummaryAndMessageModel : PageModel
    {
        [BindProperty]
        [DisplayName("お名前")]
        [Required(ErrorMessage = "{0}は省略できません。")]
        public string? UserName { get; set; }

        [BindProperty]
        [DisplayName("住所")]
        [Required(ErrorMessage = "{0}は省略できません。")]
        public string? Address { get; set; }

        [BindProperty]
        [DisplayName("電話番号")]
        [DataType(DataType.PhoneNumber)]
        [Required(ErrorMessage = "{0}は省略できません。")]
        [StringLength(1000, MinimumLength = 3, ErrorMessage = "{0}は{2}文字以上入力してください。")]
        [RegularExpression("[0-9]*",ErrorMessage = "{0}は数字で入力してください。")]
        public string? PhoneNumber { get; set; }

        public void OnPost()
        {
            if (!ModelState.IsValid)
            {
                return;
            }

            System.Diagnostics.Debug.WriteLine("エラーなし");
        }
    }
}

→ Debug.WriteLineが表示される場所

ErrorSummaryAndMessage.cshtml

@page
@model WorkStandard.Pages.validationlook.ErrorSummaryAndMessageModel

<form method="post">
    <div asp-validation-summary="All" class="text-danger"></div>
    <div class="mb-3">
        <label asp-for="UserName"></label>
        <input asp-for="UserName" class="form-control" />
        <span class="text-danger" asp-validation-for="UserName"></span>
    </div>
    <div class="mb-3">
        <label asp-for="Address"></label>
        <input asp-for="Address" class="form-control" />
        <span class="text-danger" asp-validation-for="Address"></span>
    </div>
    <div class="mb-3">
        <label asp-for="PhoneNumber"></label>
        <input asp-for="PhoneNumber" class="form-control" />
        <span class="text-danger" asp-validation-for="PhoneNumber"></span>
    </div>
    <div>
        <input type="submit" class="btn btn-primary" />
    </div>
</form>

@section Scripts {
    @{
        //クライアント側での検証を有効にします。
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}

主なCSSクラスの効果

mb-3 下に少し余白(margin)を設けます。→ 余白
form-control inputをBootstrapの外観にします。→ Bootstrapのフォームの概要
text-danger 文字を赤くして、危険であることを示します。→ テーマカラー
btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン

English