Javascript 来自Angularjs的MVC控制器方法调用返回视图HTML而不是JSON结果_Javascript_Angularjs_Json_Ajax_Asp.net Mvc

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

javascript angularjs json ajax asp.net-mvc

Javascript 来自Angularjs的MVC控制器方法调用返回视图HTML而不是JSON结果,javascript,angularjs,json,ajax,asp.net-mvc,Javascript,Angularjs,Json,Ajax,Asp.net Mvc,我在HomeController下有以下控制器方法 [HttpGet] public ActionResult GetStudents() { Student std1 = new Student(); List<Student> stdlst = new List<Student>(); std1.Id = 1; std1.Name = "Em

我在

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

请帮助我理解我在这段代码中犯的错误

我会在那里做很多改变。首先从视图中分离角度代码。您这样做可能是为了能够使用Razor语法来构建URL，但现在您对它有了依赖

我要做的是：

将角度控制器移动到它自己的文件中

将JavaScript URL更改为“/Home/GetStudents”

将后端控制器的返回类型更改为JsonResult，而不是ActionResult。即使您在结果中传递Json，因为它是ActionResult，它仍然会返回页面的HTML

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

HTML代码中有什么内容？这可能是一个例外页面，而不是实际结果吗？例如，如果您的@Url.Action（）未被处理，服务器将返回某种类型的

路由未找到

，它将出现在开发人员的“帮助”页面中，该页面是HTML。。。只是一个想法我在html中只有一个按钮来调用Ajax函数，控制台日志返回html代码，我更新了问题什么日志打印。将您的操作方法签名从ActionResult更改为JsonResult，以明确。另外，您是否没有使用区域。如果我在Html代码中添加@Html.Action（“GetStudents”，“Home”），它将返回json数据以及完整的Html，这很烦人：（可能检查浏览器发出的http请求（例如，在Chrome的网络选项卡中）当触发此调用时。如果它以某种方式调用了错误的URL，那么服务JSON的内容可能是服务于应用程序的索引页，而不是返回错误代码。

<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>

<!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>