获取 MVC 模型数据并将其传递给 AngularJS 控制器

Posted 2023-03-27

【中文标题】获取 MVC 模型数据并将其传递给 AngularJS 控制器

【英文标题】：Getting and passing MVC Model data to AngularJS controller

【发布时间】：2015-08-23 07:03:37

【问题描述】：

我对 AngularJS 很陌生，在这里我不知所措。

现在我的 MVC 程序使用 Razor 显示我的 .mdf 数据库中的所有数据（即：@Html.DisplayFor(modelItem => item.LastName)）。但是，我想主要使用 Angular。我正在尝试使用 ng-repeat 来显示所有模型数据，但我不确定如何将该模型数据传递给 Angular 控制器然后使用它。我曾尝试在我的 ng-init 中将模型序列化为 JSON，但我认为我做得不对（显然）。

这是我的代码：

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

我不确定我应该重复什么才能从序列化模型中获取名字。我觉得我拥有所有的部分，但不确定如何将它们连接起来。

【问题讨论】：

您对json 的回复如何？

【参考方案1】：

如果您的 Json 对象上有 firstName 键，例如：

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

您可以通过以下方式进行。

在您的控制器上：

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

在你看来：

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

【讨论】：

是的！做到了！我知道我已经很接近了，我只是在脑海里把它复杂化了。非常感谢，你救了我这么多的挫败感。我现在完全明白了。

我的数据是从一个服务器控件传递过来的，我使用的是 Razor，这个例子中有定义员工数据吗？

【参考方案2】：

感谢黑暗追猎者_010！

我感到困惑的是我的 Angular 控制器文件如何与视图交互。我所要做的只是将我的 .cshtml 文件中的 angular 数据视为我试图正常访问模型数据（即 model.AttributeName）

这是更新后的工作代码：

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

这是没有格式的样子：

【讨论】：

你可以对用户数据进行xss攻击