我想知道是否有使用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" }); });
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()。
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; }