ajaxStart 不会在 Razor 共享页面 .Net 3.1 中加载

Question

我正在尝试为我的项目中的所有 AJAX 请求加载一个 gif 微调器，但我遇到的问题是它根本无法加载。

在此之前，我将它包含在我需要的某些页面中，但现在我想将它全局放到我的所有页面中。在进行新更改之前它运行良好。

在我加载同一段 javascript 的其他视图中，它可以正常运行。

此时，我将我的 ajaxStart 和 ajaxStop 方法包含在位于我的 Views\Shared\_NavBar_DataUser.cshtml 的 Razor 页面中

如果有人遇到过与此类似的问题，如果您能给我一些有关如何解决此问题的提示，将非常感激。

   <nav>
        <div id="divLoading" class="HideLoader">
            <div>
                <img asp-append-version="true" src="~/Content/Img/loading.gif" />
            </div>
        </div>
    </nav>
    <!--Cargar Iframe Tarjeta Especialista -->
    <iframe frameborder="0" src='' name="genericIframe" id="genericIframe" style="display:none;"> 
     </iframe>

<script type="text/javascript">
    let divLoadAjax = window.frames.top.document.getElementById("divLoading") ?? document.getElementById("divLoading");
    console.log(divLoadAjax);
    $(document).ready(function () {
       
        $(document).ajaxStart(function () {
            let bodyHeight = $(divLoadAjax).closest("body").height();
            $(divLoadAjax).height(bodyHeight * 2); // multiplicamos por 2 para que pueda ocupar todo el espacio de la ventana
            $(divLoadAjax).show();
            let mobileTablet = window.matchMedia('(max-width: 1025px)').matches;
            if (!mobileTablet) {
                let profileNameHeight = document.querySelectorAll(".profile-name")[0].offsetHeight;
                let btnCvDoctorHeight = document.querySelectorAll(".btn-cv-doctor")[0].offsetHeight;
                let specTitleHeight = document.querySelectorAll(".btn-profile")[0].offsetHeight;
                let dayServiceHeight = document.querySelectorAll(".day-service")[0].offsetHeight;
                let buttonReservarMasCitasHeight = document.querySelectorAll(".input-group")[0].offsetHeight;
                let suma = 140 + profileNameHeight + btnCvDoctorHeight + specTitleHeight + dayServiceHeight + buttonReservarMasCitasHeight;
                $("#basicModal").css("height", suma);
            }
        }).ajaxStop(function () {
            $(divLoadAjax).hide();
        });
    });
</script>

Answer 1

我尝试把你的代码放到Shared/_Layout.cshtml中，然后任何页面都会加载js。

第 1 页：

我发现只有将$(document).ajaxStart(function ()移到$(document).ready(function ()之外时，即将发送Ajax请求，$(document).ajaxStart(function ()才会被触发。

<script>
        let divLoadAjax = window.frames.top.document.getElementById("divLoading") ?? document.getElementById("divLoading");
        console.log(divLoadAjax);
        $(document).ajaxStart(function () {
            let bodyHeight = $(divLoadAjax).closest("body").height();
            $(divLoadAjax).height(bodyHeight * 2); // multiplicamos por 2 para que pueda ocupar todo el espacio de la ventana
            $(divLoadAjax).show();
            let mobileTablet = window.matchMedia('(max-width: 1025px)').matches;
            if (!mobileTablet) {
                let profileNameHeight = document.querySelectorAll(".profile-name")[0].offsetHeight;
                let btnCvDoctorHeight = document.querySelectorAll(".btn-cv-doctor")[0].offsetHeight;
                let specTitleHeight = document.querySelectorAll(".btn-profile")[0].offsetHeight;
                let dayServiceHeight = document.querySelectorAll(".day-service")[0].offsetHeight;
                let buttonReservarMasCitasHeight = document.querySelectorAll(".input-group")[0].offsetHeight;
                let suma = 140 + profileNameHeight + btnCvDoctorHeight + specTitleHeight + dayServiceHeight + buttonReservarMasCitasHeight;
                $("#basicModal").css("height", suma);
            }
        }).ajaxStop(function () {
            $(divLoadAjax).hide();
        });
    </script>