如何点击后禁用Razor提交按钮并使表单POST至对应页面处理器

核心逻辑说明 #

Razor的asp-page-handler属性会自动给按钮加上name="handler"和value="对应处理器名"的属性，点击提交按钮时，浏览器会把这个按钮的handler参数一起POST到后端，后端就能自动匹配到对应的OnPostXXXAsync方法。所以不用手动修改表单的action，只需要处理按钮禁用和防止重复提交的逻辑即可。

实现代码 #

原生JS版本

给每个提交按钮绑定点击事件，点击后禁用自身：

<form id="editBudgetForm" method="post">
    <button type="submit" id="btnSaveRevenue" class="btn btn-primary" asp-page-handler="BudgetRevenue" title="Save the budget revenue.">
        Save Revenue
    </button>
    <button type="submit" id="btnSaveExpense" class="btn btn-primary" asp-page-handler="BudgetExpense" title="Save the budget expense.">
        Save Expense
    </button>
</form>

<script>
    document.querySelectorAll('#editBudgetForm button[type="submit"]').forEach(btn => {
        btn.addEventListener('click', function() {
            this.disabled = true;
            this.textContent = 'Saving...'; // 可选，给用户提交中的反馈
        });
    });
</script>

jQuery版本

如果习惯用jQuery，代码更简洁：

<form id="editBudgetForm" method="post">
    <button type="submit" id="btnSaveRevenue" class="btn btn-primary" asp-page-handler="BudgetRevenue" title="Save the budget revenue.">
        Save Revenue
    </button>
    <button type="submit" id="btnSaveExpense" class="btn btn-primary" asp-page-handler="BudgetExpense" title="Save the budget expense.">
        Save Expense
    </button>
</form>

<script>
    $('#editBudgetForm').on('click', 'button[type="submit"]', function() {
        $(this).prop('disabled', true).text('Saving...');
    });
</script>

重要提醒 #

你的后端代码里OnPostBudgetExpensesAsync多了个s，需要改成OnPostBudgetExpenseAsync，和按钮的asp-page-handler="BudgetExpense"对应，否则后端找不到匹配的处理器方法。

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