Can you have 2 buttons in a form, when using Unobtrusive AJAX in Razor Pages?

Question

I have 2 OnPost handlers in the PageModel for a form, is there a way to run Unobtrusive AJAX with different post handlers on each button? I can't seem to find anything on this. Or is there a better way of achieving this through JQuery?

Both handlers seem to be doing the correct function, but I can only run one or the other currently using this method.

Here is what I have:

<form method="post" data-ajax="true" data-ajax-method="post" data-ajax-update="#panel">

            <input type="hidden" value="@Model.Options.Count()" name="optionCount" />
            <input type="hidden" value="@Model.Product.Name" name="product" />
            <input type="hidden" value="@Model.Product.ProductId" name="productId" />
            <input type="hidden" value="@Model.Headings" name="headings" />
            <input type="hidden" value="@Model.HeadingsString" name="headingsString" />
            <input type="hidden" value="@Model.Price" name="price" />

            @foreach (var item in Model.Headings.Select((value, index) => new { value, index }))
            {
                <div class="form-group">
                    <label class="control-label" id="headingA">@item.value</label>

                    @foreach (var option in Model.Options.Select((value, index) => new { value, index }))
                    {
                        if (item.index == option.index)
                        {
                            <select class="form-control" name="@item.index" asp-items="option.value"></select>
                        }
                    }
                </div>
            }
            <p>
                <strong>Price:</strong>
                <div id="panel">@Model.Price</div>
            </p>
            <button type="submit" class="btn btn-outline-primary">Calculate</button>

            <button class="btn btn-outline-primary" asp-page-handler="Cart">Add To Cart</button>
        </form>

Thanks for any info!

Answer 1

This is a hack, but seems to be working.

I only needed 1 AJAX post handler in my case, so I edited data-ajax="true/false", with JQuery button click event, which enabled the button (not needing AJAX) to post with its handler.

<form method="post" id="form" data-ajax-method="post" data-ajax-update="#panel">
            <input type="hidden" value="@Model.Options.Count()" name="optionCount" />
            <input type="hidden" value="@Model.Product.Name" name="product" />
            <input type="hidden" value="@Model.Product.ProductId" name="productId" />
            <input type="hidden" value="@Model.Headings" name="headings" />
            <input type="hidden" value="@Model.HeadingsString" name="headingsString" />
            <input type="hidden" value="@Model.Price" name="price" />


            @foreach (var item in Model.Headings.Select((value, index) => new { value, index }))
            {
                <div class="form-group">
                    <label class="control-label" id="headingA">@item.value</label>

                    @foreach (var option in Model.Options.Select((value, index) => new { value, index }))
                    {
                        if (item.index == option.index)
                        {
                            <select class="form-control" name="@item.index" asp-items="option.value"></select>
                        }
                    }
                </div>
            }
            <p>
                <strong>Price:</strong>
                <div id="panel">
                    <label id="price">@Model.Price</label>

                </div>
            </p>
            <button id="buttonAdd" type="submit" class="btn btn-outline-primary">Calculate</button>

            <button id="buttonRemove" class="btn btn-outline-primary" asp-page-handler="Cart">Add To Cart</button>
        </form>

The JQuery

<script>
$(document).ready(function () {
    $("#buttonAdd").click(function () {
        $("#form").attr("data-ajax", "true");
    });
});
$(document).ready(function () {
    $("#buttonRemove").click(function () {
        $("#form").attr("data-ajax", "false");
    });
});