MVC Controller method call from Angularjs return View HTML instead of JSON result

Question

I have the following Controller method under 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);
        }

And I'm calling this method using Angularjs Ajax function as below,

<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. Here is the console.log output,

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

What is in the HTML code? Could it be an exception page, rather than actual result? for example, if your @Url.Action() is not take care of, the server will return some kind of route not found which will come in developer "help" page which is HTML... just a thought — Felix
– Felix, Commented Jan 22, 2017 at 16:48
I have a only a button in html to call the Ajax function, the console log return that html code, I updated the question what log printing. — Able
– Able, Commented Jan 22, 2017 at 16:51
Change your action method signature to JsonResult from ActionResult, to be clear. Also, are you not using areas. — Saravanan
– Saravanan, Commented Jan 22, 2017 at 17:04
If I put @Html.Action("GetStudents", "Home") in the html code, it will return the json data along with full html, annoying :( — Able
– Able, Commented Jan 22, 2017 at 17:17
Maybe check the http requests being made by the browser (e.g. in the Network tab of Chrome) when this call is triggered. If it's calling the wrong URL somehow, whatever is meant to serve the JSON might be serving the index page of your app instead of returning an error code. — SharkofMirkwood
– SharkofMirkwood, Commented Jan 22, 2017 at 17:26

Andrei Dragotoniu · Accepted Answer · 2017-01-22 17:38:32Z

0

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.

What I would do is this :

move the angular controller into it's own file.
change the JavaScript URL to '/Home/GetStudents'
change the return type of your backend controller to JsonResult, instead of 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.

Once you do all this, first check in the browser that you are receiving the proper data by calling the '/Home/GetStudents' URL yourself. Once you are sure, then add some breakpoints and make sure Angular is receing the data properly and then continue from there.

answered Jan 22, 2017 at 17:38

Andrei Dragotoniu

6,3753 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

MVC Controller method call from Angularjs return View HTML instead of JSON result

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related