Retrieving Json Object from action method in ASP.NET

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.

Slava Utesinov · Accepted Answer · 2017-03-07 07:47:12Z

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

edited Mar 7, 2017 at 7:47

answered Mar 7, 2017 at 6:29

Slava Utesinov

13.5k2 gold badges22 silver badges26 bronze badges

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

1 Comment

Luv2Learn Over a year ago

I have tried wrapping with $scope.apply as you mentioned but that still didn't solve it. I added the error callback option alerting me if called and it did. So I decided to do as mentioned in the Edit in the question.

Luv2Learn · Accepted Answer · 2017-03-10 01:14:34Z

0

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!

answered Mar 10, 2017 at 1:14

Luv2Learn

1901 gold badge2 silver badges10 bronze badges

Collectives™ on Stack Overflow

Retrieving Json Object from action method in ASP.NET

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related