如何在MVC5+AngularJS(1.x)中将JSON结果渲染为表格

看起来你遇到的问题主要有两个核心点：一是直接访问了返回JSON的Action接口，二是Angular模块名称与视图声明不匹配，咱们一步步来修复：

1. 先解决「直接显示原始JSON」的核心问题 #

你现在看到浏览器输出原始JSON，大概率是直接在地址栏输入了/Home/AllEmployee——这个Action是专门返回JSON数据的接口，不是用来渲染页面的。你需要一个专门返回视图的Action来加载你的Angular页面：

在HomeController里新增一个返回视图的方法：

public ActionResult EmployeeTable()
{
    return View("AllEmployee"); // 指向你的AllEmployee.cshtml视图文件
}

之后访问/Home/EmployeeTable，这才是加载Angular视图的正确路由，而不是直接调用JSON接口。

2. 修复Angular模块与视图的名称不匹配 #

看你的Angular脚本代码：

var myApp = angular.module('MyModule', []); 
myApp.controller('DBcontroller', function ($scope, $http) {
    $http.get('/Home/AllEmployee')
    .then(function (response) {
        $scope.students = response.data 
    })
})

这里定义的模块名是MyModule，但你的视图里写的是：

<body ng-app="myApp">

名称大小写和拼写都不一致！改成完全匹配的：

<body ng-app="MyModule">

这样Angular才能正确识别并加载你的模块和控制器。

3. 额外检查：确保脚本加载顺序正确 #

你的视图里已经按正确顺序加载了脚本，但再确认一遍：

<script src="~/Customs/angular.min.js"></script>
<script src="~/Customs/Scripts.js"></script>

Angular核心库必须在自定义脚本之前加载，这个顺序是对的，不用改。

4. 验证JSON接口是否正常（可选） #

可以打开浏览器开发者工具（F12）的「Network」标签，访问/Home/AllEmployee，查看请求返回的JSON数据格式是否正确，确保没有数据字段缺失或格式错误。

把这些修改完成后，访问/Home/EmployeeTable，Angular就能正常获取数据并渲染到表格里了。

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