c# - Bootstrap Modal 没有关闭 ajax 成功
问题描述
我的剃须刀页面之一是使用引导模式进行添加/编辑/删除操作。现在发生的是 ajax 成功，它没有关闭模式并且添加的内容没有显示。我不能使用 location.reload 功能，因为它不会专注于当前选项卡。这是我的代码。
StaffAssets.cshtml
@page
@model Contractor_HRMS.Pages.Staff.Onboarding.StaffAssetsModel
@{
Layout = null;
}
<br />
<!-- CREATE NEW ASSET BUTTON-->
<div class="text-center">
<button class="btn-success" data-toggle="modal" data-target="#modalStaffAssets">
Add New Asset
</button>
</div>
<br />
<!-- CREATE NEW ASSET MODAL-->
<div class="modal fade" id="modalStaffAssets" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Add New Asset</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form asp-page-handler="AddAssetsDetails" data-ajax="true" data-ajax-method="post" data-ajax-complete="staffAddAssetsCompleted">
<div class="modal-body">
<input asp-for="StaffAssets.StaffID" type="hidden" value='@TempData["StaffID"]' />
<input asp-for="StaffAssets.EmpID" type="hidden" value='@TempData["EmpID"]' />
<!-- Asset Name -->
<div class="form-group">
<label asp-for="StaffAssets.StaffAssetName" class="control-label-staff"></label>
<select asp-for="StaffAssets.StaffAssetName" name="StaffAssets.StaffAssetName" asp-items="Model.ShowAssetName" class="form-control-staff">
<option value="">Please Select</option>
</select>
<br />
<span asp-validation-for="StaffAssets.StaffAssetName" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Issued Quantity -->
<div class="form-group">
<label asp-for="StaffAssets.IssuedQty" class="control-label-staff"></label>
<input asp-for="StaffAssets.IssuedQty" name="StaffAssets.IssuedQty" class="form-control-staff" /><br />
<span asp-validation-for="StaffAssets.IssuedQty" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Issued Date-->
<div class="form-group">
<label asp-for="StaffAssets.IssuedDate" class="control-label-staff"></label>
<input asp-for="StaffAssets.IssuedDate" name="StaffAssets.IssuedDate" class="form-control-staff" /><br />
<span asp-validation-for="StaffAssets.IssuedDate" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Asset Size -->
<div class="form-group">
<label asp-for="StaffAssets.Size" class="control-label-staff"></label>
<select asp-for="StaffAssets.Size" name="StaffAssets.Size" asp-items="Model.ShowAssetSize" class="form-control-staff">
<option value="">Please Select</option>
</select>
<br />
<span asp-validation-for="StaffAssets.Size" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Return Qty-->
@*<div class="form-group" style="display:none;">
<label asp-for="StaffAssets.ReturnQty" class="control-label-staff"></label>
<input asp-for="StaffAssets.ReturnQty" class="form-control-staff" /><br />
<span asp-validation-for="StaffAssets.ReturnQty" class="text-danger" style="margin-left:210px;"></span>
</div>*@
<!-- Return Date-->
@*<div class="form-group" style="display:none;">
<label asp-for="StaffAssets.ReturnDate" class="control-label-staff"></label>
<input asp-for="StaffAssets.ReturnDate" class="form-control-staff" /><br />
<span asp-validation-for="StaffAssets.ReturnDate" class="text-danger" style="margin-left:210px;"></span>
</div>*@
</div>
<div class="modal-footer d-flex justify-content-center">
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>
</div>
</div>
</div>
<!-- STAFF ASSETS LIST-->
@if (Model.ShowStaffAssets != null)
{
<table class="table" border="1" style="width:750px;margin-left:175px;">
<thead style="background-color:silver">
<tr>
<th>@Html.DisplayNameFor(model => model.ShowStaffAssets[0].StaffAssetName)</th>
<th>@Html.DisplayNameFor(model => model.ShowStaffAssets[0].IssuedQty)</th>
<th>@Html.DisplayNameFor(model => model.ShowStaffAssets[0].IssuedDate)</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.ShowStaffAssets)
{
<tr>
<td>@Html.DisplayFor(modelItem => item.StaffAssetName)</td>
<td>@Html.DisplayFor(modelItem => item.IssuedQty)</td>
<td>@Html.DisplayFor(modelItem => item.IssuedDate)</td>
<td>
<img src="~/images/pencil(1).png" alt="Edit"> <a data-toggle="modal" data-target="#myModalEdit_@item.StaffAssetName">Edit</a> |
<img src="~/images/icons8-delete-trash-16.png" alt="Delete"> <a data-toggle="modal" data-target="#myModalDelete_@item.StaffAssetName">Delete</a>
<!--EDIT STAFF ASSET-->
<div id="myModalEdit_@item.StaffAssetName" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Edit Asset</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form asp-page-handler="EditAssetsDetails" data-ajax="true" data-ajax-method="post" data-ajax-complete="staffEditAssetsCompleted">
<div class="modal-body">
<input asp-for="StaffAssets.StaffID" type="hidden" value='@item.StaffID' />
<input asp-for="StaffAssets.EmpID" type="hidden" value='@item.EmpID' />
<!-- Asset Name -->
<div class="form-group">
<label asp-for="StaffAssets.StaffAssetName" class="control-label-staff"></label>
@*<input asp-for="StaffAssets.StaffAssetName" value="@item.StaffAssetName" class="form-control-staff" />*@
<select asp-for="@item.StaffAssetName" name="StaffAssets.StaffAssetName" asp-items="Model.ShowAssetName" class="form-control-staff">
<option value="">Please Select</option>
</select>
<br />
<span asp-validation-for="StaffAssets.StaffAssetName" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Issued Quantity -->
<div class="form-group">
<label asp-for="StaffAssets.IssuedQty" class="control-label-staff"></label>
<input asp-for="@item.IssuedQty" name="StaffAssets.IssuedQty" class="form-control-staff" /><br />
<span asp-validation-for="StaffAssets.IssuedQty" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Issued Date-->
<div class="form-group">
<label asp-for="StaffAssets.IssuedDate" class="control-label-staff"></label>
<input asp-for="@item.IssuedDate" name="StaffAssets.IssuedDate" class="datepicker" type="text" /><br />
<span asp-validation-for="StaffAssets.IssuedDate" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Asset Size -->
<div class="form-group">
<label asp-for="StaffAssets.Size" class="control-label-staff"></label>
@*<input asp-for="StaffAssets.StaffAssetName" value="@item.StaffAssetName" class="form-control-staff" />*@
<select asp-for="@item.Size" name="StaffAssets.Size" asp-items="Model.ShowAssetSize" class="form-control-staff">
<option value="">Please Select</option>
</select>
<br />
<span asp-validation-for="StaffAssets.Size" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Return Qty-->
<div class="form-group" style="display:none;">
<label asp-for="StaffAssets.ReturnQty" class="control-label-staff"></label>
<input asp-for="StaffAssets.ReturnQty" class="form-control-staff" value="NULL" /><br />
<span asp-validation-for="StaffAssets.ReturnQty" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Return Date-->
<div class="form-group" style="display:none;">
<label asp-for="StaffAssets.ReturnDate" class="control-label-staff"></label>
<input asp-for="StaffAssets.ReturnDate" class="datepicker" type="text" /><br />
<span asp-validation-for="StaffAssets.ReturnDate" class="text-danger" style="margin-left:210px;"></span>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>
</div>
</div>
</div>
<!---DELETE STAFF ASSET-->
<div id="myModalDelete_@item.StaffAssetName" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Delete Asset</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form asp-page-handler="DeleteAssetsDetails" data-ajax="true" data-ajax-method="post" data-ajax-complete="staffDeleteAssetsCompleted">
<div class="modal-body">
<input asp-for="StaffAssets.StaffID" type="hidden" value='@item.StaffID' />
<input asp-for="StaffAssets.EmpID" type="hidden" value='@item.EmpID' />
<input asp-for="StaffAssets.StaffAssetName" type="hidden" value='@item.StaffAssetName' />
<p class="text-center">Are you sure want to delete this @item.StaffAssetName?</p>
</div>
<div class="modal-footer d-flex justify-content-center">
<button type="submit" class="btn btn-success">Delete</button>
</div>
</form>
</div>
</div>
</div>
</td>
</tr>
}
</tbody>
</table>
}
Ajax 函数
function staffAddAssetsCompleted(event) {
if (event.responseText != "") {
$("#Assets").html(event.responseText);
} else {
alert("Assets Has Been Added Successfully");
$.ajax({
url: "/Staff/Onboarding/StaffAssets",
type: "get",
success: function (result) {
$("#Assets").html(result);
$('a[href="#Assets"]').tab('show');
}
})
}
}
function staffEditAssetsCompleted(event) {
if (event.responseText != "") {
$("#Assets").html(event.responseText);
} else {
alert("Assets Has Been Added Successfully");
$.ajax({
url: "/Staff/Onboarding/StaffAssets",
type: "get",
success: function (result) {
$("#Assets").html(result);
$('a[href="#Assets"]').tab('show');
}
})
}
}
提交表单后，屏幕会是这样的
它没有在页面中显示添加的资产。任何帮助将不胜感激。谢谢。
解决方案
这是一个工作演示：
改变
<form asp-page-handler="AddAssetsDetails" data-ajax="true" data-ajax-method="post" data-ajax-complete="staffAddAssetsCompleted">
<div class="modal-body">
<input asp-for="StaffAssets.StaffID" type="hidden" value='@TempData["StaffID"]' />
<input asp-for="StaffAssets.EmpID" type="hidden" value='@TempData["EmpID"]' />
<!-- Asset Name -->
<div class="form-group">
<label asp-for="StaffAssets.StaffAssetName" class="control-label-staff"></label>
<select asp-for="StaffAssets.StaffAssetName" name="StaffAssets.StaffAssetName" asp-items="Model.ShowAssetName" class="form-control-staff">
<option value="">Please Select</option>
</select>
<br />
<span asp-validation-for="StaffAssets.StaffAssetName" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Issued Quantity -->
<div class="form-group">
<label asp-for="StaffAssets.IssuedQty" class="control-label-staff"></label>
<input asp-for="StaffAssets.IssuedQty" name="StaffAssets.IssuedQty" class="form-control-staff" /><br />
<span asp-validation-for="StaffAssets.IssuedQty" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Issued Date-->
<div class="form-group">
<label asp-for="StaffAssets.IssuedDate" class="control-label-staff"></label>
<input asp-for="StaffAssets.IssuedDate" name="StaffAssets.IssuedDate" class="form-control-staff" /><br />
<span asp-validation-for="StaffAssets.IssuedDate" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Asset Size -->
<div class="form-group">
<label asp-for="StaffAssets.Size" class="control-label-staff"></label>
<select asp-for="StaffAssets.Size" name="StaffAssets.Size" asp-items="Model.ShowAssetSize" class="form-control-staff">
<option value="">Please Select</option>
</select>
<br />
<span asp-validation-for="StaffAssets.Size" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Return Qty-->
@*<div class="form-group" style="display:none;">
<label asp-for="StaffAssets.ReturnQty" class="control-label-staff"></label>
<input asp-for="StaffAssets.ReturnQty" class="form-control-staff" /><br />
<span asp-validation-for="StaffAssets.ReturnQty" class="text-danger" style="margin-left:210px;"></span>
</div>*@
<!-- Return Date-->
@*<div class="form-group" style="display:none;">
<label asp-for="StaffAssets.ReturnDate" class="control-label-staff"></label>
<input asp-for="StaffAssets.ReturnDate" class="form-control-staff" /><br />
<span asp-validation-for="StaffAssets.ReturnDate" class="text-danger" style="margin-left:210px;"></span>
</div>*@
</div>
<div class="modal-footer d-flex justify-content-center">
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>
至
<form id="form1" method="post">
<div class="modal-body">
<input asp-for="StaffAssets.StaffID" type="hidden" value='@TempData["StaffID"]' />
<input asp-for="StaffAssets.EmpID" type="hidden" value='@TempData["EmpID"]' />
<!-- Asset Name -->
<div class="form-group">
<label asp-for="StaffAssets.StaffAssetName" class="control-label-staff"></label>
<select asp-for="StaffAssets.StaffAssetName" name="StaffAssets.StaffAssetName" asp-items="Model.ShowAssetName" class="form-control-staff">
<option value="">Please Select</option>
</select>
<br />
<span asp-validation-for="StaffAssets.StaffAssetName" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Issued Quantity -->
<div class="form-group">
<label asp-for="StaffAssets.IssuedQty" class="control-label-staff"></label>
<input asp-for="StaffAssets.IssuedQty" name="StaffAssets.IssuedQty" class="form-control-staff" /><br />
<span asp-validation-for="StaffAssets.IssuedQty" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Issued Date-->
<div class="form-group">
<label asp-for="StaffAssets.IssuedDate" class="control-label-staff"></label>
<input asp-for="StaffAssets.IssuedDate" name="StaffAssets.IssuedDate" class="form-control-staff" /><br />
<span asp-validation-for="StaffAssets.IssuedDate" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Asset Size -->
<div class="form-group">
<label asp-for="StaffAssets.Size" class="control-label-staff"></label>
<select asp-for="StaffAssets.Size" name="StaffAssets.Size" asp-items="Model.ShowAssetSize" class="form-control-staff">
<option value="">Please Select</option>
</select>
<br />
<span asp-validation-for="StaffAssets.Size" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Return Qty-->
@*<div class="form-group" style="display:none;">
<label asp-for="StaffAssets.ReturnQty" class="control-label-staff"></label>
<input asp-for="StaffAssets.ReturnQty" class="form-control-staff" /><br />
<span asp-validation-for="StaffAssets.ReturnQty" class="text-danger" style="margin-left:210px;"></span>
</div>*@
<!-- Return Date-->
@*<div class="form-group" style="display:none;">
<label asp-for="StaffAssets.ReturnDate" class="control-label-staff"></label>
<input asp-for="StaffAssets.ReturnDate" class="form-control-staff" /><br />
<span asp-validation-for="StaffAssets.ReturnDate" class="text-danger" style="margin-left:210px;"></span>
</div>*@
</div>
<div class="modal-footer d-flex justify-content-center">
<input type="button" class="btn btn-success" value="Save" onclick="submit1()"/>
</div>
</form>
将以下代码添加到带有选项卡的剃须刀页面：
function submit1() {
$.ajax({
type: "POST",
url: "/Staff/Onboarding/StaffAssets?handler=AddAssetsDetails",
data: $("#form1").serialize(),
headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
success: function (data) {
$(".modal-backdrop").remove();
$("#Assets").html(data);
}
});
}
结果：
推荐阅读
- python - Python列表函数或列表理解
- woocommerce - wc_get_product 总是返回 false
- sql - 如何将查询加载到 SQL 函数中的变量并返回它
- angular - 如何从 Firebase 存储中检索文件（而不仅仅是其下载 URL）
- asp.net - 是否可以在另一个网站内托管 powerbi.com？
- python - 计算 Dataframe 列中出现的次数
- javascript - Angular2 + / Typescript中的Lodash - groupBy在尝试传递参数时无法调用其类型缺少调用签名的表达式？
- python - Django - urls 中的视图或条件选择两种 url 模式之一，以判断参数是否具有值或为 NONE
- python - 使用 python 更改和运行 SQL 查询
- hybris - 如何在后台更改订单日期的时区？