Using mutiple submit buttons with standard and AJAX form in ASP.NET Core Razor Pages

Using multiple submit buttons in ASP.NET Core

Multiple submit buttons in standard form

To use multiple submit buttons in standard web form, just add asp-page-handler="HandlerName" attribute to each submit button, and in the backend make sure to create the related handler OnPostHandlerName(). Below is a very simple web form with one input field and two submit buttons;

<form method="post">
    <input asp-for="Input.Name" class="form-control" />
    <button type="submit" asp-page-handler="SubmitA" class="btn btn-primary">Submit A</button>
    <button type="submit" asp-page-handler="SubmitB" class="btn btn-secondary">Submit B</button>
</form>

In the backend we create two methods for handling submitted form;

[ValidateAntiForgeryToken]
public IActionResult OnPostSubmitA()
{
    if (!ModelState.IsValid)
        return Page();

    TempData["msg"] = $"Welcome {Input.Name}, this is submit A";
    return Page();
}

[ValidateAntiForgeryToken]
public IActionResult OnPostSubmitB()
{
    if (!ModelState.IsValid)
        return Page();

    TempData["msg"] = $"Welcome {Input.Name}, this is submit B";
    return Page();
}

Multiple submit buttons in AJAX form

In order to use AJAX form first we have to include jquery.unobtrusive-ajax.js in the page, then we can add AJAX attributes to the form. In AJAX form, the value of asp-page-handler will not have any influence on the target handler, instead we can define data-ajax-url="?handler=MyHandlerName" inside the form tag. For using multiple submit buttons, we need different url for each button, so we can use a small jquery function to change the url value for each button as below;

<form method="post" id="myForm"
    data-ajax="true"
    data-ajax-method="post"
    data-ajax-failure="failed"
    data-ajax-update="#updateMsg">
    <input asp-for="Input.Name" class="form-control" />
    <button type="submit" id="ajaxSubmitA" class="btn btn-primary">Ajax Submit A</button>
    <button type="submit" id="ajaxSubmitB" class="btn btn-secondary">Ajax Submit B</button>
</form>

@section Scripts{

<script src="~/lib/jquery-ajax-unobtrusive/dist/jquery.unobtrusive-ajax.min.js"></script>
<script>
    failed = function (xhr) {
        alert('Status: {xhr.status}, Status text: {xhr.statusText}');
    }

    $("#ajaxSubmitA").on("click", function () {
        $("#myForm").attr("data-ajax-url", "?handler=AjaxSubmitA");
    });

    $("#ajaxSubmitB").on("click", function () {
        $("#myForm").attr("data-ajax-url", "?handler=AjaxSubmitB");
    });
</script>

In the backend we create two methods for handling submitted form;

[ValidateAntiForgeryToken]
public IActionResult OnPostAjaxSubmitA()
{
    if (!ModelState.IsValid)
        return Content("model is not valid");

    return Content($"Welcome {Input.Name}, this is AJAX submit A");
}

[ValidateAntiForgeryToken]
public IActionResult OnPostAjaxSubmitB()
{
    if (!ModelState.IsValid)
        return Content("model is not valid");

    return Content($"Welcome {Input.Name}, this is AJAX submit B");
}

This solution dosen't require to use javascript for serializing form values, even manually adding __requestVerificationToken header to the ajax call is not necessary.

Goto live demo