查看有验证错误的组件答案

【问题标题】：View Component with validation errors查看有验证错误的组件
【发布时间】：2016-09-26 02:15:40
【问题描述】：

当我在视图组件中提交包含不正确数据的表单时，我的视图组件不会在页面上显示任何错误。

那么视图组件是否有可能返回验证错误？

查看组件

<div class="card-block">
    <form class="form-inline-custom" asp-controller="BragOption" asp-action="Create" method="post" role="form">
        <div class="form-group">
            <label asp-for="CreateBragOptionViewModel.PeriodFrom">From <span asp-validation-for="CreateBragOptionViewModel.PeriodFrom" class="alert-danger"></span></label>
            <input asp-for="CreateBragOptionViewModel.PeriodFrom" class="form-control">
        </div>
        <div class="form-group">
            <label asp-for="CreateBragOptionViewModel.PeriodTo">To <span asp-validation-for="CreateBragOptionViewModel.PeriodTo" class="alert-danger"></span></label>
            <input asp-for="CreateBragOptionViewModel.PeriodTo" class="form-control">
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-block btn-primary">START VOTING PERIOD</button>
        </div>
    </form>
</div>

动作控制器

[HttpPost]
    public IActionResult Create(BragOptionViewModel model)
    {
        if (! ModelState.IsValid)
        {
            return View(nameof(BragManagementController.Index), model);
        }

        if (! _bragOptionService.IsVotingPeriodFromValid(model.CreateBragOptionViewModel))
        {
            ModelState.AddModelError("PeriodFrom", "The date you have entered should not be in the future");
            return View(nameof(BragManagementController.Index), model);
        }

        if (!_bragOptionService.IsVotingPeriodToValid(model.CreateBragOptionViewModel))
        {
            ModelState.AddModelError("PeriodTo", "The date you have entered should not be in the past");
            return View(nameof(BragManagementController.Index), model);
        }

        _bragOptionRepository.CreateVotingPeriod(_bragOptionService.LoadBragOption(model.CreateBragOptionViewModel));

        return RedirectToAction(nameof(BragManagementController.Index), "BragManagement");
    }

查看模型

public class CreateBragOptionViewModel
{
    [DataType(DataType.Date)]
    public DateTime PeriodFrom { get; set; }
    [DataType(DataType.Date)]
    public DateTime PeriodTo { get; set; }
}

 public class BragOptionViewModel
{
    public CreateBragOptionViewModel CreateBragOptionViewModel { get; set; }

    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{MMM 0:d, yyyy}", ApplyFormatInEditMode = true)]
    public DateTime VotingPeriodTo { get; set; }
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{MMM 0:d, yyyy}", ApplyFormatInEditMode = true)]
    public DateTime VotingPeriodFrom { get; set; }
}

【问题讨论】：

为什么要在每个属性前加上 CreateBragOptionViewModel 前缀，我相信你不必加，你应该包括 JQuery Ajax JS 文件来启用客户端验证

标签： asp.net asp.net-core asp.net-core-mvc

【解决方案1】：

Haitham 的评论指出了正确的道路。根据您的代码，我认为您正在寻找不显眼的客户端验证以及在 ModelState.IsValid 属性为 false 或无法检测到程序员定义的逻辑约束的情况下显示验证摘要直到模型数据到达控制器。

在 asp.net 核心文档中，大部分信息似乎都包含在以下链接中： https://docs.asp.net/en/latest/tutorials/first-mvc-app/validation.html?highlight=validation

客户端非侵入式验证需要 javascript 库和正确的 HTML 标记和属性。当您允许 VS 创建绑定到您的模型或视图模型类的强类型视图时，该标记会自动添加到 VS 中。

JAVASCRIPT 库以进行不显眼的验证

jquery.js（或分钟）
jquery.validate.js（或分钟）
jquery.validate.unobtrusive.js（或分钟）

HTML 标记

输入元素之后的跨度可以显示客户端验证错误，在您的代码中，这就像添加跨度

<span asp-validation-for="<your model property>"></span>

例如）。

   <label asp-for="CreateBragOptionViewModel.PeriodFrom">From <span asp-validation-for="CreateBragOptionViewModel.PeriodFrom" class="alert-danger"></span></label>
    <input asp-for="CreateBragOptionViewModel.PeriodFrom" class="form-control">
<span asp-validation-for=""CreateBragOptionViewModel.PeriodFrom"></span>

另外，如果您没有客户端输入错误，但您在数据到达控制器后手动将错误添加到 ModelState，您可以使用 validation-summary 属性在 div 中显示或渲染模型错误数据当模型返回视图时，在表单中。

<form class="form-inline-custom" asp-controller="BragOption" asp-action="Create" method="post" role="form">
    <div asp-validation-summary="ModelOnly"></div>

【讨论】：