查看具有验证错误的组件

Question

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

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

查看组件

<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; }
}

Answer 1

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

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

客户端不引人注意的验证需要javascript库和正确的HTML标记和属性。当您允许VS创建绑定到模型或viewmodel类的强类型视图时，会在VS中自动添加标记。

JAVASCRIPT库以便进行不引人注目的验证

• jquery.js（或min）
• jquery.validate.js（或min）
• jquery.validate.unobtrusive.js（或min）

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>