使用内置功能在MVC6中使用JQuery AJAX提交剃刀表单

Question

我想知道是否有一种特定的方法在MVC6中使用jQuery AJAX提交表单,仍然使用ASP.NET MVC的Auto Binding功能.我相信其他版本的MVC你可以使用jquery.unobtrusive-ajax并简单地使用

@using (Ajax.BeginForm("SaveData", new AjaxOptions(){}

由于MVC6有一些变化,我想知道新的推荐方法是什么,除了在提交表单时向服务器执行正常的AJAX帖子.这意味着我将手动获取每个输入字段的值,将它们转换为JSON并将它们发送到控制器,以便所有内容都绑定到ViewModel.

如果我将以下JavaScript用于AJAX,那么任何AJAX表单设置都可以吗？

$('form').submit(function () {
    $.ajax({
        type: "POST",
        url: "/Products/Create/",
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    });
});

Answer 1

Ajax以相同的方式工作,但是使用新的MVC 6 Tag Helpers而不是@Ajax帮助器(不要忘记引用'jquery'和'jquery.unobtrusive-ajax'脚本).

JQuery Unobtrusive Ajax存在于Asp.Net GitHub存储库中,可以被Bower拉出.

使用新的MVC TagHelpers,您只需声明如下表单:

<form asp-controller="Home" asp-action="SaveForm" data-ajax="true" data-ajax-method="POST">
...
</form>

要在之前的MVC版本上使用Ajax Helper上存在的AjaxOptions,只需添加这些属性就可以像这样添加form标签:

<form asp-controller="Home" asp-action="SaveForm" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#content">
...
</form>
<div id="content"></div>

您可以在表单中使用的HTML属性(以前称为AjaxOptions)如下(原始源):

+------------------------+-----------------------------+
|      AjaxOptions       |       HTML attribute        |
+------------------------+-----------------------------+
| Confirm                | data-ajax-confirm           |
| HttpMethod             | data-ajax-method            |
| InsertionMode          | data-ajax-mode              |
| LoadingElementDuration | data-ajax-loading-duration  |
| LoadingElementId       | data-ajax-loading           |
| OnBegin                | data-ajax-begin             |
| OnComplete             | data-ajax-complete          |
| OnFailure              | data-ajax-failure           |
| OnSuccess              | data-ajax-success           |
| UpdateTargetId         | data-ajax-update            |
| Url                    | data-ajax-url               |
+------------------------+-----------------------------+

另一个重大变化是如果请求确实是一个AJAX请求,您在服务器端检查的方式.在以前的版本我们只是使用Request.IsAjaxRequest().

在MVC6上,您必须创建一个简单的扩展来添加以前MVC版本(原始源)上存在的相同选项:

/// <summary>
/// Determines whether the specified HTTP request is an AJAX request.
/// </summary>
/// 
/// <returns>
/// true if the specified HTTP request is an AJAX request; otherwise, false.
/// </returns>
/// <param name="request">The HTTP request.</param><exception cref="T:System.ArgumentNullException">The <paramref name="request"/> parameter is null (Nothing in Visual Basic).</exception>
public static bool IsAjaxRequest(this HttpRequest request)
{
  if (request == null)
    throw new ArgumentNullException("request");

  if (request.Headers != null)
    return request.Headers["X-Requested-With"] == "XMLHttpRequest";
  return false;
}