問題描述

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

I would like to know if there is a specific way to submit a form using jQuery AJAX in MVC6, still using the Auto Binding features of ASP.NET MVC. I believe in other versions of MVC you could use jquery.unobtrusive-ajax and simply use

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

由于 MVC6 發(fā)生了一些變化，我想知道除了在提交表單時向服務(wù)器執(zhí)行正常的 AJAX 發(fā)布之外，新推薦的方法是什么.這意味著我將手動獲取每個輸入字段的值，將它們轉(zhuǎn)換為 JSON 并將它們發(fā)送到控制器，以便所有內(nèi)容都綁定到 ViewModel.

Since there have been some changes with MVC6 I am wondering what the new recommended way to do this would be besides doing a normal AJAX post to the server when the form is submitted. This meaning I would manually get the values of each input field, turn them into JSON and send them over to the controller so everything will get bound to the ViewModel.

如果我將以下 JavaScript 用于 AJAX，那么任何 AJAX 表單設(shè)置是否重要?

If I use the following JavaScript for AJAX do any of the AJAX form settings even matter?

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

推薦答案

Ajax 的工作方式相同，但使用新的 MVC 6 Tag Helper 代替 @Ajax 幫助器(不要忘記引用 'jquery' 和 'jquery.unobtrusive-ajax 腳本).

Ajax works the same way, but instead of the @Ajax helper's, use the new MVC 6 Tag Helpers (don't forget to reference 'jquery' and 'jquery.unobtrusive-ajax' scripts).

JQuery Unobtrusive Ajax 存在于 Asp.Net GitHub repo 中，可以被 Bower 拉取.

JQuery Unobtrusive Ajax exists in the Asp.Net GitHub repo and can be Bower pulled.

使用新的 MVC TagHelpers，您只需聲明如下形式:

Using the new MVC TagHelpers, you simply declare the form like the following:

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

要使用以前 MVC 版本的 Ajax Helper 上存在的 AjaxOptions，只需添加這些屬性，執(zhí)行 form 標記，如下所示:

To use the AjaxOptions that existed on the Ajax Helper on previous MVC versions, just add those attributes do the form tag like this:

<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)如下(原文出處):

The HTML attributes (formerly AjaxOptions) that you can use in the form are the following (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               |
+------------------------+-----------------------------+

另一個重大變化是如何在服務(wù)器端檢查請求是否確實是 AJAX 請求.在以前的版本中，我們只是使用 Request.IsAjaxRequest().

Another significant change is how you check on the server side if the request is indeed an AJAX request. On previous versions we simply used Request.IsAjaxRequest().

在 MVC6 上，您必須創(chuàng)建一個簡單的擴展來添加與以前的 MVC 版本相同的選項(原文出處):

On MVC6, you have to create a simple extension to add the same options that existed on previous MVC versions (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;
}

這篇關(guān)于使用內(nèi)置功能在 MVC6 中使用 JQuery AJAX 提交剃刀表單的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！