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结果作为字符串或＆＃39;文本＆＃39;您需要将dataType: "text"添加为$.ajax{}的选项。然后服务器以纯文本形式返回其响应，您可以使用jquery的parseJSON函数解析json。它将返回一个动态创建的对象，其中包含以json形式返回的数据。因此，您可以使用json字符串中包含的名称访问这些数据。

希望这会有所帮助。

Answer 2

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

但是如果你想返回数据并通过javascript使用它，则上述方法不足。相反，您需要设置OnSuccess对象的AjaxOptions方法。

从文档中可以看出，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>

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

2 个答案:

控制器方法：

HTML

javascript / jQuery