如何在ASP.NET MVC中使用ng-repeat填充表格？

你遇到的空表格问题，核心原因是AngularJS无法直接访问Razor渲染的服务器端变量。你在Razor里定义的var list = ViewBag.userList as ArrayList;是服务器端的变量，而ng-repeat="user in list"是客户端AngularJS的指令——它只能读取AngularJS作用域（$scope或者controller as语法里的对象）里的变量，两者不在同一个上下文，所以Angular找不到list数据，自然渲染不出表格。

另外还有个小细节：你用了ArrayList这种非泛型集合，Razor在序列化的时候容易出类型问题，建议换成强类型的List<User>，处理起来更稳妥。

我们需要把服务器端的用户数据传递到AngularJS的作用域中，下面是具体的修改步骤：

1. 修正服务器端控制器代码 #

把ArrayList换成强类型的List<User>，让后续JSON序列化更可靠：

public class DashboardController : Controller 
{ 
    public IActionResult DashboardV6() 
    { 
        UserManager userManager = SchemaDataManager.getEntityDataManager<UserManager>(); 
        UserEntity[] users = (UserEntity[])userManager.getAll<UserEntity>(); 
        // 替换为强类型List<User>
        List<User> usersList = new List<User>(); 
        for (int i = 0; i < users.Length; i++) 
        { 
            User u = new User(); 
            u.token = users[i].token; 
            u.username = users[i].username; 
            u.createDate = users[i].createDate; 
            usersList.Add(u); 
        } 
        ViewBag.userList = usersList; 
        return View(); 
    } 

    public class User 
    { 
        public String token { get; set; } 
        public String username { get; set; } 
        public DateTime createDate { get; set; } 
    } 
}

2. 修改CSHTML代码，把服务器数据注入AngularJS作用域 #

这里提供两种常用方法，选一种适合你的场景即可：

方法一：通过JSON序列化把数据传递到Angular控制器 #

这种方法适合需要用AngularJS对数据进行动态增删改的场景：

@{ 
    Layout = null; 
    // 将服务器端的List序列化为JSON字符串
    var userJson = Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.userList); 
} 

<div class="panel panel-default"> 
    <div class="panel-heading"> Users Table </div> 
    <div class="panel-body"> 
        <!-- 用ng-init把JSON数据注入Angular控制器 -->
        <div ng-controller="DashboardV6Controller as table2" ng-init="table2.users = @Html.Raw(userJson)"> 
            <form ng-submit="table2.addUser()" class="form-inline"> 
                <table datatable="ng" dt-options="table2.dtOptions" dt-column-defs="table2.dtColumnDefs" class="row-border hover"> 
                    <thead> 
                        <!-- 表头部分保持不变 -->
                        <tr> 
                            <th> 
                                <div class="form-group"> 
                                    <label> 
                                        <input type="number" name="id" ng-model="table2.user2Add.userID" value="" class="form-control" /> 
                                    </label> 
                                </div> 
                            </th> 
                            <th> 
                                <div class="form-group"> 
                                    <label> 
                                        <input type="text" name="firstName" ng-model="table2.user2Add.userName" value="" class="form-control" /> 
                                    </label> 
                                </div> 
                            </th> 
                            <th> 
                                <div class="form-group"> 
                                    <label> 
                                        <input type="text" name="lastName" ng-model="table2.user2Add.userEmail" value="" class="form-control" /> 
                                    </label> 
                                </div> 
                            </th> 
                            <th> 
                                <div class="form-group"> 
                                    <button type="submit" class="btn btn-labeled btn-success"> 
                                        <span class="btn-label"> 
                                            <em class="fa fa-plus"></em> 
                                        </span>Add 
                                    </button> 
                                </div> 
                            </th> 
                        </tr> 
                        <tr> 
                            <th>User Token</th> 
                            <th>User Name</th> 
                            <th>Date</th> 
                            <th></th> 
                        </tr> 
                    </thead> 
                    <tbody> 
                        <!-- 现在遍历Angular控制器里的users变量 -->
                        <tr ng-repeat="user in table2.users"> 
                            <td>{{user.token}}</td> 
                            <td>{{ user.username }}</td> 
                            <td>{{ user.createDate | date:'yyyy-MM-dd HH:mm:ss' }}</td> 
                            <td> 
                                <button type="button" ng-click="table2.modifyUser($index)" class="btn btn-sm btn-warning"> 
                                    <em class="fa fa-edit"></em> 
                                </button> 
                                <button type="button" ng-click="table2.removeUser($index)" class="btn btn-sm btn-danger"> 
                                    <em class="fa fa-trash-o"></em> 
                                </button> 
                            </td> 
                        </tr> 
                    </tbody> 
                </table> 
            </form> 
        </div> 
    </div> 
</div>

<!-- 补充Angular控制器的基础定义 -->
<script>
angular.module('yourAppName').controller('DashboardV6Controller', function() {
    var vm = this;
    // 初始化users变量，后续会被ng-init赋值
    vm.users = [];
    
    // 你的其他业务方法
    vm.addUser = function() {
        // 实现添加逻辑
    };
    
    vm.modifyUser = function(index) {
        // 实现修改逻辑
    };
    
    vm.removeUser = function(index) {
        vm.users.splice(index, 1);
    };
});
</script>

方法二：直接用Razor渲染表格行 #

如果你的表格不需要AngularJS动态操作初始数据，也可以直接用Razor的foreach渲染服务器端数据：

@{ 
    Layout = null; 
    var usersList = ViewBag.userList as List<DashboardController.User>; 
} 

<div class="panel panel-default"> 
    <div class="panel-heading"> Users Table </div> 
    <div class="panel-body"> 
        <div ng-controller="DashboardV6Controller as table2"> 
            <form ng-submit="table2.addUser()" class="form-inline"> 
                <table datatable="ng" dt-options="table2.dtOptions" dt-column-defs="table2.dtColumnDefs" class="row-border hover"> 
                    <thead> 
                        <!-- 表头部分保持不变 -->
                        <tr> 
                            <th> 
                                <div class="form-group"> 
                                    <label> 
                                        <input type="number" name="id" ng-model="table2.user2Add.userID" value="" class="form-control" /> 
                                    </label> 
                                </div> 
                            </th> 
                            <th> 
                                <div class="form-group"> 
                                    <label> 
                                        <input type="text" name="firstName" ng-model="table2.user2Add.userName" value="" class="form-control" /> 
                                    </label> 
                                </div> 
                            </th> 
                            <th> 
                                <div class="form-group"> 
                                    <label> 
                                        <input type="text" name="lastName" ng-model="table2.user2Add.userEmail" value="" class="form-control" /> 
                                    </label> 
                                </div> 
                            </th> 
                            <th> 
                                <div class="form-group"> 
                                    <button type="submit" class="btn btn-labeled btn-success"> 
                                        <span class="btn-label"> 
                                            <em class="fa fa-plus"></em> 
                                        </span>Add 
                                    </button> 
                                </div> 
                            </th> 
                        </tr> 
                        <tr> 
                            <th>User Token</th> 
                            <th>User Name</th> 
                            <th>Date</th> 
                            <th></th> 
                        </tr> 
                    </thead> 
                    <tbody> 
                        <!-- 用Razor foreach渲染服务器端初始数据 -->
                        @foreach (var user in usersList)
                        {
                            <tr> 
                                <td>@user.token</td> 
                                <td>@user.username</td> 
                                <td>@user.createDate.ToString("yyyy-MM-dd HH:mm:ss")</td> 
                                <td> 
                                    <button type="button" ng-click="table2.modifyUser('@user.token')" class="btn btn-sm btn-warning"> 
                                        <em class="fa fa-edit"></em> 
                                    </button> 
                                    <button type="button" ng-click="table2.removeUser('@user.token')" class="btn btn-sm btn-danger"> 
                                        <em class="fa fa-trash-o"></em> 
                                    </button> 
                                </td> 
                            </tr>
                        }
                        <!-- Angular新增的行用ng-repeat渲染 -->
                        <tr ng-repeat="user in table2.newUsers"> 
                            <td>{{user.token}}</td> 
                            <td>{{ user.username }}</td> 
                            <td>{{ user.createDate | date:'yyyy-MM-dd HH:mm:ss' }}</td> 
                            <td> 
                                <button type="button" ng-click="table2.modifyUser($index)" class="btn btn-sm btn-warning"> 
                                    <em class="fa fa-edit"></em> 
                                </button> 
                                <button type="button" ng-click="table2.removeUser($index)" class="btn btn-sm btn-danger"> 
                                    <em class="fa fa-trash-o"></em> 
                                </button> 
                            </td> 
                        </tr> 
                    </tbody> 
                </table> 
            </form> 
        </div> 
    </div> 
</div>

• 如果你用的是ASP.NET Core，JsonConvert.SerializeObject需要引入Newtonsoft.Json包，可以通过NuGet安装。
• 用@Html.Raw(userJson)是为了避免Razor把JSON字符串转义成HTML实体，确保Angular能正确解析。
• 日期显示可以用Angular的date过滤器格式化，让展示更友好。

内容的提问来源于stack exchange，提问作者Keselme