- 首页
- 其他开发
- 自定义模式 - 如何停止保存按钮的默认行为，以便自定义模式可以先做它的事情?
自定义模式 - 如何停止保存按钮的默认行为，以便自定义模式可以先做它的事情?
[英] Custom modal - how to stop a save buttons default behavior so the custom modal can do its thing first?
本文介绍了自定义模式 - 如何停止保存按钮的默认行为，以便自定义模式可以先做它的事情?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Av Asp.Net MVC 网络应用程序.
我正在使用 Window.confirm() 方法在单击保存按钮时显示模式对话框.它工作正常 - 模态出现并在执行控制器代码之前等待响应.
但是，我想要一个更好看的模态.
如何让它阻止控制器代码执行并第一次等待我的模态响应?有人告诉我模态不是真正的模态，我需要在那里有一个处理程序.只是不确定如何或在哪里编码.
Razor 视图(简化 - 不显示字段):
@using (Html.BeginForm("ProcessSaveUserProfile", "UserProfile", FormMethod.Post)){<div class="panel-body"><div class="row"><div class="col-md-3">.....
<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 class="col-md-2">@Html.ActionLink("取消更改", "GetUserProfile", "UserProfile", null, new { @class = "btn btn-info" })
@Html.AntiForgeryToken()}@Scripts.Render("~/bundles/jqueryval")@Scripts.Render("~/bundles/jquery")@Scripts.Render("~/bundles/bootstrap")@Styles.Render("~/Content/css")@* 模态.*@<div class="modalfade" id="myModal4" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-body" style="padding:10px;"><h4 class="text-center">您确定要保存吗?继续吗?<div class="text-center"><a class="btn btn-info btn-yes4">是</a><a class="btn btn-default btn-no4">No</a>
<script type="text/javascript">$(document).ready(function () {$(".saveButton").click(function (e) {//触发(显示)模态.$("#myModal4").modal({背景:'静态'，键盘:假});//在回调函数中传递 true.$(".btn-yes4").click(function () {$("#myModal4").modal("隐藏");返回真；});//在回调函数中传递 false.$(".btn-no4").click(function () {$("#myModal4").modal("隐藏");返回假；});//关闭模态后将其移除.$("#myModal4").on('hidden.bs.modal', function () {$("#myModal4").remove();});});//标准的 Window.confirm() 方法.它有效 - 阻止控制器代码执行并等待//用于响应.但它很丑.//$('.saveButton').click(function (e) {//if (confirm("Are you sure you want to save.Continue?")) {//返回真；//}//返回假；//});});
解决方案
大功告成！
给你的表单一个唯一的 ID
在是按钮点击事件时提交.
继续在提交按钮中返回 false.
@using (Html.BeginForm("ProcessSaveUserProfile", "UserProfile",FormMethod.Post, new{id="uniqueId"})){
和
$(".btn-yes4").click(function () {$("#myModal4").modal("隐藏");jQuery("#uniqueId").submit();//返回真；});
最后
返回假；});
完整代码
Razor 视图(简化 - 不显示字段):
@using (Html.BeginForm("ProcessSaveUserProfile", "UserProfile",FormMethod.Post, new{id="uniqueId"})){<div class="panel-body"><div class="row"><div class="col-md-3">.....<div class="panel-body"><div class="row"><div class="form-group"><div class="col-md-2"><输入类型=提交"值=保存"class="btn btn-primary saveButton";/>
<div class="col-md-2">@Html.ActionLink("取消更改", "GetUserProfile","UserProfile", null, new { @class = "btn btn-info" })
@Html.AntiForgeryToken()}@Scripts.Render("~/bundles/jqueryval")@Scripts.Render("~/bundles/jquery")@Scripts.Render("~/bundles/bootstrap")@Styles.Render("~/Content/css")
@* 模态.*@
<div class="modal-dialog"><div class="modal-content"><div class="modal-body" style="padding:10px;"><h4 class="text-center">您确定要保存吗?继续吗?<div class="text-center"><a class="btn btn-info btn-yes4">是</a><a class="btn btn-default btn-no4">No</a>
<script type="text/javascript">$(document).ready(function () {$(".saveButton").click(function (e) {//触发(显示)模态.$("#myModal4").modal({背景:'静态'，键盘:假});//在回调函数中传递 true.$(".btn-yes4").click(function () {$("#myModal4").modal("隐藏");//返回真；jQuery("#uniqueId").submit();});//在回调函数中传递 false.$(".btn-no4").click(function () {$("#myModal4").modal("隐藏");//返回假；});//关闭模态后将其移除.$("#myModal4").on('hidden.bs.modal', function () {$("#myModal4").remove();});返回假；});
编辑:
为了不每次都绑定事件点击，也可以使用这段代码
Av Asp.Net MVC web app.
I am using the Window.confirm() method to display the modal dialog when a save button is clicked. It works fine - the modal appears and waits for a response before executing the controller code.
However, I want a better looking modal.
How do I get it to block the controller code execution and 1st wait for my modal to respond? I'm told the modal is not a true modal and that I need a handler in there. Just not sure how or where to code that.
The Razor view (simplified - not showing fields):
@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>
解决方案
You are almost done!
Give your form an unique Id
submit it on yes button click event.
continue to return false in the submit button.
@using (Html.BeginForm("ProcessSaveUserProfile", "UserProfile",
FormMethod.Post, new{id="uniqueId"}))
{
And
$(".btn-yes4").click(function () {
$("#myModal4").modal("hide");
jQuery("#uniqueId").submit();
// return true;
});
And finally
return false;
});
Complete code
The Razor view (simplified - not showing fields):
@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")
@* 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;
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>
EDITS:
In order not to bind event click everytime, you can also use this code
<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>
这篇关于自定义模式 - 如何停止保存按钮的默认行为，以便自定义模式可以先做它的事情?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
