如何将C# MVC控制器的JSON数据传递到AngularJS并实现列表渲染

问题分析 #

从你的描述来看，你在C# MVC中编写了返回文件名数组的JsonResult方法，但在AngularJS中无法获取数据实现渲染——先后尝试ng-init调用序列化方法报错、三次$http.get请求失败，核心问题出在MVC JsonResult的请求权限限制和AngularJS异步请求的正确处理上。

关键修复点 #

我们需要从两端同步调整：

• MVC控制器端：开放GET请求权限
  默认情况下，MVC的JsonResult会拒绝GET请求（防止JSON劫持），所以必须在返回时指定*JsonRequestBehavior.AllowGet*，明确允许GET请求获取数据。另外，原方法标记了[HttpPost]，但前端用的是$http.get，需要把请求方式统一改成[HttpGet]。

• AngularJS前端：使用标准异步回调方式
  旧版的.success()和.error()方法已被弃用，官方推荐使用*.then()*处理Promise回调，且要注意从回调的result.data中提取实际响应数据，而非直接使用result对象。

修正后的完整代码 #

C# MVC控制器代码

[HttpGet]
public JsonResult GetFileList() 
{ 
    string[] filesArray = Directory.GetFiles("/UploadedFiles/"); 
    // 提取纯文件名，移除完整路径
    for (int i = 0; i < filesArray.Length; i++) 
    { 
        filesArray[i] = Path.GetFileName(filesArray[i]); 
    } 
    // 允许GET请求获取JSON数据
    return Json(filesArray, JsonRequestBehavior.AllowGet); 
}

AngularJS前端代码

// 定义作用域变量存储文件列表
$scope.fileList; 

// 发起GET请求获取数据
$http.get("/Home/GetFileList").then(function (result) { 
    console.log("响应详情：", result);
    // 将响应中的实际数据赋值给作用域变量
    $scope.fileList = result.data; 
});

视图渲染示例 #

在HTML视图中，即可通过ng-repeat正常渲染数据，也能配合过滤器使用：

<ul>
    <li ng-repeat="file in fileList | filter:searchKeyword">{{ file }}</li>
</ul>

这样调整后，就能成功实现从MVC控制器获取JSON数据，并在AngularJS视图中渲染、过滤的功能了。

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