我正在动态创建一些表单,并在MVC5应用程序中将Bootbox 4与bootstrap 3和jquery 3.1.0一起使用。
编辑:我将我的项目的jquery从1.10.2更新到了3.1.0,下面仍然有同样的问题。
用法:单击删除,引导箱通过模式确认删除,如果确认,则调用表单上的.submit()操作。
问题:我单击“删除”按钮,它弹出一个模态以确认操作,然后单击“继续”,但是它什么也没做。在所有表单元素中似乎只有一个工作提交动作。因此,我能够在每次刷新页面时成功调用一个元素上的提交。
我是javascript的新手,所以目前我有一个基本的了解,我正在尝试找出下面的代码在做错什么。任何帮助,将不胜感激。
我的查看代码:
@foreach (var user in Model.Users)
{
<tr>
<td>
@user.Id
</td>
<td class="text-center">
@user.FirstName @user.LastName
</td>
<td class="text-center">
@Html.CheckBox("role", user.IsAdmin)
</td>
<td>
@using (Html.BeginForm("UpdateUserRole", "Admin", FormMethod.Post, new {@class = "btn-inline"}))
{
@Html.Hidden("id", user.Id)
@Html.Hidden("role", user.GetRole(user.IsAdmin))
<button type="submit" class="btn btn-info">Update</button>
}
@using (Html.BeginForm("RemoveUser", "Admin", FormMethod.Post, new {@class = "btn-inline", @id=user.Id+"Form"}))
{
@Html.Hidden("id", user.Id)
<button [email protected] type="submit" class="btn btn-danger buttonElement">Remove</button>
}
</td>
</tr>
}
我的脚本(添加到View的底部):
@section scripts
{
<script type="text/javascript">
$(function () {
$('form').on('click','button.buttonElement',function (e) {
var user = $(this).attr("data-user-id");
e.preventDefault();
bootbox.dialog({
message: "Do you want to continue ?", title: "Remove User",
buttons: {
main: { label: "Cancel", className: "btn btn-default", callback: function () { return true; } },
success: { label: "Continue", className: "btn btn-default", callback: function () { $('#'+user+'Form').submit(); } }
}
});
});
});
</script>
}
编辑:这是一些HTML输出:
<table class="table table-hover">
<tbody>
<tr>
<td>
Joe
</td>
<td class="text-center">
Joe Cuevas
</td>
<td class="text-center">
<input checked="checked" id="role" name="role" type="checkbox" value="true"><input name="role" type="hidden" value="false">
</td>
<td>
<form action="/Admin/UpdateUserRole" class="btn-inline" method="post">
<input data-val="true" data-val-regex="Invalid!" data-val-regex-pattern="([A-Za-z0-9.-])+" data-val-required="NetworkID is required!" id="id" name="id" type="hidden" value="joe"><input id="role" name="role" type="hidden" value="Admin"> <button type="submit" class="btn btn-info">Update</button>
</form> <form action="/Admin/RemoveUser" class="btn-inline" id="joeForm" method="post">
<input data-val="true" data-val-regex="Invalid!" data-val-regex-pattern="([A-Za-z0-9.-])+" data-val-required="NetwordID is required!" id="id" name="id" type="hidden" value="joe"> <button data-user-id="joe" type="submit" class="btn btn-danger buttonElement">Remove</button>
</form>
</td>
</tr>
</tbody>
</table>
编辑:解决方案
事实证明,在最终的HTML输出上,modelstate覆盖了我的View中由foreach循环生成的所有表单的id值。这就解释了为什么上述所有症状都在发生。我只是将以下代码添加到了我的控制器中,然后返回了我的viewModel,该代码已得到修复:ModelState.Remove(“ id”);
就嵌套而言,表/ tr / td /形式是可以的。您可能可以简化触发表单提交的触发:
$('form').on('click','button.buttonElement',function (e) {
var user = $(this).attr("data-user-id");
var form = $(this).closest('form'); // <-- add this
e.preventDefault();
bootbox.dialog({
message: "Do you want to continue ?",
title: "Remove User",
buttons: {
main: {
label: "Cancel",
className: "btn btn-default",
callback: function () {
return true;
}
},
success: {
label: "Continue",
className: "btn btn-default",
callback: function () {
form.submit(); // <-- change this
}
}
}
});
});
您也可以简单地使用该bootbox.confirm
功能。如果要自定义按钮文本,请按照此处的第二个示例进行操作。
$('form').on('click','button.buttonElement',function (e) {
var user = $(this).attr("data-user-id");
var form = $(this).closest('form'); // <-- add this
e.preventDefault();
bootbox.confirm({
message: "Do you want to continue ?",
title: "Remove User",
buttons: {
cancel: {
label: "Cancel",
className: "btn btn-default"
},
confirm: {
label: "Continue",
className: "btn btn-default"
}
},
callback: function(result) {
if(result == true) {
form.submit();
}
}
});
});
您可能需要考虑以下事实:用户可以触发表单提交而无需单击继续按钮,在这种情况下,将在不确认的情况下发生删除请求。
另外,尚未确定Bootbox是否可与jQuery 3.x一起使用,尽管这更多取决于父Bootstrap库版本-如果已升级到jQuery 3.x,则必须升级到Bootstrap 3.3.7。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句