自定义模态-如何停止保存按钮的默认行为，以便自定义模态可以先做它的事情

Question

平均Asp。Net MVC web应用程序。

当单击保存按钮时，我使用Window.confrm((方法来显示模式对话框。它工作得很好——在执行控制器代码之前，模态会出现并等待响应。

不过，我想要一个更好看的模态。

我如何让它阻止控制器代码的执行，并首先等待我的模态响应？我被告知模态不是真正的模态，我需要一个处理程序。只是不确定如何或在哪里编码。

Razor视图(简化-不显示字段(：

@using (Html.BeginForm("ProcessSaveUserProfile", "UserProfile", FormMethod.Post))
{
<div class="panel-body">
<div class="row">
<div class="col-md-3">
.....
</div>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="form-group">
<div class="col-md-2">
<input type="submit" value="Save" class="btn btn-primary saveButton"; />
</div>
<div class="col-md-2">
@Html.ActionLink("Cancel Changes", "GetUserProfile", "UserProfile", null, new { @class = "btn btn-info" })
</div>
</div>
</div>
</div>
@Html.AntiForgeryToken()
}
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
@* Modal. *@
<div class="modal fade" id="myModal4" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" style="padding:10px;">
<h4 class="text-center">Are you sure you want to save. Continue ?</h4>
<div class="text-center">
<a class="btn btn-info btn-yes4">Yes</a>
<a class="btn btn-default btn-no4">No</a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".saveButton").click(function (e) {
// Trigger(show) the modal.
$("#myModal4").modal({
backdrop: 'static',
keyboard: false
});
// Pass true in the callback function.
$(".btn-yes4").click(function () {
$("#myModal4").modal("hide");
return true;
});
// Pass false in the callback function.
$(".btn-no4").click(function () {
$("#myModal4").modal("hide");
return false;
});
// Remove the modal once it is closed.
$("#myModal4").on('hidden.bs.modal', function () {
$("#myModal4").remove();
});
});
// The standard Window.confirm() method. It works - blocks the controller code execution and waits 
// for a response. But it is ugly.
//$('.saveButton').click(function (e) {
//    if (confirm("Are you sure you want to save. Continue ?")) {
//        return true;
//    }
//    return false;
//});
});
</script>

Answer 1

您差不多完成了！

给你的表格一个唯一的Id

在yes按钮点击事件中提交。

继续在提交按钮中返回false。

@using (Html.BeginForm("ProcessSaveUserProfile", "UserProfile",
FormMethod.Post, new{id="uniqueId"}))
{

和

$(".btn-yes4").click(function () {
$("#myModal4").modal("hide");
jQuery("#uniqueId").submit();
// return true;
});

最后是

return false;
});

完整代码

Razor视图(简化-不显示字段(：

@using (Html.BeginForm("ProcessSaveUserProfile", "UserProfile", 
FormMethod.Post, new{id="uniqueId"}))
{
<div class="panel-body">
<div class="row">
<div class="col-md-3">
.....
</div>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="form-group">
<div class="col-md-2">
<input type="submit" value="Save" 
class="btn btn-primary saveButton"; />
</div>
<div class="col-md-2">
@Html.ActionLink("Cancel Changes", "GetUserProfile", 
"UserProfile", null, new { @class = "btn btn-info" })
</div>
</div>
</div>
</div>
@Html.AntiForgeryToken()
}
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")

@*模态。*@

<div class="modal fade" id="myModal4" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" style="padding:10px;">
<h4 class="text-center">Are you sure you want to save. Continue ?</h4>
<div class="text-center">
<a class="btn btn-info btn-yes4">Yes</a>
<a class="btn btn-default btn-no4">No</a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".saveButton").click(function (e) {
// Trigger(show) the modal.
$("#myModal4").modal({
backdrop: 'static',
keyboard: false
});
// Pass true in the callback function.
$(".btn-yes4").click(function () {
$("#myModal4").modal("hide");
//return true;
jQuery("#uniqueId").submit();
});
// Pass false in the callback function.
$(".btn-no4").click(function () {
$("#myModal4").modal("hide");
//return false;
});
// Remove the modal once it is closed.
$("#myModal4").on('hidden.bs.modal', function () {
$("#myModal4").remove();
});
return false;
});
</script>

编辑：

为了不每次都绑定事件点击，你也可以使用这个代码

<script type="text/javascript">
$(document).ready(function () {
var $modal = $("#myModal4").modal({
backdrop: 'static',
keyboard: false
});
// Pass true in the callback function.
$(".btn-yes4").click(function () {
$("#myModal4").modal("hide");
//return true;
jQuery("#uniqueId").submit();
});
// Pass false in the callback function.
$(".btn-no4").click(function () {
$("#myModal4").modal("hide");
//return false;            
});
$(".saveButton").click(function (e) {
// Trigger(show) the modal.
$modal.model('show');
return false;
});
</script>