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

小编典典

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

ajax

我想知道是否有使用MVC6中的jQuery AJAX提交表单的特定方法，仍然使用ASP.NET
MVC的自动绑定功能。我相信在其他版本的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"
    });
});

阅读 218

2020-07-26

共1个答案

小编典典

Ajax的工作方式相同，但使用新的MVC 6标记帮助器（而不是@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;
}

2020-07-26