AjaxOptions.HttpMethod = GET приводит к методу = POST - PullRequest
0 голосов
/ 03 сентября 2018

У меня есть следующий AjaxOptions объект:

AjaxOptions ajaxOpts = new AjaxOptions
{        
    HttpMethod = "Get",
    InsertionMode = InsertionMode.Replace
};

В представлении у меня есть эта форма:

@using (Ajax.BeginForm("GetPeopleData", ajaxOpts))
{
    <div>            
        <button type="submit">Submit</button>
    </div>
}

Это приводит к следующему HTML:

<form action="/People/GetPeopleData" data-ajax="true" data-ajax-method="Get" id="form0" method="post">
    <div>            
        <button type="submit">Submit</button>
    </div>
</form>

Когда я отправляю форму, я вижу, что запрос GET отправлен.

Почему в HTML есть data-ajax-method="Get" и method="post"? Какова цель method="post"?

1 Ответ

0 голосов
/ 04 сентября 2018

Помощник @Ajax.BeginForm() использует ненавязчивую библиотеку AJAX jQuery. Если вы изучите вспомогательный тип возврата, он вернет System.Web.Mvc.Html.MvcForm, тот же тип возврата, что и @Html.BeginForm(), который создает тег <form>:

public static MvcForm BeginForm(
    this AjaxHelper ajaxHelper,
    AjaxOptions ajaxOptions
)

Поскольку все его перегрузки не имеют параметра, который указывает HTTP-запрос в перечислении System.Web.Mvc.FormMethod, он использует запрос по умолчанию POST, как @Html.BeginForm(), следовательно, он также записывает method="post" для метод формы по умолчанию, если ненавязчивый скрипт AJAX отключен на стороне клиента.

Цель атрибута data-ajax-method состоит в том, чтобы переопределить поведение запроса на отправку по умолчанию, когда ненавязчивый AJAX включен, поскольку его значение установлено свойством AjaxOptions.HttpMethod и проверено методом asyncRequest() в ненавязчивой библиотеке AJAX (см. полная версия скрипта здесь ):

function asyncRequest(element, options) {
    var confirm, loading, method, duration;

    confirm = element.getAttribute("data-ajax-confirm");
    if (confirm && !window.confirm(confirm)) {
        return;
    }

    loading = $(element.getAttribute("data-ajax-loading"));
    duration = parseInt(element.getAttribute("data-ajax-loading-duration"), 10) || 0;

    $.extend(options, {
        type: element.getAttribute("data-ajax-method") || undefined, // here AJAX method is checked (GET or POST)
        url: element.getAttribute("data-ajax-url") || undefined,
        cache: (element.getAttribute("data-ajax-cache") || "").toLowerCase() === "true",
        beforeSend: function (xhr) {
            var result;
            asyncOnBeforeSend(xhr, method);
            result = getFunction(element.getAttribute("data-ajax-begin"), ["xhr"]).apply(element, arguments);
            if (result !== false) {
                loading.show(duration);
            }
            return result;
        },
        complete: function () {
            loading.hide(duration);
            getFunction(element.getAttribute("data-ajax-complete"), ["xhr", "status"]).apply(element, arguments);
        },
        success: function (data, status, xhr) {
            asyncOnSuccess(element, data, xhr.getResponseHeader("Content-Type") || "text/html");
            getFunction(element.getAttribute("data-ajax-success"), ["data", "status", "xhr"]).apply(element, arguments);
        },
        error: function () {
            getFunction(element.getAttribute("data-ajax-failure"), ["xhr", "status", "error"]).apply(element, arguments);
        }
});

Примечание: Вы можете увидеть список атрибутов, который соответствует каждому свойству AjaxOptions в этой ссылке .

...