从 Ajax 调用返回部分视图后隐藏引导模式答案

【问题标题】：Hide a Bootstrap Modal after a Patial View return from an Ajax call从 Ajax 调用返回部分视图后隐藏引导模式
【发布时间】：2021-02-16 10:54:00
【问题描述】：

当我进行 ajax 调用时，我会显示我的模式 (options.beforeSend)。但是，当我收到一个 ajax 结果错误（options.error）时，我想隐藏这个模式。我试过了，但没有成功。

索引.cshtml

@* Modal - load spin *@
<div class="modal fade" id="itemLoader" tabindex="-1" role="dialog" aria-labelledby="ModalLabel2" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                  <h5 class="modal-title"></h5>
            </div>
            <div class="modal-body d-inline text-center">
                <div class="spinner-border spinner-border-sm text-info" role="status">
                <span class="sr-only small"></span>
                </div>
                <span class="far fa-dizzy fa-3x text-secondary" style="display:none;"></span>
                <label id="ModalStatus">Loading...</label>
            </div>
        </div>
    </div>
</div>

在发送之前，我切换/显示模式：

  options.beforeSend = function (xhr) { 
        xhr.setRequestHeader("XSRF-TOKEN", 
        $('input:hidden[name="__RequestVerificationToken"]').val());
        
        // My modal (works fine)
        $('#itemLoader').modal('toggle');
        $('#itemLoader').modal('show');
    };
    
    options.success = function (data) {
        if (data.idOrder!= null) {
            window.location.href = "/app/order/order?Id=" + data.idOrder;
        }
    };

如果错误（在部分视图返回后，来自 ModelState 无效），我试图隐藏模式，但我不能：

    options.error = function (res) {
               
        // When my modelState is not valid, return partial view with required messages (working fine)
        $('#chkForm').html(res.responseText);
       
        // But I can't hide the modal (does not work)
        var modal = $("#itemLoader");
        modal.hide();

        // hide modal (does not work)
        $('#itemLoader').modal('hide');
        $('#itemLoader').hide();
    };

我尝试了模态框上的关闭按钮，但也没有成功：

 <button id="btnclosemodal" class="close" type="button" data-dismiss="modal" aria-label="Close">
     <span aria-hidden="true">×</span>
 </button>

// Does not work
$('#btnclosemodal').click(); 

// Does not work
$("#btnclosemodal").trigger("click");

【问题讨论】：

控制台有错误吗？
主线程上的同步 XMLHttpRequest 已被弃用，因为它会对最终用户的体验产生不利影响。如需更多帮助，请查看xhr.spec.whatwg.org。加载资源失败：服务器响应状态为 404 () TypeError: Cannot set property 'unobtrusive' of undefined
加载资源失败：服务器响应状态为 404 () RangeError: Maximum call stack size exceeded.
所以，在这一点上，我想知道您是否在您拥有的 xhr 上遇到错误事件？你能在那里提醒或记录一些东西吗？
你认为这些错误对隐藏模态有影响吗？

标签： c# asp.net-core bootstrap-modal asp.net-ajax

【解决方案1】：

如果请求失败，将调用error 函数。我认为这里它不会进入错误函数，因为它正常返回部分视图。您可以使用 f12 并在源选项卡中对其进行调试。

相反，我认为您应该在成功函数中隐藏模态。

【讨论】：

当我的 ModelView 无效时，我的 Partial View 的返回发生了，因此调用了函数 erros。我使用 $('.modal-backdrop').hide(); 解决了我的问题$('#itemLoader').modal('dispose');顺便说一句，tks 的帮助。正如你告诉我的，我已经使用成功函数更改了一些代码。

【解决方案2】：

您可以尝试在错误时切换模式，如下所示： $('#itemLoader').modal('toggle');

【讨论】：

不起作用。不知道问题是不是和Partial View的使用有关。