单击后如何使用页面处理程序禁用 Razor 提交按钮并将其 POST 到正确的处理程序

Question

我在 Razor 页面上有一个表单，其中有 2 个提交按钮，每个按钮使用不同的页面处理程序。 我想禁用按钮并在单击时提交表单，将表单发布到单击按钮的正确页面处理程序。 我知道在没有表单处理程序的情况下使用 jQuery 是可以实现的，只是不确定如何让表单从 JavaScript 发布到正确的页面处理程序，或者是否有其他方法。

.CSHTML

<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>

。CS

public async Task<IActionResult> OnPostBudgetRevenueAsync()
{
    
}

public async Task<IActionResult> OnPostBudgetExpensesAsync()
{
    
}

Answer 1

页面处理程序方法的名称在 URL 中作为名为handler的查询字符串值默认传递，例如?handler=BudgetRevenue和?handler=BudgetExpenses - 除非您在页面的路由模板中有"{handler?}"标记，在这种情况下，处理程序方法的名称成为 URL 中的一个段： /BudgetRevenue或/BudgetExpenses 。

因此，使用 jQuery，将其传递给$.post方法：

$('#btnSaveRevenue').on('click', function(event){
    event.preventDefault();
    $.post('?handler=BudgetRevenue', $('#editBudgetForm').serialize(), function(response){
        // do whatever
    });
});