检查 asp-validation-summary 的工作原理
环境
- Visual Studio
-
- Visual Studio 2019
- ASP.NET 核心
-
- 3.0
- 3.1
简介
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>
@* 省略 *@
检查操作
无
创建程序后,请尝试验证它是否正常工作。 是"无"屏幕。None
由于初始显示状态显示"直接错误输入",因此似乎无法用作默认错误消息。 由于存在设置"必需"的参数,因此请尝试执行更新过程。
顾名思义,"无"不会显示任何错误。 默认错误消息保持不变,因此您不太可能有机会直接设置"无"。 如果有机会,是否动态设置 asp-validation-summary 的值,如果看不到错误,则设置为"无"?
模型 Only
指定"模式"的屏幕。 我认为有很多使用场景,因为验证错误也出现在示例和基架上。
div 标记中的"错误直接输入"文本不可见,因此,即使您将其放入,也不太可能出现问题。
这是尝试执行注册过程并显示错误的状态。 此处显示的消息仅是 div 标记中预先放置的默认消息和服务器端生成的错误消息。 但是,请注意,如果服务器端没有空密钥消息,则 div 标记中的消息也不会显示。
服务器端包含两个错误消息,但仅显示在密钥中包含空字符的错误。 如果指定了键,则将其视为具有该名称的模型属性的错误,因此不会出现在 asp-validation-summary 部分。 相反,如果具有同名 asp-validation-for 属性的标记,则消息将显示在该位置。
全部
指定"全部"的屏幕。
由于某种原因,您将看到嵌入的"直接错误输入"文本。 我不知道为什么只有模型才能看到。 现在,似乎不能嵌入在All。
这是执行更新过程后的屏幕。 列出所有输入字段(属性)的错误消息。 每个输入字段也会显示一条错误消息,因此,如果指定"全部"以显示错误,则 最好删除为每个输入字段设置的 asp-validation-for 属性。
还显示在服务器端添加的错误消息。 您可以看到,您还看到指定密钥的错误。
总结
asp-validation-summary 有三个参数, 最好使用 ModelOnly 来使错误易于理解,并消除重复。 请注意,asp-validation-summary 中显示的消息仅是具有空键的消息。
顺便说一下,您可以将任意数量的消息添加到空键中,因此无需合并字符串即可显示多条消息。
如果要收集所有错误消息,请使用 如果出于任何原因不想显示错误消息,则动态设置为"无"。 最好用于此目的。