Vea cómo funciona asp-validation-summary

Ambiente

Visual Studio

• Visual Studio 2019

ASP.NET Core

• 3.0
• 3.1

Al principio

ASP.NET Hay una manera de usar asp-validation-summary como una manera de mostrar los errores de validación de entrada en la pantalla en Core. Realmente no entendí la diferencia entre los parámetros que podía especificar, así que lo comprobé.

Hay tres valores posibles:

• Ninguno
• ModelOnly
• todo

Como resultado del examen de cómo funciona cada una de estas diferencias, el resultado es el siguiente:

Pre-preparación

Por el momento, nos prepararemos para la operación. La mayoría de ellos son redundantes, así que si solo desea ver los resultados, consulte la segunda mitad del artículo.

Esta validación supone que desea registrar al usuario en el formulario, por lo que crearemos un modelo de vista para el usuario. Puse varios elementos, pero el contenido no importa nada porque es posible verificar si hay al menos uno. Comprobaremos con DataAnnotation, por lo que estableceremos los atributos Required y StringLength. Para ver la diferencia de comportamiento, acabo de poner un extra IsAccepted.

** Modelos/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; }
  }
}

Para examinar los tres valores de asp-validation-summary, cree cada acción. Sin embargo, dado que asp-validation-summary es una historia de vista secundaria, el contenido de cada acción es el mismo código excepto los mensajes.

Si IsAccepted no está marcado, estamos agregando un error. El error se agrega al error con una clave diferente que el modelo y una clave vacía.

Si no hay errores, muestre un mensaje de registro correcto.

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 agrega un vínculo a la página donde se realiza cada prueba.

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>

Esta es la página de registro de usuario para la verificación. Si hay un error, especifique None para asp-validation-summary como parámetro para mostrar su contenido. También colocamos la frase "Error Direct Entry" en la etiqueta div para ver si se muestra el mensaje de error predeterminado.

Otro código no se describe en detalle porque es el código que se generó automáticamente mediante el scaffolding basado en el modelo. (Algunos de ellos se han arreglado a mano, pero no tiene nada que ver con esta verificación.)

Hay una etiqueta span con el atributo asp-validation-for establecido cerca de cada campo de entrada (etiqueta de entrada). Esta es una etiqueta (atributo) para mostrar mensajes de error para cada campo de entrada. Independientemente del parámetro especificado en asp-validation-summary, siempre se muestra un mensaje de error en esa ubicación si hay un error.

Además, asp-validation-summary muestra los resultados de la verificación del servidor, por lo que el proceso de validación de cliente (_ValidationScriptsPartial) comenta.

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 páginas son sólo a menos que especifique ModelOnly para asp-validation-summary. El texto para mostrar es el mismo que ValidateNone.cshtml mirando.

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 páginas son casi idénticas, excepto para especificar All para asp-validation-summary.

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>

@* 省略 *@

Compruebe la operación

Ninguno

Después de crear el programa, intente comprobar la operación. asp-validation-summary-Ninguna pantalla.

Puesto que "Error de entrada directa" se muestra en el estado de visualización inicial, no parece ser capaz de ser utilizado como un mensaje de error predeterminado. Hay parámetros que se han establecido en Requerido, así que continuemos realizando el proceso de actualización.

Como el nombre de None, no se muestra nada si hay un error. El mensaje de error predeterminado permanece intacto, por lo que es poco probable que haya una posibilidad de establecer Ninguno directamente y usarlo. Si tiene la oportunidad de usarlo, ¿desea establecer dinámicamente el valor en asp-validation-summary y none si no desea ver un error?

ModelOnly

Asp-validation-summary- La pantalla conModelOnly. Creo que hay un montón de escenas de uso más porque sale en la muestra del error de verificación y andamios.

Puesto que el texto de "Error de entrada directa" que se colocó en la etiqueta div no se muestra, parece que no hay ningún problema incluso si lo pone.

Es un estado en el que se realiza el proceso de registro y se muestra el error. Los únicos mensajes que se muestran aquí son los mensajes predeterminados que se colocaron anteriormente en la etiqueta div y los mensajes de error que se produjeron en el lado del servidor. Tenga en cuenta, sin embargo, que si no tiene un mensaje de clave vacío en el lado del servidor, el mensaje en la etiqueta div no aparecerá.

En el lado del servidor, se colocan dos mensajes de error, pero solo se muestra el error con caracteres vacíos en la clave. Si especifica una clave, se tratará como un error en la propiedad del modelo con ese nombre, por lo que no aparece en asp-validation-summary. En su lugar, aparece un mensaje en cualquier etiqueta con el atributo asp-validation-for del mismo nombre.

todo

Asp-validation-summary-Todo se especifica en la pantalla.

Por alguna razón, se muestra el texto de la "entrada directa de error" incrustada. No estoy seguro de por qué no veo a ModelOnly solo. Parece que la incrustación no se puede utilizar en Todo por el momento.

Es una pantalla después de que el proceso de actualización se realiza tal cual. Los mensajes de error para todos los campos de entrada (propiedades) se muestran en una lista. Cada campo de entrada también muestra un mensaje de error, por lo que si desea especificar Todo para resumir el error, Sería mejor quitar el conjunto de atributos asp-validation-for para cada campo de entrada.

También se muestran los mensajes de error agregados en el lado del servidor. También puede ver que también está viendo un error con la clave.

Resumen

Asp-validation-summary tenía tres parámetros. Es posible que desee usar ModelOnly para que sea más fácil comprender dónde está el error o para eliminar la duplicación. Tenga en cuenta que el único mensaje que se muestra en asp-validation-summary es un mensaje con una clave vacía.

Por cierto, puede agregar tantos mensajes como desee a una clave vacía, por lo que no tiene que combinar cadenas para mostrar varios mensajes.

Para todos, si desea recopilar mensajes de error en un solo lugar, En Ninguno, establezca dinámicamente cuando no desee que aparezca un mensaje de error por cualquier motivo. Es bueno usarlo con el propósito de.