gpt4 book ai didi

javascript - 使用内置功能在 MVC6 中使用 JQuery AJAX 提交 Razor 表单

转载 作者:IT王子 更新时间:2023-10-29 03:23:11 25 4
gpt4 key购买 nike

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

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

由于 MVC6 发生了一些变化,我想知道除了在提交表单时向服务器发送正常的 AJAX post 之外,推荐的新方法是什么。这意味着我将手动获取每个输入字段的值,将它们转换为 JSON 并将它们发送到 Controller ,这样所有内容都会绑定(bind)到 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 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;
}

关于javascript - 使用内置功能在 MVC6 中使用 JQuery AJAX 提交 Razor 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35202804/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com