将 JSON 从 C# 解析为 AngularJS

Question

我有一个文件名数组：[HttpPost]    public JsonResult GetJSONFilesList()    {        string[] filesArray = Directory.GetFiles("/UploadedFiles/");        for (int i = 0; i < filesArray.Length; i++)        {            filesArray[i] = Path.GetFileName(filesArray[i]);        }        return Json(filesArray);    }我需要在 AngularJS 中将此作为对象列表，以便我可以重复它并应用过滤器。我无法弄清楚如何将 JSON 从 MVC 控制器获取到 AngularJS。我已经尝试了以下方法使其对视图可见以获取角度，但我不知道如何让 ng-init 看到返回列表的函数。它在“SerializeObject(GetJSONFilesList())”上出错，说它在当前上下文中不存在。<div ng-controller="MyController" data-ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(GetJSONFilesList()),         @Newtonsoft.Json.JsonConvert.SerializeObject(Model.Done))" ng-cloak>        </div>编辑： 我试过使用 http.get。测试一：alert('page load'); $scope.hello = 'hello';   $http.get('http://rest-service.guides.spring.io/greeting').        then(function (response) {            $scope.greeting = response.data;            alert($scope.greeting);        }); alert($scope.hello);http.get 中的警报永远不会触发，但是其他警报会触发。测试二：$http({        url: '/Home/testHello',        method: 'GET'    }).success(function (data, status, headers, config) {        $scope.hello = data;        alert('hi');        });[HttpPost]        public string testHello()        {            return "hello world";         }这会导致 angular 中断并且 .js 中的任何内容都不起作用。

Answer 1

其他答案说在角度函数中使用 .success，不推荐使用 .success 和 .error ，而应该使用 .then 。

工作结果：

MVC：

public JsonResult GetFileList()

    {

        //form array here

        return Json(myArray, JsonRequestBehavior.AllowGet);

    }

该函数需要是 JsonResult 类型，并且使用 JsonRequestBehavior.AllowGet 返回 Json 的值。

AngularJS：

$scope.fileList;

    $http.get("/Home/GetFileList").then(function (result) {

        console.log(result)

        $scope.fileList = result.data;

    })

这是在我的 AJS 控制器中，使用 .then 而不是 .success。如果您使用 console.log 从 mvc 控制器返回的结果并在浏览器中查看它，您将看到带有许多其他信息的对象，并且您想要的值位于对象的 .data 部分。

因此，要访问您需要执行 result.data 的值。在我的情况下，这给了我和数组。我将它分配给一个范围。然后在我看来，我可以通过执行 {{fileList[1]}} 等来访问这些值。这也可以在 ng-repeat 中使用，例如：

<div ng-repeat="file in fileList">                        

                    {{fileList[$index]}}

</div>

重复数组中的每个值都可以使用 $index 访问，它是从 0 开始的重复次数。