使用内置功能在MVC6中使用JQuery AJAX提交剃须刀表单 [英] Submitting a razor form using JQuery AJAX in MVC6 using the built-in functionality

问题描述

我想知道是否存在使用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有一些更改，我想知道是什么推荐的新方法是在提交表单时在服务器上进行正常的AJAX发布，这意味着我将手动获取每个输入字段的值，将其转换为JSON并将其发送给控制器，以便一切将绑定到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.

如果我对AJAX使用以下JavaScript，那么是否有任何AJAX表单设置也很重要？

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标记助手（而不是@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不干扰Ajax 存在于Asp.Net GitHub存储库中，可以被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，只需添加这些属性即可表单标签如下：

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               |
+------------------------+-----------------------------+

另一个重大变化是您如何在服务器端检查请求是否确实是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上，您必须创建一个简单的扩展添加以前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;
}

这篇关于使用内置功能在MVC6中使用JQuery AJAX提交剃须刀表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！