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

Question

I have a form on a Razor page with 2 submit buttons each using a different page handler. I'd like to disable the button and submit the form on click having the form post to the correct page handler for the button clicked. I know this is achievable using jQuery without the form handler, just not sure how to get the form to post to the correct page handler from JavaScript or if there is another approach.

.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

The name of the page handler method is passed in the URL as a query string value named handler by default eg ?handler=BudgetRevenue and ?handler=BudgetExpenses - unless you have a "{handler?}" token in your route template for the page, in which case the name of the handler method becomes a segment in the URL: /BudgetRevenue or /BudgetExpenses .

So using jQuery, you pass that to the $.post method:

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