如何使用带有 JSON 结果的 Ajax.BeginForm MVC 助手？

IT技术 javascript asp.net-mvc asp.net-ajax
2021-03-08 23:12:52

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

5个回答

您可以使用OnFailureandOnSuccess代替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>

这些签名在 $.ajax(...) 中匹配success和error回调，毕竟这可能并不令人意外。

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

试试这个： 

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

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

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

尝试使用以下代码：

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

我用： 

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

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

var json = context.get_data();
var data = Sys.Serialization.JavaScriptSerializer.deserialize(json);
这些库现在是多余的，而且非常臃肿。我不想包括他们只是为了打一个这样的小电话。更好的解决方案是使用包含的不显眼的 jquery 脚本的纯 jquery。
2021-04-20 23:12:52
其它你可能感兴趣的问题
上一篇如何使用javascript选择元素的所有子元素并更改CSS属性？ 下一篇document.querySelector(...) 为空错误