Javascript 每次提交页面时显示加载程序MVC Asp.net

如何在MVC Asp.net中每次提交页面时加载图像或文本？因此，基本上我不想在每个页面上重复代码，我希望在提交表单时显示一个图像或文本（无论表单在应用程序中的哪个位置），和/或以更好的方式让用户加载页面

以下是_layout.cshtml中的代码

<div class="spinner" style="display:none">
    <div class="center-div">
        <div class="inner-div">
            <div class="loader"></div>
        </div>
    </div>
</div>
@RenderBody()

@RenderBody（）

这是我编写的用于捕获所有提交按钮的JavaScript：

<script>
    $(document).ready(function () {
        $(document.querySelectorAll("button[type=button]")).click(function () {
            $('.spinner').css('display', 'block');
        });
    });
</script>

$（文档）.ready（函数（）{
$（document.querySelectorAll（“按钮[type=button]”）。单击（函数（）{
$（'.spinner'）.css（'display'，'block'）；
});
});

最后是一个简单的CSS：

<style>
    .center-div {
        width: 300px;
        height: 300px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -150px;
    }

    .spinner {
        position: fixed;
        z-index: 999;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background-color: Black;
        filter: alpha(opacity=60);
        opacity: 0.6;
        -moz-opacity: 0.8;
    }

    .loader {
        margin: auto;
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #15a0ec;
        border-bottom: 16px solid #15a0ec;
        width: 120px;
        height: 120px;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }

    .inner-div {
        background-color: white;
        border-radius: 15px;
        margin: auto;
        padding: 2%;
        width: 150px;
    }

    @@-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @@keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>

.中央分区{
宽度：300px；
高度：300px；
位置：绝对位置；
左：50%；
最高：50%；
左边距：-150px；
利润上限：-150px；
}
斯宾纳先生{
位置：固定；
z指数：999；
身高：100%；
宽度：100%；
排名：0；
左：0；
背景色：黑色；
过滤器：α（不透明度=60）；
不透明度：0.6；
-moz不透明度：0.8；
}
.加载器{
保证金：自动；
边框：16px实心#F3；
边界半径：50%；
边框顶部：16px固体#15a0ec；
边框底部：16px固体#15a0ec；
宽度：120px；
高度：120px；
-webkit动画：旋转2s线性无限；
动画：旋转2s线性无限；
}
.内分区{
背景色：白色；
边界半径：15px；
保证金：自动；
填充：2%；
宽度：150px；
}
@@-webkit关键帧旋转{
0% {
-webkit变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
}
}
@@关键帧旋转{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}

我试过了，但根本不起作用

---

提前感谢。

如果是Ajax表单提交：

$(document).ajaxSend(function (event, xhr, options) {

     $('.spinner').css('display', 'block');

}).ajaxComplete(function (event, xhr, options) {    

    $('.spinner').css('display', 'none');

}).ajaxError(function (event, jqxhr, settings, exception) {    

     $('.spinner').css('display', 'none');

});

这将在所有Ajax调用中处理loader

如果要在页面完全加载之前显示加载程序，则：

首先，从微调器div中删除“display:none”

  <div class="spinner">
        <div class="center-div">
            <div class="inner-div">
                <div class="loader"></div>
            </div>
        </div>
    </div> 

然后在JS中：

<script>
        $(window).on('load', function () {
            $('.spinner').css('display', 'none');            
        });
</script>

$（窗口）.on（'load'，函数（）{
$（'.spinner'）.css（'display'，'none'）；
});

我没有使用Ajax调用：（你想在内容加载之前显示加载器，然后隐藏它吗？基本上，当我从任何视图提交时，但如果你不使用Ajax，页面将重新加载，这不会解决你的目的。因此，除非我使用Ajax，否则当我从任何视图提交表单时，都无法在_布局中显示加载器？