Модальная загрузка не закрывается при успешном завершении ajax

ProgramBox

Модальная загрузка не закрывается при успешном завершении ajax

Post author:admin
Запись опубликована:16 ноября, 2022
Post category:Вопросы по программированию

#c# #asp.net-core #bootstrap-modal #razor-pages

#c# #asp.net-core #bootstrap-модальный #razor-страницы

Вопрос:

Одна из моих страниц razor использует модальную загрузку для операций добавления / редактирования / удаления.То, что происходит сейчас, — это успех 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">amp;times;</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">amp;nbsp;<a data-toggle="modal" data-target="#myModalEdit_@item.StaffAssetName">Edit</a> |
                        <img src="~/images/icons8-delete-trash-16.png" alt="Delete">amp;nbsp;<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">amp;times;</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">amp;times;</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');
                    }
                })
                
            }
        }

После отправки формы экран будет выглядеть следующим образом

Он не отображает добавленный ресурс на странице.Любая помощь будет оценена.Спасибо.

Ответ №1:

Вот рабочая демонстрация:

Изменить

 <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>

Добавьте следующий код на страницу razor с вкладками:

 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);
                }
            });

        }

Результат:

Ответ №2:

Ну, вы можете попробовать это

 $('#modalStaffAssets').modal('toggle');
$('#modalStaffAssets').modal('show');
$('#modalStaffAssets').modal('hide')

Каждая строка имеет свой собственный эффект.