아스프 유효성 검사 요약의 작동 방식 보기

환경

Visual Studio

• Visual Studio 2019

ASP.NET Core

• 3.0
• 3.1

처음에

ASP.NET Core에서 입력 값의 유효성 검사 오류를 표시 하는 방법으로 asp-validation-summary를 사용 하는 방법이 있는데, 지정할 수 있는 매개 변수의 차이를 잘 알지 못했기에 알아 보았습니다.

사용할 수 있는 값에 대해서는 다음 세 가지가 있습니다.

• None
• ModelOnly
• All

이러한 차이점에 대해 어떻게 작동 하는지 확인해 한 결과 다음과 같은 되었습니다.

사전 준비

당분간 동작을 확인 하기 위해 밑 준비를 합니다. 대부분은 중복으로 만들 수 있기 때문에, 결과만 보고 싶으시면 문서의 뒷부분을 참조 하십시오.

이 유효성 검사는 폼에 사용자를 등록 하는 가정 합니다 때문에 사용자의 뷰 모델을 만듭니다. 여러 항목을 넣고 있지만, 적어도 하나의 경우 유효성 검사 가능 내용은 뭐 든 상관 없습니다. DataAnnotation을 통해 검사 하기 때문에 Required 또는 StringLength 특성을 설정 합니다. 동작의 차이를 확인 하기 위해 IsAccepted 정상에 힘쓰고 있습니다.

** Models/UserViewModel **

using System;
using System.ComponentModel.DataAnnotations;

namespace ValidationSummaryTest.Models
{
  public class UserViewModel
  {
    [Required]
    [StringLength(20)]
    public string ID { get; set; }

    [Required]
    [StringLength(50)]
    public string Name { get; set; }

    // 省略

    [Required]
    public bool IsAccepted { get; set; }
  }
}

Asp-validation-summary의 세 가지 값을 확인 하기 위해 각 동작을 만듭니다. 이라고는 해도 asp-validation-summary는 뷰 쪽의 얘기 이므로 각각의 동작에 대 한 내용은 메시지 제외한 모든 동일한 코드입니다.

IsAccepted 체크 되어 있지 않으면 오류를 추가 합니다. 오류는 모델과는 다른 키와 빈 키를 지정 하는 오류를 추가 합니다.

오류 없이 제대로 등록 메시지를 표시 합니다.

HomeController.cs

public IActionResult ValidateNone() => View();

[HttpPost]
public IActionResult ValidateNone(UserViewModel model)
{
  if (model.IsAccepted == false)
  {
    ModelState.AddModelError("PropertyName1", "プロパティに依存するエラー (None)");
    ModelState.AddModelError("", "空のキーエラー (None)");
  }
  if (ModelState.IsValid == false) return View(model);
  ViewData["Message"] = "正常に登録しました。";
  return View(model);
}

public IActionResult ValidateModelOnly() => View();

[HttpPost]
public IActionResult ValidateModelOnly(UserViewModel model)
{
  if (model.IsAccepted == false)
  {
    ModelState.AddModelError("PropertyName1", "プロパティに依存するエラー (ModelOnly)");
    ModelState.AddModelError("", "空のキーエラー (ModelOnly)");
  }
  if (ModelState.IsValid == false) return View(model);
  ViewData["Message"] = "正常に登録しました。";
  return View(model);
}

public IActionResult ValidateAll() => View();

[HttpPost]
public IActionResult ValidateAll(UserViewModel model)
{
  if (model.IsAccepted == false)
  {
    ModelState.AddModelError("PropertyName1", "プロパティに依存するエラー (All)");
    ModelState.AddModelError("", "空のキーエラー (All)");
  }
  if (ModelState.IsValid == false) return View(model);
  ViewData["Message"] = "正常に登録しました。";
  return View(model);
}

Index.cshtml에는 각 테스트를 수행 하는 페이지에 링크를 추가 합니다.

index.cshtml

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
  <h1 class="display-4">Welcome</h1>
  <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<ul>
  <li><a asp-action="ValidateNone">ValidateNone</a></li>
  <li><a asp-action="ValidateModelOnly">ValidateModelOnly</a></li>
  <li><a asp-action="ValidateAll">ValidateAll</a></li>
</ul>

유효성 검사를 위해 사용자 등록 페이지입니다. 오류가 발생 한 경우에 내용을 표시 하는 매개 변수로 asp-validation-summary에 None 을 지정 합니다. 또한, 기본 오류 메시지가 표시 되는지 여부를 확인 하기 위해 div 태그 안에 「 오류 입력 」의 글을 쓰고 있습니다.

다른 코드는 모델을 기반으로 스 캐 폴딩 자동 생성 된 코드에서 자세히 다루지 않습니다. (일부 손으로 수정 하는 곳이 있습니다만, 이번 검사와는 관계가 없습니다)

각 입력 (input) 태그 옆에 asp-validation-for 특성이 설정 되어 있는 span 태그가 있지만 이것은 각 입력 항목에 대 한 오류 메시지를 표시 하기 위한 태그 (특성) Asp-validation-summary에 지정 된 매개 변수와 관계 없이 오류를 항상 저 위치에 오류 메시지가 표시 됩니다.

나중에, asp-validation-summary는 서버에 대 한 유효성 검사 결과가 표시 되기 때문에 클라이언트 확인 프로세스 (_ValidationScriptsPartial)는 주석 처리 하 고 있습니다.

ValidateNone.cshtml

@model ValidationSummaryTest.Models.UserViewModel

@{
  ViewData["Title"] = "ValidateNone";
}

<h1>ValidateNone</h1>

<h4>UserViewModel</h4>
<hr />
<div class="row">
  <div class="col-md-4">
    <form asp-action="ValidateNone">
    
      <div asp-validation-summary="None" class="text-danger">エラー直接入力</div>
      
      <div class="form-group">
        <label asp-for="ID" class="control-label"></label>
        <input asp-for="ID" class="form-control" />
        <span asp-validation-for="ID" class="text-danger"></span>
      </div>
      <div class="form-group">
        <label asp-for="Name" class="control-label"></label>
        <input asp-for="Name" class="form-control" />
        <span asp-validation-for="Name" class="text-danger"></span>
      </div>
      
      @* 省略 *@
      
      <div class="form-group form-check">
        <label class="form-check-label">
          <input class="form-check-input" asp-for="IsAccepted" /> @Html.DisplayNameFor(model => model.IsAccepted)
        </label>
      </div>
      <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
      </div>
    </form>
  </div>
</div>

<div>
  <a asp-action="Index">Back to List</a>
</div>

@* サーバーのエラーを表示したいのでコメントアウト *@
@*@section Scripts {
  @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}*@

ValidateModelOnly.cshtml 페이지는 asp-validation-summary에 ModelOnly 를 지정 하는 곳 이외에는 표시 텍스트를 들여다보고 ValidateNone.cshtml와 동일 합니다.

ValidateModelOnly.cshtml

@model ValidationSummaryTest.Models.UserViewModel

@{
  ViewData["Title"] = "ValidateModelOnly";
}

<h1>ValidateModelOnly</h1>

<h4>UserViewModel</h4>
<hr />
<div class="row">
  <div class="col-md-4">
    <form asp-action="ValidateModelOnly">
      <div asp-validation-summary="ModelOnly" class="text-danger">エラー直接入力</div>
      
      @* 省略 *@

    </form>
  </div>
</div>

@* 省略 *@

ValidateAll.cshtml의 페이지도 asp-validation-summary에 All 을 지정 하는 곳 이외에는 다른 사람과 비슷합니다.

ValidateAll.cshtml

@model ValidationSummaryTest.Models.UserViewModel

@{
  ViewData["Title"] = "ValidateAll";
}

<h1>ValidateAll</h1>

<h4>UserViewModel</h4>
<hr />
<div class="row">
  <div class="col-md-4">
    <form asp-action="ValidateAll">
      <div asp-validation-summary="All" class="text-danger">エラー直接入力</div>
    </form>

    @* 省略 *@
  </div>
</div>

@* 省略 *@

동작 확인

None

프로그램을 만든 후 테스트를 해 봅니다. 는 asp-validation-summary =None 화면입니다.

초기 표시 상태에서 「 오류 입력 」으로 표시 되는 기본 오류 메시지를 사용할 수 없는 것입니다. Required를 설정한 매개 변수가 있기 때문에이 업데이트를 수행 합니다.

None 이름이 오류가 있어도 아무 것도 표시 되지 않습니다. 기본 오류 메시지는 그대로 남아 있기 때문에, 직접적으로 None으로 설정 하 여 사용할 기회가 없을 것입니다. 사용할 기회가 있다면, asp-validation-summary에 설정 된 값을 동적으로 오류를 표시 하지 않는 경우는 None으로 장면 일까요?

ModelOnly

Asp-validation-summary =ModelOnly 를 지정한 화면입니다. 유효성 검사 오류의 예제 및 스 캐 폴딩에도 나와 서 가장 사용 장면이 많다고 생각 합니다.

Div 태그 안에 넣은 「 오류 입력 」 텍스트는 표시 되지 않기 때문에, 넣어 둘 것입니다.

등록 프로세스를 실행 하는 오류를 보고 했습니다 상태입니다. 여기에 표시 되는 메시지는 div 태그 안에 미리 넣은 기본 메시지와 서버 쪽에서 생성 된 오류 메시지입니다. 그러나 서버 쪽에서 빈 키 메시지를 않은 경우에는 div 태그의 메시지도 나오지 않습니다 유의 하십시오.

서버 쪽에서는 두 오류 메시지를 넣고 있지만 표시 되는 키를 빈 문자 오류만 있습니다. 키를 지정한 경우 해당 이름을 가진 모델 속성 오류로 취급 되기 때문에, asp-validation-summary는 나오지 않습니다. 대신 동일한 asp-validation-for 특성을 지정 된 태그가 있는 경우 해당 위치에 메시지가 표시 됩니다.

All

Asp-validation-summary =All 을 지정 하는 화면입니다.

왜 묻 었 다 「 오류 입력 」 텍스트가 표시 되어 있습니다. ModelOnly 표시 되지 않는 이유는 잘 모르겠습니다. 당분간 All 포함 된 사용할 수 없는 것 같습니다.

그대로 업데이트 작업을 수행한 후 화면입니다. 전체 항목 (속성) 오류 메시지가 표시 됩니다. 각 입력 항목에 오류 메시지가 표시 되 면 오류를 정리 하는 데 All을 지정 하는 경우 각 입력 항목에 설정 된 asp-validation-for 특성은 분리 하는 것이 좋습니다.

서버에서 추가 된 오류 메시지도 나타날 수 있습니다. 키를 지정 하는 오류도 표시 된 것을 확인할 수 있습니다.

요약

Asp-validation-summary에는 3 개의 매개 변수가 있었지만, 오류 내용 알기 쉬움, 중복 등을 빼는 의미에서는 ModelOnly를 사용 하는 것이 좋습니다. 주의 점으로는 asp-validation-summary에 표시 되는 메시지는 빈 키를 지정 된 메시지에 대해서만 되는 곳입니다.

덧붙여 빈 키에는 원하는 메시지가 추가 될 수 있으므로, 여러 개의 메시지를 표시 하기 위해 문자열을 연결할 필요가 없습니다.

All에 대 한 자세한 오류 메시지를 한곳에 모으고 싶은 경우에 사용 하는 None에 대 한 몇 가지 이유에 대 한 오류 메시지를 표시 하지 않으려는 타이밍이 있을 때 동적으로 설정 하려면 목적으로 사용 하는 것이 좋습니다.