У вас могут быть 2 кнопки в форме, когда вы используете Unobtrusive AJAX в Razor Pages?

Question

У меня есть 2 обработчика OnPost в PageModel для формы, есть ли способ запустить Unobtrusive AJAX с разными обработчиками записей на каждой кнопке? Кажется, я ничего не могу найти по этому поводу. Или есть лучший способ добиться этого с помощью JQuery?

Кажется, что оба обработчика выполняют правильную функцию, но я могу только запустить один или другой в настоящее время, используя этот метод.

Вот что у меня есть:

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

Спасибо за любую информацию!

Answer 1

Это хак, но, похоже, работает.

Мне нужен был только 1 AJAX обработчик записей в моем случае, поэтому я отредактировал data-ajax = "true / false", используя JQuery событие нажатия кнопки, которое позволило кнопке (не требующей AJAX) публиковать сообщения с ее обработчиком.

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

JQuery

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