MultipleSubmit - Live Demos

Multiple submit buttons

This sample shows two forms, one standard form that has two submit buttons 'Submit A' and 'Submit B', and another AJAX form with 'AJAX Submit A' and 'AJAX Submit B' buttons. Each button will submit to a different method. After submit the methods will return a msg to the user. Read the related article here.

1. Standard form


    <form method="post">
        <p>@TempData["msg"]</p>
        <div class="form-group">
            <input asp-for="Input.Name" class="form-control" />
            <span asp-validation-for="Input.Name" class="text-danger"></span>
        </div>
        <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>


    public class MultipleSubmitModel : PageModel
    {
        public class SampleModel
        {
            [Required]
            public string Name { get; set; }
        }

        [BindProperty]
        public SampleModel Input { get; set; }

        public void OnGet()
        {

        }

        [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();
        }
    }

2. AJAX form


<form method="post" id="myForm"
        data-ajax="true"
        data-ajax-method="post"
        data-ajax-loading="#loading"
        data-ajax-failure="failed"
        data-ajax-update="#updateMsg">
    <h3>
        Ajax form with multiple submit buttons
        <span id="loading" style="display:none;"> <i class="fas fa-spinner fa-spin"></i></span>
    </h3>
    <div class="form-group">
        <input asp-for="Input.Name" class="form-control" />
        <span asp-validation-for="Input.Name" class="text-danger"></span>
    </div>
    <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{
    <partial name="_ValidationScriptsPartial" />

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


    public class MultipleSubmitModel : PageModel
    {
        public class SampleModel
        {
            [Required]
            public string Name { get; set; }
        }

        [BindProperty]
        public SampleModel Input { get; set; }

        public void OnGet()
        {

        }

        [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");
        }
    }