Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

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.

share|improve this question
    
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 yesterday
    
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 Alias yesterday
    
Change your action method signature to JsonResult from ActionResult, to be clear. Also, are you not using areas. – Saravanan yesterday
    
If I put @Html.Action("GetStudents", "Home") in the html code, it will return the json data along with full html, annoying :( – Able Alias yesterday
    
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 yesterday

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 :

  1. move the angular controller into it's own file.
  2. change the JavaScript URL to '/Home/GetStudents'
  3. 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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.