AjaxOptions.HttpMethod = GET results in method=POST - asp.net

Question

I have the following AjaxOptions object:
AjaxOptions ajaxOpts = new AjaxOptions
{
HttpMethod = "Get",
InsertionMode = InsertionMode.Replace
};
In the view I have this form:
#using (Ajax.BeginForm("GetPeopleData", ajaxOpts))
{
<div>
<button type="submit">Submit</button>
</div>
}
This results in the following HTML:
<form action="/People/GetPeopleData" data-ajax="true" data-ajax-method="Get" id="form0" method="post">
<div>
<button type="submit">Submit</button>
</div>
</form>
When I submit the form I can see that a GET request is sent.
Why does the HTML have data-ajax-method="Get" and method="post"?
What is the purpose of the method="post"?

Answer 1

The #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() which creates <form> tag:
public static MvcForm BeginForm(
this AjaxHelper ajaxHelper,
AjaxOptions ajaxOptions
)
Since all of its overloads don't have parameter which specify HTTP request in System.Web.Mvc.FormMethod enumeration, it uses default POST request like #Html.BeginForm() has, hence it also writes method="post" for default form method if unobstrusive AJAX script is disabled in client side.
The purpose of data-ajax-method attribute is to override default submit request behavior when unobtrusive AJAX enabled because its value set by 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);
}
});
Note: You can see list of attributes which corresponds to each properties of AjaxOptions in this reference.