0

I'm trying to get the result of a JSON request into a table using angular ng-repeat, but nothing happens. Console shows no errors, breakpoint in .NET Controller doesn't get hit.

Code for App Controller:

var app = angular.module('angularTable', []);

app.controller('listdata', function ($scope, $http) {

    $scope.contacts = []; 
    $http({ method: 'GET', url: '/Contacts/GetContacts/' }).success(function (response) {
        $scope.contacts = response; 
    });

});

.NET Controller

[HttpGet]
    public JsonResult GetContacts()
    {
        var data = db.Contacts.Include(x => x.Cities).Include(a => a.Groups);

        return Json(data);
    }

HTML:

<div ng-app ="angularTable">
 <table class="table table-hover" ng-controller="listdata">
        <thead>
            <tr>

                <th>Name</th>
                <th>Phone</a></th>
                <th>Group</th>
                <th>City</th>
                <th>Actions</th>
            </tr>

        </thead>
        <tbody>
            <tr ng-repeat="item in contacts">
                <td>{{item.name}}</td>
                <td>{{item.area}} {{item.phone}}</td>
                <td>{{item.group.description}}</td>
                <td>{{item.city.name}}</td>
                <td>
                    <a asp-route-id="{{item.id_Contact}}">Send Message | </a>
                    <a asp-route-id="{{item.id_Contact}}">Edit | </a>
                    <a asp-route-id="{{item.id_Contact}}" asp-action="Delete">Delete</a>
                </td>
            </tr>

        </tbody>
    </table>
  </div>

Using this CDN for AngularJS: 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
georgeawg
  • 48,608
  • 13
  • 72
  • 95
Pvxtotal
  • 79
  • 7
  • The `.success` method has been [removed from the AngularJS framework](https://stackoverflow.com/questions/35329384/why-are-angularjs-http-success-error-methods-deprecated-removed-from-v1-6/35331339#35331339). – georgeawg Dec 06 '19 at 20:32
  • 1
    Does the Network Tab of the browser Developer Console show the request? – georgeawg Dec 06 '19 at 20:36
  • 2
    try to hit the url using your browser first e.g https://localhost/Contacts/GetContacts/ . See if it returns the JSON , then fix your angular code – Thiago Custodio Dec 06 '19 at 20:45

1 Answers1

1

Firstly, as @ThiagoCustodio mentioned, please enter the url in your browser and check if you can get expected json result.

Secondly, you can try to modify the code like below to allow HTTP GET requests from the client.

public JsonResult GetContacts()
{
    var data = db.Contacts.Include(x => x.Cities).Include(a => a.Groups);


    return Json(data, JsonRequestBehavior.AllowGet);
}

Besides, if your AngularJS client runs as a separate application, please check if you enable/configure CORS for specific origins in your back-end (service) application.

Fei Han
  • 26,415
  • 1
  • 30
  • 41
  • I ended up solving, the problem was that my Angular Table was inside a partial view that is loaded via AJAX, for some reason AngularJS doesn't work inside partial views. – Pvxtotal Dec 09 '19 at 13:38