想象一个简单的表单,它接受这样的电子邮件输入:
@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可以读取的“开关”然后隐藏微调器。这感觉就像一个黑客。
感觉这是一个常见的问题,有一个共同的解决方案?
答案 0 :(得分:0)
你提到的hack实际上是如何使用普通的ASP.NET MVC完成的。
可以有不同的实现,例如将标志存储在ViewBag
中。但这个想法是一样的。
您可能最好通过AJAX发布表单,其结果可能包括成功标志和/或验证错误列表。然后,您可以根据此结果通过JavaScript操作提交处理程序中的DOM。