將數據從ASP.NET傳遞到AngularJS的最佳方法是什么？

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
};
});

柱塞

這段代碼很有趣，因為它直接從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>

然后，您的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頁面中，我們在html頁面的<head>中包含了一個名為<parse-json>的自定義標記（我們的角度指令）（它不一定必須存在，但是它是一種元數據，所以我認為合適）。 我們正在將屬性data-json-file為等於服務器上JSON文件的路徑。 當在客戶端上加載angular時，它將請求此JSON文件，然后您可以從該文件中執行所需的任何操作（在您的情況下，對其進行解析）。

希望這可以幫助！

Answer 2

您真正要問的問題是，如何將一些服務器端信息傳遞給Javasript？ 此處的角度無關緊要。

解決方案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 ：在將文件加載到Angular之前，不能從服務器端寫入Json文件嗎？

將數據從ASP.NET傳遞到AngularJS的最佳方法是什么？

問題描述

2 個解決方案

解決方案1
0 2014-08-11 20:57:31

解決方案2
0 已采納 2014-08-11 21:14:33

將數據從ASP.NET傳遞到AngularJS的最佳方法是什么？

問題描述

2 個解決方案

解決方案1 0 2014-08-11 20:57:31

解決方案2 0 已采納 2014-08-11 21:14:33

解決方案1
0 2014-08-11 20:57:31

解決方案2
0 已采納 2014-08-11 21:14:33