ASP.NET Core Razor Pages点击按钮禁用所有页面按钮问题排查

问题根源 #

你在DisableBtns函数里直接用btn1、btn2访问按钮是错误的——这些变量并非全局可用，浏览器无法识别，导致禁用逻辑根本没执行（可打开浏览器控制台查看ReferenceError报错）。而直接写在onsubmit属性里时，浏览器会在当前表单上下文里解析这些名称，所以能生效。

修复方案一：正确获取DOM元素 #

修改DisableBtns函数，通过选择器获取所有提交按钮并禁用：

<form method="post" onsubmit="DisableBtns()">
    <button class="btn btn-primary" type="submit" name="btn1">按钮1</button>
</form>

<form method="post" onsubmit="DisableBtns()">
    <button class="btn btn-primary" type="submit" name="btn2">按钮2</button>
</form>

<script>
    function DisableBtns() {
        alert("表单已提交");
        // 获取所有type为submit的按钮并禁用
        const submitButtons = document.querySelectorAll('button[type="submit"]');
        submitButtons.forEach(btn => btn.disabled = true);
        return true;
    }
</script>

修复方案二：适配Razor Pages的无侵入式写法（推荐） #

Razor Pages更推荐无侵入式JavaScript，避免inline事件绑定，同时适配多表单场景：

1. 给所有需要处理的表单添加统一类名，比如disable-on-submit
2. 用事件委托绑定提交事件：

<form method="post" class="disable-on-submit">
    <button class="btn btn-primary" type="submit" name="btn1">按钮1</button>
</form>

<form method="post" class="disable-on-submit">
    <button class="btn btn-primary" type="submit" name="btn2">按钮2</button>
</form>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 给所有目标表单绑定提交事件
        document.querySelectorAll('.disable-on-submit').forEach(form => {
            form.addEventListener('submit', function() {
                // 禁用页面所有提交按钮
                document.querySelectorAll('button[type="submit"]').forEach(btn => btn.disabled = true);
                // 若只需禁用当前表单的按钮，替换为：
                // this.querySelectorAll('button[type="submit"]').forEach(btn => btn.disabled = true);
            });
        });
    });
</script>

额外优化：结合Razor Pages特性的防重复提交 #

配合Razor Pages的Tag Helper，添加加载状态提示，提升用户体验：

<form method="post" class="disable-on-submit" asp-page-handler="Submit1">
    <button class="btn btn-primary" type="submit" name="btn1">
        <span class="btn-text">提交1</span>
        <span class="spinner-border spinner-border-sm d-none" role="status"></span>
    </button>
</form>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.disable-on-submit').forEach(form => {
            form.addEventListener('submit', function() {
                const allSubmitBtns = document.querySelectorAll('button[type="submit"]');
                allSubmitBtns.forEach(btn => {
                    btn.disabled = true;
                    // 显示加载状态
                    btn.querySelector('.btn-text').classList.add('d-none');
                    btn.querySelector('.spinner-border').classList.remove('d-none');
                });
            });
        });
    });
</script>

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