如何将 Ajax.BeginForm MVC 助手与 JSON 结果一起使用？答案

【问题标题】：How to use Ajax.BeginForm MVC helper with JSON result?如何将 Ajax.BeginForm MVC 助手与 JSON 结果一起使用？
【发布时间】：2010-09-23 04:26:36
【问题描述】：

我正在尝试使用 ASP.NET MVC Ajax.BeginForm 帮助程序，但不想在调用完成时使用现有的内容插入选项。相反，我想使用自定义 JavaScript 函数作为回调。

这可行，但我想要的结果应该以 JSON 形式返回。不幸的是，该框架只是将数据视为字符串。下面是客户端代码。服务器代码只返回一个带有一个字段的 JsonResult，UppercaseName。

<script type='text/javascript'>
    function onTestComplete(content) {
        var result = content.get_data();
        alert(result.UppercaseName);
    }
</script>

<% using (Ajax.BeginForm("JsonTest", new AjaxOptions() {OnComplete = "onTestComplete" })) { %>
    <%= Html.TextBox("name") %><br />
    <input type="submit" />
<%} %>

结果不是显示大写，而是显示未定义。 content.get_data() 似乎包含 JSON，但仅以字符串形式。如何将其转换为对象？

所有这一切似乎真的有点令人费解。有没有更好的方法来使用 Ajax.BeginForm 获取结果内容？如果这么难，我可能会完全跳过 Ajax.BeginForm，直接使用 jQuery 表单库。

【问题讨论】：

你能显示你的控制器动作的代码吗？
控制器操作不是问题。它实际上是一行： return Json(new {UppercaseName = name.ToUpper()});

标签： javascript asp.net-mvc asp.net-ajax

【解决方案1】：

您可以使用OnFailure 和OnSuccess 代替OnComplete； OnSuccess 将数据作为正确的 JSON 对象提供给您。您可以找到隐藏在~/Scripts/jquery.unobtrusive-ajax.min.js 中的回调方法签名，您应该将其加载到您的页面上。

在你的Ajax.BeginForm：

new AjaxOptions
    {
        OnFailure = "onTestFailure",
        OnSuccess = "onTestSuccess"
    }

脚本块：

<script>
//<![CDATA[

    function onTestFailure(xhr, status, error) {

        console.log("Ajax form submission", "onTestFailure");
        console.log("xhr", xhr);
        console.log("status", status);
        console.log("error", error);

        // TODO: make me pretty
        alert(error);
    }

    function onTestSuccess(data, status, xhr) {

        console.log("Ajax form submission", "onTestSuccess");
        console.log("data", data);
        console.log("status", status);
        console.log("xhr", xhr);

        // Here's where you use the JSON object
        //doSomethingUseful(data);
    }

//]]>
</script>

这些签名匹配success and error callbacks in $.ajax(...)，毕竟这可能并不令人惊讶。

这是使用 asp.net-mvc-3 和 jquery 1.6.3 和 1.7.2 测试的。

【讨论】：

【解决方案2】：

试试这个：

var json_data = content.get_response().get_object();

这将为您提供 JSON 格式的结果，您可以使用 json_data[0] 获取第一条记录

【讨论】：

好的，这行得通。然而，它似乎仍然令人费解。我不确定他们为什么不直接返回数据。
回应Brian的评论，他们“只是不直接返回数据”的原因是因为对象形式不是通过HTTP返回的数据的默认形式。当您进行 http 调用时，您会得到一个字符串。事实上，为了将它变成一个对象，您必须采取额外的步骤来使用 eval 函数对其进行评估。
那么 get_data() 应该做什么呢？
时代变了，所以对于asp.net-mvc-3，请使用onSuccess(data, status, xhr)查看我的回答。
@MaksimVi.: 一点也不惊讶 ;)

【解决方案3】：

尝试使用以下代码：

<script type='text/javascript'>
    function onTestComplete(content) {
        var result = eval( '(' + content.get_data() + ')' );
        alert(result.UppercaseName);
    }
</script>

【讨论】：

【解决方案4】：

我使用：

    function onTestComplete(data, status, xhr) {
       var data2 = JSON.parse(data.responseText);
       //data2 is your object
    }

【讨论】：

【解决方案5】：

确保您已包含 MicrosoftAjax.js 和 MicrosoftMvcAjax.js。然后在返回的上下文中使用以下调用从返回中获取一个 json 对象。

var json = context.get_data();
var data = Sys.Serialization.JavaScriptSerializer.deserialize(json);

【讨论】：

这些库现在是多余的，而且非常臃肿。我不想包括他们只是为了打一个像这样的小电话。一个更好的解决方案是纯 jquery，只使用包含的不显眼的 jquery 脚本。