我正在動態創建一些表單,我在bootstrap 3和jquery 3.1.0旁邊使用bootbox 4在MVC5應用程序中。Bootbox回調錶單提交無法正常工作
編輯:我更新了我的項目的jquery從1.10.2到3.1.0,下面仍然有相同的問題。
用法:單擊刪除,通過模式刪除bootbox確認,如果確認,請在表單上調用.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>
}
我的腳本(添加視圖的底部):
@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>
編輯:解
事實證明,在ModelState中覆蓋值由我查看foreach循環產生的所有形式的ID,最終HTML輸出。這解釋了爲什麼上述所有症狀都在發生。我只是在返回viewModel之前將下面的代碼添加到我的控制器中,並且它已修復: ModelState.Remove(「id」);
什麼是您的應用程序的HTML輸出。我認爲這個劇本沒有問題。在這裏做了一個小測試... https://jsfiddle.net/ymm8y0wb/ –
我檢查了我的html輸出,我相信我可能找到了問題。我將表格嵌套在表格中。表格> tr> td>表格。我會清理我的觀點,然後回覆結果。 –
BA_Webimax,我繼續前進,並添加了一些HTML輸出到我的文章。 –