如果模型状态无效，则隐藏视图中的元素答案

【问题标题】：Hide elements in the view if the model state is invalid如果模型状态无效，则隐藏视图中的元素
【发布时间】：2018-04-16 11:52:27
【问题描述】：

想象一个接受电子邮件输入的简单表单，如下所示：

@using (Html.BeginForm("save", "email", FormMethod.Post, new {  @id = "my__form" }))
{
    <div class="field">
        @Html.LabelFor(model => model.Email)
        @Html.ValidationMessageFor(model => model.Email)
        @Html.TextBoxFor(model => model.Email, new { @placeholder = "Enter your email", @type = "email" })
    </div>

    <button type="submit" class="btn">Save email</button>
    <div class='spinner'></div>
}

spinner 最初不显示 (CSS)：

   .spinner {
       display: none;
   }

在提交表单时，我会在页面上显示一个微调器：

$('.btn').on("click", function (event) {
   event.preventDefault();
   $('#my__form').submit();
   $('.spinner').show();
});

我的操作如下：

[HttpPost]
[Route("email")]
public ActionResult Save(EmailViewModel model)
{
    if (ModelState.IsValid)
    {
        //Do stuff with email 
        return RedirectToAction("action", "contoller");
    }
    return View(model);
 }

将上述内容视为代表更通用问题的伪代码。

如果模型状态无效并且 UI 以某种方式更新（在本例中显示微调器），那么重置表单的模式或机制是什么？

为了清楚起见，我在这里不是在谈论标准数据验证等。我尝试在表单上设置一个隐藏输入，我可以使用 ModelState.AddModelError("spinner", false) 填充它，然后充当 javascript 可以读取的“开关”，然后隐藏微调器。这感觉就像一个黑客。

感觉这是一个常见的问题，有一个共同的解决方案？

【问题讨论】：

不清楚你在做什么。您取消了脚本中的提交，但无论如何都调用了.submit()，所以您已经离开了页面（您的$('.spinner').show(); 没有意义）。为什么要重置表单？
我的例子有些做作。假设我只能检查输入服务器端的有效性。还假设我想在提交时显示微调器。如果我发现输入无效，如何返回视图以显示验证错误并从显示中移除微调器？
您始终可以进行 ajax 调用来检查您的有效性，或使用 [Remote] 属性（如果有效性取决于模型中的其他属性 - 而不是数据库等外部资源- 您可以编写一个自定义的ValidationAttribute 来实现IClientValidatable，以便获得客户端和服务器端验证）
如果使用 ajax 调用，在开头显示微调器。在方法中，如果无效则返回“错误消息”，并在成功回调中显示（并隐藏微调器）
谢谢斯蒂芬。感谢您的帮助。

标签： c# asp.net-mvc validation design-patterns

【解决方案1】：

您提到的 hack 确实是使用普通 ASP.NET MVC 的方式。

可以有不同的实现，例如将标志存储在ViewBag 中。但想法是一样的。

您最好通过 AJAX 发布表单，其结果可能包括成功标志和/或验证错误列表。然后，您可以根据此结果通过 JavaScript 在提交处理程序中操作 DOM。

【讨论】：