非AJAX方式在.NET 8 MVC Razor中实现加载spinner

场景1：页面加载完成前显示Spinner #

直接在全局布局页的<body>最开头插入全屏Spinner容器，默认显示，等页面所有资源加载完成后自动隐藏，无需修改单个视图。

实现步骤： #

1. 在_Layout.cshtml的<body>起始位置添加Spinner结构：

<div id="global-spinner" class="fullscreen-spinner">
    <div class="spinner-circle"></div>
    <p>加载中...</p>
</div>

2. 在全局CSS文件中添加样式：

.fullscreen-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255,255,255,0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    margin: 0;
    padding: 0;
}

.spinner-circle {
    width: 50px;
    height: 50px;
    border: 4px solid #e0e0e0;
    border-top-color: #2196f3;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

3. 在_Layout.cshtml的</body>前添加加载完成的隐藏逻辑：

window.addEventListener('load', () => {
    const spinner = document.getElementById('global-spinner');
    if (spinner) spinner.style.display = 'none';
});

场景2：请求发起后（表单/链接跳转）显示Spinner #

针对整页刷新的请求，在用户触发提交或跳转时立即显示Spinner，直到新页面加载完成，无需修改控制器代码。

实现步骤： #

复用上述Spinner结构，在_Layout.cshtml的</body>前添加事件监听代码：

// 监听表单提交事件
document.addEventListener('submit', (e) => {
    const form = e.target;
    // 跳过标记为AJAX的表单
    if (!form.classList.contains('skip-spinner')) {
        showSpinner();
        // 禁用提交按钮防止重复提交
        const submitBtn = form.querySelector('button[type="submit"], input[type="submit"]');
        if (submitBtn) submitBtn.disabled = true;
    }
});

// 监听链接点击事件
document.addEventListener('click', (e) => {
    const link = e.target.closest('a');
    if (link && !link.classList.contains('skip-spinner') && link.target !== '_blank') {
        // 跳过锚点跳转
        const href = link.getAttribute('href');
        if (href && !href.startsWith('#')) {
            showSpinner();
            // 禁用链接点击防止重复操作
            link.style.pointerEvents = 'none';
        }
    }
});

// 封装Spinner显示函数
function showSpinner() {
    const spinner = document.getElementById('global-spinner');
    if (spinner) spinner.style.display = 'flex';
}

灵活控制： #

• 如果有不需要触发Spinner的表单或链接，给元素添加skip-spinner类即可，JS会自动跳过。

内容的提问来源于stack exchange，提问作者Kenzo_Gilead