使用 Angular.js 显示 JsonResult答案

【问题标题】：Displaying JsonResult with Angular.js使用 Angular.js 显示 JsonResult
【发布时间】：2015-01-07 15:53:10
【问题描述】：

我正在熟悉 angular.js，使用 $Http.Get 从文件中返回 Json 数据似乎很容易。

在一个例子中，我会像这样得到我的 json 数据

var artistControllers = angular.module('artistControllers', []);

    artistControllers.controller('ListController', function ($scope, $http) {
    $http.get('json/jsonAngular.txt').success(function (data) {
    $scope.artists = data;
  });
});

例如，我如何获得 JsonResult 并将其分配给我的 $scope.artists。

    [HttpPost]
    public JsonResult GetArtists()
    {
        ViewModel model = new ViewModel();
        model.GetArtists();
        return Json(new
        {
            Artists = model.Artists
        });
    }

以我的班级为例

 public class Artist
{
    public string Initial { get; set; }
    public string Surname { get; set; }
}

是否有一个可行的示例说明我可以返回 JsonResult 并将其呈现在我的 html 中。

【问题讨论】：

你也没有。 JSON 数据 1:1 javascript 对象。因此，您的 json 数据已经绑定为 scope.artists 中的对象，并且可以在此范围内访问，如答案 1。

标签： javascript asp.net-mvc json angularjs

【解决方案1】：

会是这样的：

var artistsApp = angular.module('artistsApp', []);

artistsApp.controller('ListController', function ($scope, $http) {
    $http.get('api/getartists').success(function (data) {
         $scope.artists = data.artists;
    });
});

<ul>
  <li ng-repeat="artist in artists">{{ artist.Surname }}</li>
</ul>

如果 json/jsonAngular.txt 返回您的 json，那么您的其余代码就是代码。您可以像上面那样简单地通过 ng-repeat 访问它。

还请记住，您需要将视图与控制器相关联。这通常在您的 app.js 配置部分中完成。

$routeProvider
            .when('/', {
                controller: 'artistControllers',
                templateUrl: 'artists.html'
            })

注意：最佳做法是将控制器中的数据访问抽象到服务中，这样您就可以重复使用数据访问调用。

【讨论】：

谢谢。但是，我会进行服务器端调用以获取数据，而不是从文件中获取数据。如果对数据库进行调用，我将如何更改此行 $http.get('json/jsonAngular.txt') ？通过使用控制器方法 public JsonResult GetArtists()
如果您对您的服务器进行 GET 调用，情况也是如此。您将使用 $http 服务。如果你的代码在一个单独的服务中并且你注入你的数据上下文服务器，它有一个 getArtists() 方法，然后返回你的 ajax 的承诺，那么你的代码会更干净。

【解决方案2】：

你想要$scope.artists = data.artists;而不是$scope.artists = data;

【讨论】：