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

Question

我想知道在 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"
    });
});

Answer 1

Ajax 的工作方式相同，但使用新的 MVC 6 Tag Helper 代替 @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）如下 (original source)：

+------------------------+-----------------------------+
|      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 版本 (original source) 中存在的相同选项：

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

Answer 2

这是一个非常好的YouTube tutorial on AJAX forms，您可以从这个GitHub link 下载项目。它包含用于 AJAX 的脚本。

从上述项目复制的示例样式：

<form asp-controller="Home1" asp-action="SaveForm" 
      data-ajax="true" 
      data-ajax-method="POST"
      data-ajax-mode="replace" 
      data-ajax-update="#content"
      data-ajax-loading  ="#divloading"
      data-ajax-success="Success"
      data-ajax-failure ="Failure">
    <div class="form-group">
        <div>  <h4>@Html.Label("Name")</h4> </div>
        <div>  @Html.TextBox("Name","",htmlAttributes:new { @class="form-control",id="Name"})</div>
    </div>
    <div class="form-group">
        <div><h4>@Html.Label("Age")</h4></div>
        <div>@Html.TextBox("Age", "", htmlAttributes: new { @class = "form-control", id ="Age" })</div>
    </div>
    <br/>
    <input type="submit" name="Submit"  class="btn btn-block btn-success" />
</form>

Answer 3

https://github.com/Behrouz-Goudarzi/AjaxTagHelper

AjaxTagHelper

在 aspnet core 中使用 Tag Helper 使用链接和 ajax 表单的简单解决方案

首先，将 AjaxTagHelper 类从 Extensions 文件夹复制到您的项目中。

其次，从 wwwroot 的 js 文件夹中复制 AjaxTagHelper.js 文件并将其添加到您的项目中。

然后执行以下操作：打开 viewImports 文件并添加以下代码

@using AjaxTagHelper.Extensions
@using AjaxTagHelper
@using AjaxTagHelper.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AjaxTagHelper

要使用 Action Ajax，请添加以下代码而不是标记。

  <ajax-action ajax-action="Delete" ajax-controller="Home" ajax-data-id="@Model.Id"
                 class="btn btn-danger btn-sm" ajax-success-func="SuccessDelete">
        Delete
    </ajax-action>

使用以下代码使用 AJAX 将表单发送到服务器。

<div class="row">
    <form id="frmCreate" class="col-sm-9">
        <div class="row">
            <div class="col-sm-4 form-control">
                <input placeholder="Enter Name" name="Name" class="input-group" type="text" />
            </div>
            <div class="col-sm-4 form-control">
                <input placeholder="Enter Family" name="Family" class="input-group" type="text" />
            </div>
            <div class="col-sm-4 form-control">
                <input placeholder="Enter Email@site.com " name="Email" class="input-group" type="email" />
            </div>
        </div>
    </form>
    <div class="col-sm-3">
        <ajax-button ajax-controller="Home" ajax-action="Create" ajax-form-id="frmCreate" ajax-success-func="SuccessCreate"
                     class="btn btn-sm btn-success">
            Create
        </ajax-button>
    </div>
</div>

最后添加需要查看的脚本，查看下方代码

<script>
    function SuccessCreate(data) {
        console.log(data);
        $("#tbodyPerson").append(data);


    }
    function SuccessDelete(data) {
        $("#tr" + data.id).fadeOut();
    }
</script>
<script src="~/js/AjaxHelper.js"></script>