檢查 asp-validation-summary 的工作原理

更新頁 : 2021年4月2日星期五

頁面創建日期 : 2020年6月12日星期五

環境

Visual Studio

Visual Studio 2019

ASP.NET 核心

簡介

ASP.NET Core 使用 asp 驗證-摘要作為一種方式,使輸入值驗證錯誤在螢幕上顯示。我檢查了參數之間的差異,因為我們不知道可以指定的參數之間的差異。

有三個值可以指定:

無
模型 Only
全部

我們研究了這些差異的工作原理,下面是結果。

提前準備

現在,讓我們做下面的準備,以驗證操作。大多數是冗餘的,所以如果你想只看到結果,請看文章的後半部分。

此驗證假定在窗體中註冊使用者,因此我們將為用戶創建視圖模型。我放置了各種專案,但內容可以,因為如果至少有一個,可以驗證。由於數據註釋檢查,因此已設置"必需"和"字串長度"屬性。為了看到行為的差異,我們只放置了額外的 IsAccepted。

** 模型/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 是視圖端的故事,因此每個操作的內容都是相同的代碼,但消息除外。

如果 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 添加了指向執行每個測試的頁面的連結。

索引.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 中指定「無」作為在發生錯誤時顯示內容的參數。此外,在 div 標籤中包含「直接錯誤輸入」文本,以查看是否顯示預設錯誤訊息。

其他代碼不會詳細介紹,因為它是基於模型的基架自動生成的代碼。 (有些是手工修復的,但與這次驗證無關。

每個輸入欄位(輸入標記)旁邊都有一個範圍標記,該標記具有 asp-validation-for 屬性。這是一個標記(屬性),用於顯示每個輸入項的錯誤消息。無論為 asp-validation-summary 指定的參數如何,如果出現錯誤,您都會在該位置顯示一條錯誤消息。

此外,由於 asp 驗證生成顯示伺服器驗證結果,因此客戶端驗證過程 (_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 頁面僅是"僅模型"頁。與 ValidateNone.cshtml 相同的顯示文字。

Validate 型號 Only.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 指定了"全部"。

Validate All.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>

@* 省略 *@

檢查動作

無

建立程式後,請嘗試驗證它是否正常工作。是"無"螢幕。

由於初始顯示狀態顯示"直接錯誤輸入",因此似乎無法用作預設錯誤消息。由於存在設置"必需"的參數,因此請嘗試執行更新過程。

顧名思義,"無"不會顯示任何錯誤。預設錯誤消息保持不變,因此您不太可能有機會直接設置"無"。如果有機會,是否動態設置 asp-validation-summary 的值,如果看不到錯誤,則設置為"無"?

模型 Only

指定"模式'的螢幕。我認為有很多使用場景,因為驗證錯誤也出現在示例和基架上。

div 標籤中的"錯誤直接輸入"文本不可見,因此,即使您將其放入,也不太可能出現問題。

這是嘗試執行註冊過程並顯示錯誤的狀態。此處顯示的消息僅是 div 標籤中預先放置的預設消息和伺服器端生成的錯誤訊息。但是,請注意,如果伺服器端沒有空密鑰消息,則 div 標記中的消息也不會顯示。

伺服器端包含兩個錯誤消息,但僅顯示在密鑰中包含空字元的錯誤。如果指定了鍵,則將其視為具有該名稱的模型屬性的錯誤,因此不會出現在 asp-validation-summary 部分。相反,如果具有同名 asp-validation-for 屬性的標記,則消息將顯示在該位置。

全部

指定所有所有的螢幕。

由於某種原因,您將看到嵌入的"直接錯誤輸入"文本。我不知道為什麼只有模型才能看到。現在,似乎不能嵌入在All。

這是執行更新過程後的螢幕。列出所有輸入欄位(屬性)的錯誤訊息。每個輸入欄位也會顯示錯誤訊息,因此,如果指定「全部」以顯示錯誤,則最好刪除為每個輸入欄位設置的 asp-validation-for 屬性。

還顯示在伺服器端添加的錯誤消息。您可以看到,您還看到指定密鑰的錯誤。

總結

asp-validation-summary 有三個參數, 最好使用 ModelOnly 來使錯誤易於理解,並消除重複。請注意,asp-validation-summary 中顯示的消息僅是具有空鍵的消息。

順便說一下,您可以將任意數量的消息添加到空鍵中,因此無需合併字串即可顯示多條消息。

如果要收集所有錯誤訊息,請使用如果出於任何原因不想顯示錯誤消息,則動態設置為"無"。最好用於此目的。

ASP.NET 核心執行跨網站請求準備（XSRF/CSRF）對策

在程式發佈期間刪除不需要的 appsettings.json