web-dev-qa-db-fra.com

Obtenir et transmettre les données du modèle MVC au contrôleur AngularJS

Je suis assez nouveau sur AngularJS et je suis perdu ici.

À l'heure actuelle, mon programme MVC utilise Razor pour afficher toutes les données de ma base de données .mdf (c'est-à-dire: @ Html.DisplayFor (modelItem => item.LastName)). Cependant, je veux aller principalement angulaire. J'essaie d'utiliser ng-repeat pour afficher toutes les données du modèle, mais je ne sais pas comment transmettre ces données du modèle au contrôleur Angular puis les utiliser. J'ai essayé de sérialiser le Modèle en JSON dans mon ng-init, mais je ne pense pas que je le fais bien (évidemment).

Voici mon code:

// controller-test.js

var myApp = angular.module('myModule', []);

myApp.controller('myController', function ($scope) {
    $scope.init = function (firstname) {
        $scope.firstname = firstname;
    }
});
<!-- Index.cshtml -->

@model IEnumerable<Test.Models.Employee>

@{
    ViewBag.Title = "Index";
}

<div ng-app="myModule">
    <div ng-controller="myController" ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model))">
         <table>
             <tr ng-repeat= <!--THIS IS WHERE I'M STUCK -->
         </table>
    </div>
</div>

<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/controller-test.js"></script>
@Scripts.Render("~/Scripts/angular.js")

Je ne sais pas exactement sur quoi je dois répéter pour obtenir le prénom du modèle sérialisé. J'ai l'impression d'avoir toutes les pièces, mais je ne sais pas comment les connecter.

javascriptasp.net-mvcangularjsrazorasp.net-mvc-5
21
Daath

Si vous avez la clé firstName sur votre objet Json comme:

{
 "employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter","lastName":"Jones"}
  ]
}

Vous pouvez le faire de la manière suivante.

Sur votre manette:

myApp.controller('myController', function ($scope) {
    $scope.init = function (employees) {
        $scope.employees = employees;
    }
});

À votre avis:

<table>
    <tr ng-repeat= "employee in employees">
        <td>{{ employee.firstName }}<td>
    </tr>
</table>
17
darkstalker_010

Merci à darkstalker_010!

Ce qui m'a dérouté, c'est la façon dont mes Angular ont interagi avec la vue. Tout ce que j'avais à faire était simplement de traiter mes données angular {{}} dans mon fichier .cshtml comme si j'essayais d'accéder normalement aux données du modèle (ie model.AttributeName)

Voici donc le code de travail mis à jour:

// controller-test.js

var myApp = angular.module('myModule', []);

myApp.controller('myController', function ($scope) {
    $scope.init = function (employees) {
        $scope.employees= employees;
    }
});
<!-- Index.cshtml -->

@model IEnumerable<Test.Models.Employee>

@{
    ViewBag.Title = "Index";
}

<div ng-app="myModule">
<div ng-controller="myController" data-ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model))">
            <table>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Title</th>
                    <th>Department</th>
                    <th>Email</th>
                </tr>
                <tr ng-repeat="e in employees">
                    <td>{{e.FirstName}}</td>
                    <td>{{e.LastName}}</td>
                    <td>{{e.Title}}</td>
                    <td>{{e.Department.DepartmentName}}</td>
                    <td>{{e.Email}}</td>
                </tr>
            </table>
</div>
</div>


<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/controller-test.js"></script>
@Scripts.Render("~/Scripts/angular.js")

Voici à quoi cela ressemble sans formatage:

capture

16
Daath