Question

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

要测试我手动将Serializeable列表作为ActionResult参数直接传递给视图，在视图中的Razer块中使用JsonConvert对其进行序列化，然后将该Json字符串直接传递给角度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>

The Angular：

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>

The Angular：

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字符串。

Answer 1

Angular $http服务返回一个带有data属性的promise对象，该属性具有来自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>

如何正确格式化JsonResult调用

1 个答案: