【发布时间】：2015-06-25 14:36:57
【问题描述】：
我真的很想知道如何将这一切放在一起。我已经多次在 .net MVC 页面中构建表单，无论是否经过验证。我已经使用 jQuery 构建了表单，包括验证和不验证。而且我在模态框内构建了表单，但从未使用 MVC。
我从我的original question 了解到，因为这个表单在一个模式中，我需要使用 jQuery 来处理提交。我花了很长时间弄清楚如何将所有这些移动部件放在一起。到目前为止，我还没有找到将所有这些放在一起的教程（或教程组合）。
这是我需要的：
- 在我的 MVC 视图中，有一个用于打开模式的按钮。 （这很好用。）
- 一旦模式打开，它会包含一个带有多个文本字段和下拉列表的表单。每个都是必需的。 （为了使这些字段成为必需的，我会在视图的模型中定义这些，就像我通常使用 MVC 表单一样？还是在 jQuery 中创建需求？）
- 如果用户尝试提交表单并且它们为空或无效，则模式保持打开状态并显示验证消息。 （我从original question 了解到，由于模态的原因，使用直接 MVC 是不可能的，并且需要一些 jQuery。我在这里迷路了。）
- 如果用户尝试提交表单并且所有字段都有效，则模式关闭，我们点击控制器并将字段保存到数据库。 （不知道如何从 jQuery 中逃脱，直接点击普通控制器来处理最终逻辑。）
编辑：
谢谢你，杰森，你的帮助！根据您的建议，这就是我的工作方式。
父视图：
模态：
<div class="modal fade" id="AccountEditModal" tabindex="-1" role="dialog" aria-labelledby="AccountEditModalLabel">
<div class="modal-dialog modalAccountEdit" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3><strong>Edit Account Profile - <span class="accountname"></span></strong></h3>
</div>
<div class="modal-body">
<div id="formContent">
@Html.Partial("_AccountProfileEdit", new GEDCPatientPortal.Models.AccountProfileEditViewModel())
</div>
</div>
</div>
</div>
</div>
然后是脚本：
@section Scripts {
<script>
$(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);
}
});
});
});
</script>
}
局部视图（缩小版）：
@using (Html.BeginForm("AccountProfileEdit", "Account", FormMethod.Post, new { id = "form-accountprofileedit", @class = "full-form" }))
{
@Html.CustomTextboxFor(model => model.Address)
<div style="text-align:right;">
<button type="submit" id="accountprofileedit-submit" name="accountprofileedit-submit" value="Edit Account" class="btn btn-primary" style="margin-left:5px;">Edit Account</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
</div>
}
控制者：
[HttpPost]
public ActionResult AccountProfileEdit(AccountProfileEditViewModel model)
{
if (ModelState.IsValid)
{
// logic to store form data in DB
}
return PartialView("_AccountProfileEdit", model);
}
【问题讨论】：
标签： jquery asp.net-mvc forms modal-dialog