如何在MVC视图中使用AngularJS/AJAX展示控制器返回的后端数据

首先确认你的MVC后端已经可以正常返回JSON格式的PDA状态数据，我们可以按照以下步骤改造原有Razor视图，用AngularJS+AJAX实现数据拉取和渲染：

第一步：调整后端控制器，新增JSON数据接口 #

在你现有CRUD逻辑所在的控制器中，新增一个专门给前端提供JSON数据的接口，示例代码如下：

// 示例控制器名假设为PDAStatusController
public ActionResult GetOutstandingPDA()
{
    // 这里替换为你现有的查询未归还PDA的逻辑，过滤IsReturn==false的数据
    var data = db.PDAStatus.Where(x => x.IsReturn == false).ToList();
    return Json(data, JsonRequestBehavior.AllowGet);
}

第二步：改造原有Razor视图 #

2.1 引入AngularJS依赖 #

在视图头部引入本地存放的AngularJS脚本文件即可。

2.2 替换原有Razor渲染逻辑为AngularJS语法 #

完整改造后的视图代码如下：

<!-- 给根元素添加ng-app指令，声明Angular应用 -->
<div ng-app="pdaApp" ng-controller="pdaController" class="row justify-content-center">
    <div class="col-md-12">
        <h2>查看未归还PDA</h2>
        <div class="panel">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-md-12">
                        <a href="#" class="btn btn-sm btn-primary pull-left"><i class="fa fa-plus-circle"></i>新增</a>
                    </div>
                </div>
            </div>
            <div class="panel-body table-responsive">
                <div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">操作</th>
                                <th scope="col">员工工号</th>
                                <th scope="col">员工姓名</th>
                                <th scope="col">PDA条码</th>
                                <th scope="col">领用日期</th>
                                <th scope="col">归还日期</th>
                                <th scope="col">剩余天数</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 用ng-repeat替代Razor的foreach循环，遍历pdaList数组 -->
                            <tr ng-repeat="item in pdaList">
                                <td>
                                    <ul class="action-list">
                                        <li><a href="/PDAStatus/Update/{{item.Id}}" class="btn btn-primary"><i class="fa fa-pencil"></i></a></li>
                                        <li><a href="/PDAStatus/Delete/{{item.Id}}" class="btn btn-danger"><i class="fa fa-times"></i></a></li>
                                    </ul>
                                </td>
                                <td>{{item.EmployeeCardNo}}</td>
                                <td>{{item.EmployeeName}}</td>
                                <td>{{item.PDABarcode}}</td>
                                <td>{{item.WithdrawDate | date:'yyyy-MM-dd'}}</td>
                                <td>{{item.ReturnDate | date:'yyyy-MM-dd'}}</td>
                                <!-- 前端计算剩余天数 -->
                                <td>{{Math.floor((new Date(item.ReturnDate) - new Date())/(1000*60*60*24))}} 天</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 定义Angular应用
var app = angular.module('pdaApp', []);
// 定义控制器，注入$http服务用于发送AJAX请求
app.controller('pdaController', function($scope, $http) {
    // 页面加载时请求后端数据
    $http.get('/PDAStatus/GetOutstandingPDA')
    .then(function(response) {
        // 将返回的数据赋值给$scope的pdaList变量，用于页面渲染
        $scope.pdaList = response.data;
    }, function(error) {
        console.log('数据请求失败：', error);
    });
    // 绑定Math对象到作用域，方便页面计算天数
    $scope.Math = window.Math;
});
</script>

注意事项 #

• 代码里的接口路由/PDAStatus/GetOutstandingPDA需要和你后端实际的控制器名、接口名保持一致
• 如果后端返回的日期是时间戳格式，你可以在AJAX请求成功的回调里先统一转换成日期格式再赋值给$scope.pdaList
• 后续新增、编辑、删除的操作也可以通过$http.post/put/delete方法调用后端对应的CRUD接口，操作完成后重新拉取数据更新页面即可，无需刷新整个页面

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