从ASP.NET中的操作方法检索Json对象

Question

I have searched and seen many solutions but yet I still am not getting any progress. I get no errors within the console and get nothing in return from the ajax request.

Here is action method code:

        [HttpGet]
        public ActionResult GetEmployees()
        {
            AWEmployeeModel aw = new AWEmployeeModel();
            aw.ID = 0;
            aw.Name = "Selena";
            aw.Position = "Cashier";
            aw.Department = "Finance";

            return Json(aw,JsonRequestBehavior.AllowGet);
        }

And here is my ajax call within my controller:

 EmpApp.controller("AWEmpControl", function ($scope) {

loadEmployees();

function loadEmployees() {
    $.ajax({
        url: "/AWEmployee/Index/GetEmployees",
        method: "GET",
        success:function (response) {
            $scope.employees = response["Name"];
        }
});
}

});

I do also have the ng directives on the desired page:

<div class="container" ng-app="AWEmpApp" ng-controller="AWEmpControl">
{{employees}}
</div>

I tested to see if the scripts work fine by assigning $scope.employees = "Hello..."; and no problems, so I know it has nothing to do with script loading.... What could be the issue? I've made sure to describe the request as GET and to return a JSON object. Am I missing something?

Thanks in advance.

EDIT

I checked the firefox console and got back Parsing Error: No XML found at location.......

Which I found odd since the server returns a JSON object, so I replaced the ajax method with the following:

    function loadEmployees() {
    $http.get('/AWEmployee/Index/GetEmployees')
        .then(function(response) {
                $scope.employees =response;
            });

};

Now response is html data of the page that called it (Index), instead of the JSON object ! I assume something is happening in between the communication as suggested in this post .

Answer 1

As you use JQuery to fetch data from server instead of $http service and moreover success function is executed asynchronous, AngularJS will not reflect any changes that was happened, to force it, just wrap assigning into $apply :

function loadEmployees() {
    $.ajax({
        url: "/AWEmployee/Index/GetEmployees",
        method: "GET",
        success:function (response) {
            $scope.$apply(function(){
                $scope.employees = response["Name"];
            });
        }
    });
}

Answer 2

Found out the issue, it's a simple mistake on my part. I was calling http://localhost:53729/AWEmployees/Index/GetEmployees which was the wrong thing to do. I took out the Index page, so now the url looks like http://localhost:53729/AWEmployees/GetEmployees and it worked perfectly!