如何正确格式化 JsonResult 调用答案

【问题标题】：How to properly format a JsonResult call如何正确格式化 JsonResult 调用
【发布时间】：2018-05-06 04:09:03
【问题描述】：

我正在使用 JsonResult 操作方法通过 Angular $http 调用将数据传递到我的 cshtml 视图中。但是，我无法让我的 Angular 代码以应有的方式过滤/排序/显示序列化对象。

为了测试，我手动将 Serializeable 列表作为 ActionResult 参数直接传递给视图，在视图中的 Razer 块中使用 JsonConvert 对其进行序列化，然后将该 Json 字符串直接传递给 Angular ng-init 函数。当我这样做时，一切都显示正常；我可以用 ng-repeat 建一个表，用 ng-show 过滤东西等等。

但是，当我尝试通过 return Json(list, JsonRequestBehavior.AllowGet); 传递相同的可序列化对象时，我所有触及该数据的 Angular 都会中断并且不执行任何操作或引发运行时错误。

这是完美运行的调试解决方法：

控制器：

public ActionResult Dashboard()
{   
    DashboardViewModel data = ServiceCache.GetData();

    return View(data);
}

观点：

@model EngineeringWorkflowBusiness.Models.DashboardViewModel

<main class="container" role="main" ng-controller="processModel">

    <div class="jumbotron" ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model.ItemList))">
           <tr ng-repeat="item in data">
                        <td>{{item.info}}</td>
    </div>

</main>

角度：

app.controller("processModel", function ($scope) {

    $scope.init = function (model) {
        $scope.data = model;
    };

});

这是我实际需要使用的方法，但根本不起作用，什么都不显示，表格是空的。

控制器：

    public JsonResult DataRefresh()
    {
        DashboardViewModel data = ServiceCache.GetData();

        return Json(data.ItemList, JsonRequestBehavior.AllowGet);
    }

观点：

@model EngineeringWorkflowBusiness.Models.DashboardViewModel

<main class="container" role="main" ng-controller="processModel">

    <div class="jumbotron" ng-init="GetData()">
           <tr ng-repeat="item in data">
                        <td>{{item.info}}</td>
    </div>

</main>

角度：

app.controller("processModel", function ($scope, $http) {

    $scope.GetData = function() {
        $scope.LoadData();
    };

    $scope.LoadData = function() {
        $http({
            method: "GET",
            url: '/Home/DataRefresh'
        }).then(function success(data) {
            $scope.data = data;
        }, function error(errResponse) {
            alert("ERROR!");
        });
    };  

});

对于 JsonResult 的工作原理，我一定有一些不明白的地方，因为据我所知，$scope.data 在这两种情况下都应该持有完全相同的 Json 字符串。

【问题讨论】：

标签： angularjs asp.net-mvc

【解决方案1】：

Angular $http 服务返回一个带有 data 属性的承诺对象，该属性具有来自您的 ajax 调用响应的响应主体。所以用那个

$scope.LoadData = function() {
    $http({
        method: "GET",
        url: '/Home/DataRefresh'
    }).then(function success(result) {
        $scope.data = result.data;
    }, function error(errResponse) {
        alert("ERROR!");
    });
};

另外，您的 HTML 标记似乎无效。如果要渲染表格行，它应该在 table 内，而不是 div

<table class="table" ng-init="GetData()">
    <tr ng-repeat="item in data">
        <td>{{item.info}}</td>
    </tr>
</table>

【讨论】：