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

Question

我想知道在 MVC6 中是否有使用 jQuery AJAX 提交表单的特定方法，仍然使用 ASP.NET MVC 的自动绑定功能。我相信在其他版本的 MVC 中，您可以使用 jquery.unobtrusive-ajax 并简单地使用

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

由于 MVC6 发生了一些变化，我想知道除了在提交表单时对服务器执行正常的 AJAX post 之外，推荐的新方法是什么。这意味着我将手动获取每个输入字段的值，将它们转换为 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 以相同的方式工作，但不是 @Ajax 助手，而是使用新的 MVC 6 标签助手（不要忘记引用 '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>

要使用 Ajax 存在于以前 MVC 版本的 Ajax Helper 上的选项，只需添加这些属性来执行表单标记，如下所示：

<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 属性（以前称为 Ajax选项）如下 (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 版本 () 相同的选项：

/// <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, and you can download the project from this 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

Ajax标签助手

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

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

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

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

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

要使用操作 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>

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

Submitting a razor form using JQuery AJAX in MVC6 using the built-in functionality

javascript

ajax

asp.net-mvc

jquery

asp.net-core-mvc