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

时间:2018-04-16 11:52:28

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

想象一个简单的表单,它接受这样的电子邮件输入:

@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可以读取的“开关”然后隐藏微调器。这感觉就像一个黑客。

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

1 个答案:

答案 0 :(得分:0)

你提到的hack实际上是如何使用普通的ASP.NET MVC完成的。

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

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