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

Question

我正在尝试使用 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 表单库。

Answer 1

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

在您的Ajax.BeginForm中:

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

脚本 block :

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