来自Angularjs的MVC控制器方法调用返回View HTML而不是JSON结果

Question

I have the following Controller method under HomeController , 我在HomeController下有以下Controller方法，

[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);
        }

And I'm calling this method using Angularjs Ajax function as below, 我使用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>

unfortunately, the console.log printing the View Page's HTML code, instead of the JSON data. 不幸的是， console.log打印视图页面的HTML代码，而不是JSON数据。 Here is the console.log output, 这是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>

Help me to understand the wrong I did in this code. 帮助我了解我在此代码中所做的错误。

Answer 1

there are a number of changes I would do there. 我会在那里做一些更改。 First separate the angular code from your view. 首先从您的视图中分离角度代码。 You probably did it to be able to use the Razor syntax to build the URL but now you have a dependency on that. 您可能这样做是为了能够使用Razor语法来构建URL，但是现在您对此有了依赖性。

What I would do is this : 我要做的是：

move the angular controller into it's own file. 将角度控制器移到它自己的文件中。
change the JavaScript URL to '/Home/GetStudents' 将JavaScript URL更改为“ / Home / GetStudents”
change the return type of your backend controller to JsonResult, instead of ActionResult. 将后端控制器的返回类型更改为JsonResult，而不是ActionResult。 Even if you are passing Json in the result, because it's ActionResult, it will still come back with the HTML of the page. 即使您在结果中传递Json，因为它是ActionResult，它仍然会与页面的HTML一起返回。

Once you do all this, first check in the browser that you are receiving the proper data by calling the '/Home/GetStudents' URL yourself. 完成所有这些操作后，请首先通过自己调用“ / Home / GetStudents” URL来在浏览器中检查您是否正在接收正确的数据。 Once you are sure, then add some breakpoints and make sure Angular is receing the data properly and then continue from there. 确定后，添加一些断点，并确保Angular正确接收数据，然后从那里继续。

来自Angularjs的MVC控制器方法调用返回View HTML而不是JSON结果

问题描述

1 个解决方案

解决方案1
0 2017-01-22 17:38:32

来自Angularjs的MVC控制器方法调用返回View HTML而不是JSON结果

问题描述

1 个解决方案

解决方案1 0 2017-01-22 17:38:32

解决方案1
0 2017-01-22 17:38:32