Question

我在ASP.NET Web应用程序中使用ng-grid来显示来自WCF服务的数据。在这个Plunker示例中，数据存储在JSON文件中，然后由Angular模块转换。

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {


$scope.setPagingData = function(data, page, pageSize){  
    var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
    $scope.myData = pagedData;
    $scope.totalServerItems = data.length;
    if (!$scope.$$phase) {
        $scope.$apply();
    }
};

$scope.getPagedDataAsync = function (pageSize, page, searchText) {
    setTimeout(function () {
        var data;
        if (searchText) {
            var ft = searchText.toLowerCase();
            $http.get('largeLoad.json').success(function (largeLoad) {      
                data = largeLoad.filter(function(item) {
                    return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                });
                $scope.setPagingData(data,page,pageSize);
            });            
        } else {
            $http.get('largeLoad.json').success(function (largeLoad) {
                $scope.setPagingData(largeLoad,page,pageSize);
            });
        }
    }, 100);
};

$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

$scope.gridOptions = {
    data: 'myData',
    enablePaging: true,
    showFooter: true,
    enableCellSelection: true,
    enableCellEdit: true,
    enableRowSelection: false,
    totalServerItems:'totalServerItems',
    pagingOptions: $scope.pagingOptions,
    filterOptions: $scope.filterOptions
};
});

Plunker

这段代码很有趣，因为它直接从JSON文件中读取并动态地将其绑定到ng-grid。我希望我能够使用ASP.NET（C＃）代码隐藏将JSON文件传递给AngularJS代码并让它完成所有工作来解析它。

看起来你不能这样做，那么从ASP.NET传递数据到AngularJS的最佳方法是什么？

提前致谢。

Answer 1

您可以创建一个处理解析的Angular指令，然后在ASP.NET页面中传递一个JSON文件名，如下所示：

// ASP.NET page
<%
    JSONFile.Text = "path/to/json/file.json";
%>
<!DOCTYPE html>
<html>
<head runat="server">
    // including our parse-json directive as "metadata" in the head
    <parse-json data-json-file="<%JSONFile%>"></parse-json>
</head>
<body>
  ...
  ...
</body>
</html>

然后你的角度指令看起来像这样：

app.directive('parseJson', ['$http', function ($http) {
  return {
    restrict: 'E',
    scope: {
      jsonFile: '@'
    }
    link: function (scope) {
      $http.get('my/url/' + scope.jsonFile)
        .success(function (data) {
          // your parsing logic would go here.
        });
    }
  };
}]);

data属性上的data-json-file前缀是custom data attributes的HTML5标准。

所以，总结一下上面的代码。在我们的ASP.NET页面中，我们在html页面的<parse-json>中包含一个名为<head>的自定义标记（我们的角度指令）（它不必在那里，但它是sorta元数据，所以我认为它适合）。我们将属性data-json-file设置为等于服务器上JSON文件的路径。当客户端上出现角度加载时，它会请求这个JSON文件，然后从那里你可以随意做任何事情（在你的情况下，解析它）。

希望这有帮助！

Answer 2

您真正要问的问题是，如何将一些服务器端信息传递给Javasript？ Angular与此无关。

解决方案1 ：只需将其写入客户端变量即可。类似的东西：

如果你正在使用MVC：

var myJson = '@ViewBag.MyJson';
var json = JSON.parse(myJson);

如果您正在使用WebForms：

var myJson = '<% Response.Write(MyJson); %>';
var json = JSON.parse(myJson);

解决方案2 ：定义一个返回json字符串的服务器端方法，并使用Ajax从客户端调用它。然后像以前一样解析它。这是一个不错的例子here。

解决方案3 ：在将其加载到Angular之前，您是否无法从服务器端写入Json文件？

将数据从ASP.NET传递到AngularJS的最佳方法是什么？

2 个答案: