如何使用带有validation的jQuery在Modal中创建.NET MVC表单
我真的很想知道怎么把这些放在一起。 我已经在.net MVC页面中构建了很多次表单，无论有没有validation。 我使用jQuery构建了表单，有和没有validation。 我已经在模态中构建了表单，但从未使用过MVC。
我从原来的问题中理解，因为这个表单在一个模态中，我需要使用jQuery来处理提交。 我正好想弄清楚如何把所有这些活动的部分组合在一起。 到目前为止，我还没有找到将这些全部放在一起的教程（或教程组合）。
这就是我需要的：
- 在我的MVC视图中，有一个按钮可以打开一个模态。 （这很好。）
- 模态打开后，它包含一个包含多个文本字段和下拉列表的表单。 每个都是必需的。 （为了使字段成为必需字段，我是否会在视图的模型中定义它们，就像我通常使用MVC表单一样？或者我是否在jQuery中创建需求？）
- 如果用户尝试提交表单并且它们为空或无效，则模式保持打开状态并显示validation消息。 （我理解，从我最初的问题来看，由于模态，使用直接MVC是不可能的，并且需要一些jQuery。我在这里迷失了。）
- 如果用户尝试提交表单并且所有字段都有效，则模态关闭，我们点击控制器并将字段保存到数据库。 （不知道如何逃离jQuery，只需点击普通控制器来处理最终的逻辑。）
编辑：
谢谢杰森，谢谢你的帮助！ 根据您的建议，这就是我的工作方式。
父视图：
模式：
接下来是脚本：
@section Scripts { $(document).ready(function () { $('#AccountEditModal').on('shown.bs.modal', function () { $('#myInput').focus() }) $("#AccountEditModal").on("submit", "#form-accountprofileedit", function (e) { e.preventDefault(); // prevent standard form submission var form = $(this); $.ajax({ url: form.attr("action"), method: form.attr("method"), // post data: form.serialize(), success: function (partialResult) { $("#formContent").html(partialResult); } }); }); }); }
局部视图（瘦身）：
@using (Html.BeginForm("AccountProfileEdit", "Account", FormMethod.Post, new { id = "form-accountprofileedit", @class = "full-form" })) { @Html.CustomTextboxFor(model => model.Address) }
控制者：
[HttpPost] public ActionResult AccountProfileEdit(AccountProfileEditViewModel model) { if (ModelState.IsValid) { // logic to store form data in DB } return PartialView("_AccountProfileEdit", model); }
您可以使用内置的MVCvalidation脚本以及模型上的数据注释
public class AccountProfileEditViewModel { [Display(Name = "Address")] [Required()] [StringLength(200)] public string Address { get; set; } }
制作部分视图以保存您的模态表单。
_AccountProfileEdit.cshtml
@model AccountProfileEditViewModel @using(Html.BeginForm("AccountProfileEdit", "Account", FormMethod.Post, new { id = "form-accountedit-appt" }) { @Html.ValidationSummary(true) @Html.LabelFor(m => m.Address) @Html.TextBoxFor(m => m.Address) @Html.ValidationMessageFor(m => m.Address) }
然后在你的模态框中引用它。 如果您想要预先填充的模型，则需要渲染一个动作：
@Html.Action("AccountProfileEdit", "Account", new { id=account.Id })
如果您只想要一张空白表格，那么您可以使用：
@Html.Partial("_AccountProfileEdit")
该操作使用id参数来获取和填充模型
[HttpGet] public ActionResult AccountProfileEdit(int id) { AccountProfileEditViewModel model = db.GetAccount(id); // however you do this in your app return PartialView("_AccountProfileEdit", model); }
AJAX POST
现在您需要AJAX才能提交此表单。 如果您依赖标准表单提交，浏览器将离开您的页面（并关闭您的模式）。
$("#myModal").on("submit", "#form-accountedit", function(e) { e.preventDefault(); // prevent standard form submission var form = $(this); $.ajax({ url: form.attr("action"), method: form.attr("method"), // post data: form.serialize(), success: function(partialResult) { $("#form-container").html(partialResult); } }); });
您需要为提交事件使用事件委托$(staticParent).on(event, target, handler) ，因为表单内容可能会在以后被替换。
发布行动
[HttpPost] public ActionResult AccountProfileEdit(AccountProfileEditViewModel model) { // Request.Form is model if (ModelState.IsValid) { // do work return PartialView("_AccountEditSuccess"); } return PartialView("_AccountProfileEdit", model); }
客户端validation脚本应该阻止它们提交。 但如果这种方式失败了，或者如果你无法在客户端上validation某些内容，那么你就拥有了ModelState.IsValid 。 您也可能手动使服务器端无效。
_AccountEditSuccess.cshtml
而“成功”的局部观点。
Success!
无效是失败的，对吗？
从你的AJAX成功处理程序
success: function(partialResult) { $("#form-container").html(partialResult); }
但问题是我们不知道你是否获得了“成功”或“validation失败”。 添加error: function(err){ }处理程序将无济于事，因为validation失败被视为HTTP 200响应。 在这两种情况下，div内容被替换，用户需要手动关闭模态。 有一些方法可以传递额外的数据来区分这两种情况，但这是另一个很长的答案。
考虑在模态div中放置一个iframe，而不是渲染partialView，这样你就可以像开发简单页面一样开发模态部分，提交，模型，需要等…
这条路：