Question

我在HomeController下面有以下控制器方法，

[HttpGet]
        public ActionResult GetStudents()
        {
            Student std1 = new Student();
            List<Student> stdlst = new List<Student>();
            std1.Id = 1;
            std1.Name = "Emmanuvel";
            std1.Age = 25;
            stdlst.Add(std1);

            Student std2 = new Student();
            std2.Id = 2;
            std2.Name = "Michael";
            std2.Age = 24;
            stdlst.Add(std2);

            Student std3 = new Student();
            std3.Id = 3;
            std3.Name = "Hannah";
            std3.Age = 22;
            stdlst.Add(std3);

            return Json(stdlst, JsonRequestBehavior.AllowGet);
        }

我正在使用Angularjs Ajax函数调用此方法，如下所示，

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http, $window) {
    $scope.ButtonClick = function () {            
        $http.get('@Url.Action("GetStudents","Home")')
            .success(function (data) {
                $scope.students = data;
                console.log($scope.students);                    
            })
            .error(function (data) {
                console.log(data);
            });
    }
});
</script>

不幸的是，console.log打印了View Page的HTML代码，而不是JSON数据。这是console.log输出，

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>


    <div ng-app="MyApp" ng-controller="MyController">
        <input type="button" value="Submit" ng-click="ButtonClick()"/>
    </div>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope, $http, $window) {
        $scope.ButtonClick = function () {            
            $http.get('/Home/GetStudents')
                .success(function (data) {
                    $scope.students = data;
                    console.log($scope.students);                    
                })
                .error(function (data) {
                    console.log(data);
                });
        }
    });
    </script>
</body>
</html>

帮助我理解我在此代码中所做的错误。

Answer 1

我会在那里做一些改变。首先将角度代码与视图分开。你可能是为了能够使用Razor语法来构建URL，但现在你依赖它了。

我要做的是：

将角度控制器移动到它自己的文件中。
将JavaScript网址更改为“/ Home / GetStudents”
将后端控制器的返回类型更改为JsonResult，而不是ActionResult。即使你在结果中传递Json，因为它是ActionResult，它仍然会返回页面的HTML。

完成所有这些操作后，首先请自行调用“/ Home / GetStudents”网址，在浏览器中检查您是否收到了正确的数据。一旦你确定，然后添加一些断点并确保Angular正确地接收数据，然后从那里继续。

Angularjs的MVC Controller方法调用返回View HTML而不是JSON结果

1 个答案: