C# 引导模式在ajax成功时未关闭
我的一个razor页面正在使用引导模式进行添加/编辑/删除操作。现在发生的是ajax成功，它没有关闭模式，添加的内容也没有显示。我无法使用location.reload函数，因为它不会关注当前选项卡。这是我的代码 StaffAssets.cshtmlC# 引导模式在ajax成功时未关闭,c#,asp.net-core,bootstrap-modal,razor-pages,C#,Asp.net Core,Bootstrap Modal,Razor Pages,我的一个razor页面正在使用引导模式进行添加/编辑/删除操作。现在发生的是ajax成功，它没有关闭模式，添加的内容也没有显示。我无法使用location.reload函数，因为它不会关注当前选项卡。这是我的代码 StaffAssets.cshtml @page @model Contractor_HRMS.Pages.Staff.Onboarding.StaffAssetsModel @{ Layout = null; } <br /> <!-- CREATE N
@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>
}
它不会在页面中显示添加的资产。任何帮助都将不胜感激。谢谢。这里是一个工作演示： 改变
<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>
你可以试试这个
$('#modalStaffAssets').modal('toggle');
$('#modalStaffAssets').modal('show');
$('#modalStaffAssets').modal('hide')
每一行都有它自己的效果。什么是
$（“#资产”）<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);
}
});
}
$('#modalStaffAssets').modal('toggle');
$('#modalStaffAssets').modal('show');
$('#modalStaffAssets').modal('hide')