ASP.NET Core Razor Pages 如何点击登录后显示加载图标或禁用按钮直至登录完成

1. 前端页面（login.cshtml）修改 #

你只需要调整前端页面的结构和脚本，后端login.cshtml.cs的逻辑不需要做改动，具体操作如下：

• 首先在页面中加入加载提示的样式和DOM元素，默认隐藏
• 给登录表单绑定submit事件，触发后禁用登录按钮、显示加载提示

下面是完整可直接复用的代码示例，不依赖任何第三方库：

@* 加载动画样式 *@
<style>
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#loadingTip {
  display: none;
  vertical-align: middle;
  margin-left: 10px;
}
</style>

@* 登录表单，和你原有表单逻辑兼容，只需要补充id和加载提示元素 *@
<form method="post" id="loginForm">
    @* 保留你原有的账号、密码、验证码等表单字段 *@
    <div class="form-group">
        <button type="submit" id="loginBtn">登录</button>
        <span id="loadingTip">
            <span class="spinner"></span>
            登录中，请稍候...
        </span>
    </div>
</form>

@* 交互脚本 *@
<script>
const loginForm = document.getElementById('loginForm');
const loginBtn = document.getElementById('loginBtn');
const loadingTip = document.getElementById('loadingTip');

loginForm.addEventListener('submit', function () {
    // 禁用按钮防止重复提交
    loginBtn.disabled = true;
    // 显示加载提示
    loadingTip.style.display = 'inline-block';
    // 传统表单提交无需额外处理，提交后页面会等待后端响应后自动跳转/刷新
});
</script>

2. 异步登录场景适配 #

如果你用的是AJAX异步提交登录的方式，只需要在上述脚本的submit事件中阻止默认提交行为，在请求结束的回调中恢复按钮状态即可：

loginForm.addEventListener('submit', function (e) {
    e.preventDefault();
    loginBtn.disabled = true;
    loadingTip.style.display = 'inline-block';

    // 你的异步登录请求逻辑
    fetch(loginForm.action, {
        method: 'POST',
        body: new FormData(loginForm),
        headers: {
            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
        }
    }).then(res => res.json()).then(result => {
        // 处理登录成功/失败逻辑
    }).finally(() => {
        // 登录流程结束后恢复按钮、隐藏加载提示
        loginBtn.disabled = false;
        loadingTip.style.display = 'none';
    });
});

注意事项 #

• 后端登录验证失败返回原页面时，页面会自动重载，按钮和加载提示会恢复默认状态，无需额外处理
• 禁用登录按钮的逻辑可以避免用户短时间内重复提交多次请求，降低后端异常风险

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