C# 将数据从ASP.NET传递到AngularJS的最佳方式是什么？_C#_Javascript_Asp.net_Json_Angularjs

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

c# javascript asp.net json angularjs

C# 将数据从ASP.NET传递到AngularJS的最佳方式是什么？,c#,javascript,asp.net,json,angularjs,C#,Javascript,Asp.net,Json,Angularjs,我在ASP.NET web应用程序中使用ng网格来显示来自WCF服务的数据。在这个Plunker示例中，数据存储在JSON文件中，然后由Angular模块进行转换 var app = angular.module('myApp', ['ngGrid']); app.controller('MyCtrl', function($scope, $http) { $scope.setPagingData = function(data, page, pageSize){ var pag

我在ASP.NET web应用程序中使用ng网格来显示来自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
};
});

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

您似乎无法做到这一点，那么从ASP.NET向AngularJS传递数据的最佳方式是什么？

提前感谢。

您可以创建一个处理解析的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.
        });
    }
  };
}]);

datajson文件

属性上的

data

前缀是的HTML5标准

因此，总结一下上面的代码。在我们的ASP.NET页面中，我们在html页面的

中包含了一个名为

的自定义标记（我们的angular指令）（它不一定存在，但它是排序元数据，所以我认为它适合）。我们正在将属性

data json file

设置为等于服务器上json文件的路径。当angular加载到客户机上时，它将请求这个JSON文件，然后从那里你可以对它做任何你想做的事情（在你的例子中，解析它）

希望这有帮助

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

解决方案1：只需将其写入客户端变量即可。比如：

如果您使用的是MVC：

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

如果您使用的是WebForms：

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

var myJson=''；
var json=json.parse（myJson）；

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

解决方案3：在将Json文件加载到Angular之前，您不能从服务器端写入Json文件吗？

您可以使用ASP.net Web API将c#对象序列化为Json，这可能是Angular js的最佳选择。或者您可以使用ASP.net MVC，尽管MVC本身更像是一个web框架，而不是一个APIC。感谢您的解决方案。最后，我使用ViewBag将JSON字符串传递给一个全局js变量。然后从我的angular脚本文件访问它。