从ASP传递数据的最佳方式是什么?. NET转换为AngularJS

本文关键字：是什么 NET 转换 AngularJS 方式 最佳 ASP 数据 | 更新日期: 2023-09-27 18:17:26

我在ASP中使用ng-grid。. NET web应用程序显示来自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-grid。我希望我能使用ASP。. NET (c#)代码隐藏，将JSON文件传递给AngularJS代码，并让它完成解析它的所有工作。

似乎你不能这样做，那么从ASP.NET传递数据到AngularJS的最佳方式是什么?

从ASP传递数据的最佳方式是什么?. NET转换为AngularJS

您真正要问的问题是，我如何将一些服务器端信息传递给javascript ?这里与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从客户端调用它。然后像前面一样解析它。这里有一个很好的例子。

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

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

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

然后你的angular指令可以像这样:

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-json-file属性的data前缀是自定义数据属性的HTML5标准。

所以，总结一下上面的代码。在我们的ASP。. NET页面我们包括一个自定义标签(我们的角指令)命名为<parse-json>在我们的html页面的<head>(它不需要在那里，但它是一种元数据，所以我认为它适合)。我们将属性data-json-file设置为等于服务器上JSON文件的路径。当angular加载到客户端时，它会请求这个JSON文件，然后从那里你可以对它做任何你想做的事情(在你的例子中，解析它)。

希望这对你有帮助!

相关文章：