Was ist der beste Weg, um die übergabe von Daten aus ASP.NET zu AngularJS?

Ich bin mit ng-Gitter in einem ASP.NET web-Anwendung zum anzeigen von Daten, die von einem WCF Service. In diesem Plunker Beispiel werden die Daten in eine JSON-Datei und dann konvertiert, indem die Winkel-Modul.

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

Dieses Stück code war interessant, denn es Lesen dicrectly aus einer JSON-Datei und dynamisch gebunden an die ng-raster. Ich hatte gehofft, dass ich wäre in der Lage zu verwenden, die ASP.NET (C#) codebehind-pass eine JSON-Datei auf der AngularJS-code und lassen Sie es tun all die Arbeit, die zu analysieren es.

Es scheint, dass Sie dies nicht können, so was ist der beste Weg, um die übertragung von Daten von AngularJS ASP.NET?

Vielen Dank im Voraus.

  • Sie können serialisieren c# - Objekte in json verwenden ASP.net Web-Apis, die ist wahrscheinlich die beste option mit angular js. Oder Sie verwenden können ASP.net MVC, obwohl MVC ist eher ein web-framework selbst als eine API
InformationsquelleAutor georgeaf99 | 2014-08-11
  1. 0

    Sich die Frage, sind Sie wirklich Fragen, ist, wie gebe ich einige server-Seite Informationen wenn javascript? Winkel ist hier irrelevant.

    Lösung 1: schreiben Sie einfach in eine client-side-variable. So etwas wie:

    Wenn Sie MVC:

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

    Wenn Sie mit WebForms:

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

    Lösung 2: definieren Sie einen server-side-Methode, wird das json-string, und rufen Sie es von der client-Seite mit Ajax. Dann analysiert werden, wie zuvor. Es ist ein anständiges Beispiel hier.

    Lösung 3: können Sie nicht schreiben, um Ihre Json-Datei von der server-Seite, bevor Sie geladen werden in Eckige?

    • Vielen Dank für die Lösung. Ich landete mit der ViewBag mein JSON-string in eine Globale js-variable. Anschließend erfolgt der Zugriff auf Sie aus meinem Winkel-Skript-Datei.
    InformationsquelleAutor draconis
  2. 0

    Können Sie eine Eckige Richtlinie, die Griffe analysieren, und dann geben Sie eine JSON-Datei in Ihrem Namen ASP.NET Seite, wie diese:

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

    Werden und dann die Winkel-Richtlinie könnte etwa so Aussehen:

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

    Den data Präfix auf der data-json-file Attribut ist der HTML5-standard für custom data attributes.

    Also, um zusammenzufassen, den code oben. In unserem ASP.NET Seite sind wir auch ein eigenes tag (unsere Winkel-Richtlinie) genannt <parse-json> im <head> unserer html-Seite (es muß nicht sein, aber es ist sorta Metadaten, so dass ich dachte, es passen). Wir setzen das Attribut data-json-file gleich den Pfad der JSON-Datei auf unseren server. Wenn kantigen Lasten auf dem client, wird diese Anfrage JSON-Datei, und dann von dort aus können Sie tun was Sie will (in Ihrem Fall analysiert).

    Hoffe, das hilft!

    InformationsquelleAutor pje
Schreibe einen Kommentar