我在ASP .NET MVC 5 Web应用程序中发布bootstrap模式时遇到问题。 我正在使用模态的局部视图:
@model Presentation.APP.MyAPP.Portal.Models.DocumentAndFilesManager.AddDocumentTypeModel
<script>
$(document).ready(function () {
$("#addDocumentTypeModal").on("submit", "#form-adddocumenttype-appt", 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) {
$('#addDocumentTypeModal').modal('toggle');
$("#form-container").html(partialResult);
}
});
});
});
</script>
<div class="modal fade" id="addDocumentTypeModal" role="dialog">
<div class="modal-dialog" 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 class="modal-title" id="addDocumentTypeModalLabel">Add document type</h3>
</div>
@using (Html.BeginForm("AddDocumentType", "WebManager", FormMethod.Post, new { id = "form-adddocumenttype-appt" }))
{
<div class="modal-body" id="form-container">
<div class="row">
<div class="col-sm-12">
Input unique NAME and unique REFERENCE NUMBER of new Document.
</div>
</div>
<div class="row">
<br />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(m => m.DocumentTypeTitle, new { @class = "col-sm-12 control-label" })
<div class="col-sm-8">
@Html.TextBoxFor(m => m.DocumentTypeTitle, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.DocumentTypeTitle, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.DocumentTypeReferenceNumber, new { @class = "col-sm-12 control-label" })
<div class="col-sm-8">
@Html.TextBoxFor(m => m.DocumentTypeReferenceNumber, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.DocumentTypeReferenceNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Add</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
}
</div>
</div>
</div>
然后我有父视图,其中呈现部分视图:
<div id="form-container">
@Html.Partial("_AddDocumentTypeModal")
</div>
最后我的控制器动作方法:
[HttpPost]
public ActionResult AddDocumentType(AddDocumentTypeModel model) {
if (ModelState.IsValid) {
if (!documentManagementFacade.AddDocumentType(model.DocumentTypeReferenceNumber, model.DocumentTypeTitle)) {
ModelState.AddModelError("", "Document type with this title and/or reference number already exists!");
}
else
{
return Json(new { success = true });
}
}
return PartialView("_AddDocumentTypeModal", model);
}
表单中的验证工作正常,但发布后的模态有问题:成功POST后以及发错后模态仍然存在。 成功发布后如何在发布错误/隐藏模式后显示一些消息?
非常感谢。
答案 0 :(得分:1)
$.ajax({
url: form.attr("action"),
method: form.attr("method"), // post
data: form.serialize(),
success: function (partialResult) {
$('#addDocumentTypeModal').modal('hide');
$('#addDocumentTypeModal').find("#errorMsg").hide();
$("#form-container").html(partialResult);
}
error:function (error) {
$('#addDocumentTypeModal').find("#errorMsg").html(error).show();
}
});
内部模态正文添加错误div
<div class="modal-body" id="form-container">
<div class="alert alert-danger" id="errorMsg" style="display:none" >Oops! Some error.....</div>
....
....
</div>