JsonResult 和 ajax.BeginForm 的区别

Question

我想了解 JsonResult 和 Ajax.BeginForm 工作之间的区别？有人可以提供每个示例吗？每一个的功能都可以用JQuery来完成吗？如果有，怎么做？

谢谢

Answer 1

JsonResult 只是一种ActionResult 派生类，表示此操作将返回 JSON 而不是视图或其他内容。

例如：

public ActionResult Foo()
{
    var model = new MyViewModel
    {
        Foo = "bar"
    };
    return Json(model);
}

此控制器操作在调用时返回模型的 JSON 序列化表示：

{"Foo":"bar"}

除此之外，它还将Content-Type HTTP 响应标头设置为application/json。

Ajax.BeginForm 是一个 HTML 帮助程序，用于生成 <form> 元素，但将使用 AJAX 将其提交到服务器。因此，如果您将此表单指向返回 JSON 的控制器操作，您将能够在成功回调中检索此 JSON 的结果。结果将被自动解析成一个 javascript 对象，您可以访问它的属性。

例如：

@using (Ajax.BeginForm("foo", "home", new AjaxOptions { OnSuccess = "onSuccess" }))
{
    @Html.EditorFor(x => x.SomeProperty)
    <button type="submit">OK</button>
}

这将生成一个<form> 元素，该元素将在提交到Foo 操作时发送一个AJAX 请求。为此，您需要在页面中包含以下脚本：

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

现在剩下的就是编写这个onSuccess javascript函数并处理服务器返回的JSON结果：

<script type="text/javascript">
    var onSuccess = function(result) {
        alert(result.Foo);
    };
</script>

---

每个的功能都可以用JQuery来完成吗？

在您包含jquery.unobtrusive-ajax.js 的幕后，使用Ajax.* 助手生成的所有表单或链接将自动被jQuery 解析和AJAXified。这些助手生成的 HTML5 data-* 属性将被处理并转换为 AJAX 调用。

您当然可以决定使用纯 jQuery 并且不使用任何 Ajax.* 助手。在这种情况下，您不需要包含 jquery.unobtrusive-ajax.js 脚本。您不需要使用任何 Ajax.* 助手。

要生成表单，您可以使用普通的Html.BeginForm 助手：

@using (Html.BeginForm("foo", "home", FormMethod.Post, new { id = "myform" }))
{
    @Html.EditorFor(x => x.SomeProperty)
    <button type="submit">OK</button>
}

然后在一个javascript文件中使用jQuery订阅该表单的.submit事件，通过返回false取消默认同步提交，改为发送AJAX请求：

$(function() {
    $('#myform').submit(function(){
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function(result) {
                alert(result.Foo);
            }
        });
        return false;
    });
});