Как правильно отформатировать вызов JsonResult

Question

Я использую метод действия JsonResult для передачи данных в мое представление cshtml с помощью вызова Angular $ http. Однако я не могу заставить мой Angular-код фильтровать / сортировать / отображать сериализованный объект так, как он должен.

Для проверки я вручную передал список Serializeable непосредственно в представление в качестве параметра ActionResult, сериализовал его с JsonConvert в блоке Razer в представлении, а затем передал эту строку 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>

Угловой:

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 в обоих случаях.

Answer 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>