AjaxOptions.HttpMethod = 在方法中获取结果=POST

Question

我有以下 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" 的目的是什么？

Answer 1

创建<form>标签的@Ajax.BeginForm() helper utilize jQuery unobtrusive AJAX library. If you examine the helper return type, it returns System.Web.Mvc.Html.MvcForm, the same return type as @Html.BeginForm()：

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

因为它的所有重载都没有在 System.Web.Mvc.FormMethod 枚举中指定 HTTP 请求的参数，它使用默认的 POST 请求，就像 @Html.BeginForm() 有，因此它也写 method="post" 用于默认表单方法，如果不显眼的 AJAX 脚本在客户端被禁用。

data-ajax-method 属性的目的是在不引人注目的 AJAX 启用时覆盖默认提交请求行为，因为它的值由 AjaxOptions.HttpMethod property, and checked by asyncRequest() method inside unobtrusive AJAX library (see complete version of the script here 设置):

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

注意：您可以在this reference.

中看到对应于AjaxOptions每个属性的属性列表

AjaxOptions.HttpMethod = 在方法中获取结果=POST

AjaxOptions.HttpMethod = GET results in method=POST

asp.net

ajax

asp.net-mvc

asp.net-ajax

asp.net-mvc-5