如何将 JsonResult 与 Ajax 表单和 javascript 集成

Question

使用 MVC4，我将如何处理 Ajax 表单中 JsonResult 操作的返回值？

我能够找到的所有示例都主要处理 html 结果 (ActionResult)。

我知道这个问题的框架很差，缺少代码等，但我计划提供我的经验作为答案。希望这个问题和答案之间会有一些好的内容。

Answer 1

在 ASP.net 控制器 (C#) 中，您可以按如下方式返回 json 结果（希望您已经知道）。

[httppost]
public ActionResult MyAction(){
    //this is the most amazing content

    return Json(new
    {
        MyResult = "ok",
        MyData = "This is some string data!"
    });
}

我不清楚您对答案的期望，或者我不确定这是否是您需要的答案，但希望它会有所帮助。

如果你使用的是jquery ajax，你可以访问控制器并获取它返回的json结果。

$.ajax({
    type: "POST",
    URL: "/MyController/MyAction",
    dataType: "text"
})
.success(function(data){
    var dataobj = $.parseJSON(data);
    var result = dataobj.MyResult;
    var msg = dataobj.MyData;
});

当您使用return new Json(); 时，服务器响应是 ContentType application/json。但是，要正确使用 Jquery 的 parseJSON 函数，您需要将 json 作为字符串传递给函数，否则无法正确解析。因此，要将 json 结果作为字符串或“文本”获取，您需要将 dataType: "text" 作为选项添加到 $.ajax{}。然后服务器将其响应作为纯文本返回，您可以使用 jquery 的 parseJSON 函数解析 json。它将返回一个动态创建的对象，其中包括以 json 形式返回的数据。因此，您可以使用 json 字符串中包含的名称访问这些数据。

希望这会有所帮助。

Answer 2

因此，网络上的大多数示例/教程都会指导您通过 HttpPost 操作方法返回视图。执行此操作时，您将在 AjaxOptions 对象上设置 'UpdateTargetId' 和 InsertionMode 属性。

但是如果你想返回 data 并通过 javascript 使用它，上面的方法就不够用了。 相反，您需要设置AjaxOptions 对象的OnSuccess 方法。

从文档中可以看出，OnSuccess 包含零有用信息。要正确使用它，您需要提供当前页面上可用的 javascript 函数的名称。这将使用回调样式，因此请确保为您的用例使用适当的语法。

这里有一个小示范：

控制器方法：

<HttpGet>
Function AjaxIndex() As ActionResult

    Dim model As AjaxFormModel = New AjaxFormModel
    ' AjaxFormModel is a custom class.  Architect it as you see fit.

    Return View(model)

End Function

<HttpPost>
Function AjaxIndex(ByVal model As AjaxFormModel) As JsonResult

    Dim result As AjaxFormResult = Nothing    
    ' AjaxFormResult is a custom class.  Fill it in with properties that make sense for you.  I personally include .MessageType and .Payload properties.

    ' TODO: be sure you spin up a new object to pass to the `JsonResult`.

    Return New JsonResult With {.Data = result, .JsonRequestBehavior = JsonRequestBehavior.AllowGet}

End Function

HTML

Using Ajax.BeginForm("AjaxIndex", "Bootstrap",
                     routeValues:=Nothing,
                     ajaxOptions:=New AjaxOptions With {.HttpMethod = "POST",
                                                        .OnSuccess = "updateAjaxForm"},
                     htmlAttributes:=Nothing)
    @<text>
        <div class="row">
            <div class="col-sm-12" id="UnknownError_message">

            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <input type="text" name="Name" />
                <div id="Name_message"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <input type="submit" class="btn btn-default" value="Save" />
            </div>
        </div>
    </text>
End Using

javascript/jQuery

​​>

<script type="text/javascript">
    function updateAjaxForm(data) {
        //data is a fully reconstituted javascript object at this point.  Thank you MVC!
        var messageElement = $('#UnknownError_message');

        switch (data.MessageType) {
            case 0:         //  Error message
                messageElement.html('Error: ' + data.Message);
                break;

            case 1:     //  Textual message
                messageElement.html('Info: ' + data.Message);
                break;

            default:
                messageElement.html('Unforseen Error.');
        }
    }
</script>