javascript - MVC FormAction Bootstrap 模态确认
问题描述
我在这里遇到了困难。我想创建一个全局 Javascript 函数,该函数阻止表单按钮提交,直到在模式上选择了一个选项,并且可以在系统中的任何地方使用。我有一个表格,这里是简化的:
@using (Html.BeginForm("UserCreate", "Administration", FormMethod.Post,
new { @Id = "user-form", @Style = "color:#595959;" }))
{
<input name="submit"
type="submit"
class="button"
id="removeAccount"
value="Remove account"
formaction="@Url.Action("DeleteAccount", "Administration",
new { userAuthenticationId = Model.UserAuthentication.Id,
userId = Model.UserId })"
formmethod="post"
onclick="return confirmDialog('Are you sure you wish to remove this account?');"/>
<input name="submit" type="submit" class="button" id="save" value="Create user"/>
}
整个表单都有一个提交,但还有另一个按钮向控制器发布一个名为“RemoveAccount”的请求。我想要一个确认模式来阻止 RemoveAccount 提交。我希望它是全局的,所以我可以在其中添加这样的一行,<input>
因为系统中有很多这样的实例。我怎样才能做到这一点?使用当前代码,模式会显示,但无论您选择什么,RemoveAccount 都会提交。
这是confirmDialog函数:
function confirmDialog(message) {
var fClose = function () {
modal.modal("hide");
return false;
};
var onConfirm = function () {
modal.modal("hide");
return true;
};
var modal = $("#confirmModal");
modal.modal("show");
$("#confirmMessage").empty().append(message);
$("#confirmOk").unbind().one('click', onConfirm);
$("#confirmCancel").unbind().one("click", fClose);
}
和模态html:
<!-- Modal -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" 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>
</div>
<div id="confirmMessage" class="modal-body">
</div>
<div class="modal-footer">
<button id="confirmOk" type="button" class="button">Ok</button>
<button id="confirmCancel" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
解决方案
问题是表单在您确认 javascript 有机会运行之前提交。
一种解决方案是隐藏真实提交并向用户显示虚假提交。当点击虚假提交时,显示模式。并且当模态被确认时触发真正的提交按钮的点击事件处理程序。
为此,请将您的表单更改为此
@using (Html.BeginForm("UserCreate", "Administration", FormMethod.Post,
new { @Id = "user-form", @Style = "color:#595959;" }))
{
<input name="submit" type="submit" class="button" id="removeAccount"
value="Remove account"
formaction="@Url.Action("DeleteAccount", "Administration",
new { userAuthenticationId = Model.UserAuthentication.Id,
userId = Model.UserId })"
formmethod="post"
style="display:none;"
/>
<button type="button"
onclick="return confirmDialog(event,'Are you sure you wish to remove this account?');">
Remove account
</button>
<input name="submit" type="submit" class="button" id="save" value="Create user" />
}
和你的javascript
function confirmDialog(event,message) {
event.preventDefault();
var fClose = function () {
modal.modal("hide");
return false;
};
var onConfirm = function () {
modal.modal("hide");
$("#removeAccount").click(); //trigger the click event handler of the real submit
return true;
};
var modal = $("#confirmModal");
modal.modal("show");
$("#confirmMessage").empty().append(message);
$("#confirmOk").unbind().one('click', onConfirm);
$("#confirmCancel").unbind().one("click", fClose);
}
编辑 为了使此方法更可重用,您可以将假提交更改为此
<button type="button"
onclick="return confirmDialog(event,'#removeAccount','Are you sure you wish to remove this account?');">
Remove account
</button>
即传递您要提交的事物的ID 作为参数。然后你会把javascript改成这个
function confirmDialog(event,submitToConfirm,message) {
event.preventDefault();
var fClose = function () {
modal.modal("hide");
return false;
};
var onConfirm = function () {
modal.modal("hide");
$(submitToConfirm).click();
return true;
};
var modal = $("#confirmModal");
modal.modal("show");
$("#confirmMessage").empty().append(message);
$("#confirmOk").unbind().one('click', onConfirm);
$("#confirmCancel").unbind().one("click", fClose);
}
推荐阅读
- python - Python比较两个大文件单词表并在匹配时打印
- function - Schwefel 函数试图用三个变量找到全局最小值,但我收到函数错误
- python - 使用 pandas 绘制两列 csv 的直方图
- node.js - AWS S3 Heroku nodejs
- postgresql - 在 Google Cloud SQL 服务器上运行后找不到 pg_dump 生成的文件
- webpack - 为什么在构建 webpack 时没有替换箭头函数
- c# - C# Automapper:Nullable Boolean 不适用于不同的类成员名称
- javascript - Javascript:如何制作保存文件对话框来保存文件?
- sql-server - 执行进程任务运行成功但未解压缩所需的 .zip 文件-Visual Studio 2019
- php - 如何解决 Laravel 中的 csv 文件读取错误