Angularjs Cannot Load Data in ASP .Net MVC

Question

I am learning angularjs framework with ASP .Net MVC. These codes fail and don't load nor bind any json data. Please, which one is incorrect?

Controller:

public JsonResult GetCustomers()
{
    Customer[] customers = new Customer[]
    {
        new Customer { Age = 52, Comments = "Hello World", Id = 1, Name = "Andrew Max" },
        new Customer { Age = 12, Comments = "Hello World", Id = 2, Name = "Michael Hearve" },
        new Customer { Age = 54, Comments = "Hello World", Id = 3, Name = "Best Regards" },
        new Customer { Age = 33, Comments = "Hello World", Id = 4, Name = "Andrea Lucy" },
        new Customer { Age = 46, Comments = "Hello World", Id = 5, Name = "Silvia Reagen Estongard" },
        new Customer { Age = 23, Comments = "Hello World", Id = 6, Name = "James Hall" },
        new Customer { Age = 43, Comments = "Hello World", Id = 7, Name = "Pak Marsudi" },
        new Customer { Age = 22, Comments = "Hello World", Id = 8, Name = "Gilbert Silalahi" },
        new Customer { Age = 52, Comments = "Hello World", Id = 9, Name = "Noni Cukong" },
    };
    return Json(customers, JsonRequestBehavior.AllowGet);
}

HTML:

<div ng-app="app" ng-controller="angularController">
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Age</th>
                <th>Comments</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in items">
                <td>{{item.Id}}</td>
                <td>{{item.Name}}</td>
                <td>{{item.Age}}</td>
                <td>{{item.Comments}}</td>
            </tr>
        </tbody>
    </table>
</div>

Javascript:

$(document).ready(function () {
    test();
});

function test() {
    angular
        .module('app', [])
        .controller('angularController', function ($scope, $http) {
            $http.get("/Home/GetCustomers/")
                .success(function (data) {
                    $scope.items = data;
                });
        });
};

It doesn't load data and shows no errors. Here's the result displayed on browser

{{item.Name}} {{item.Age}} {{item.Comments}}

Pankaj Parkar · Accepted Answer · 2015-04-30T21:18:28.863

1

As you use ng-app directive you should load angular module from $(document).ready(function () { it should loaded directly will solve your issue

Javascript

angular
    .module('app', [])
    .controller('angularController', function ($scope, $http) {
        $http.get("/Home/GetCustomers/")
            .success(function (data) {
                $scope.items = data;
            });
    });

Working DotNetFiddle Here

edited Apr 30 '15 at 21:18

answered Apr 30 '15 at 20:24

Pankaj Parkar

134,766
23
234
299

thank you so much. It's now working. I also make mistake by placing two divs of ng-app in same cshtml page. However, how can `@Url.RouteUrl` generate data while `@Url.Action` doesn't? Thank you – derodevil Apr 30 '15 at 21:45
@derodevil you could look at this http://stackoverflow.com/questions/15250186/generating-route-url-to-mvc-controller-action-from-webapi – Pankaj Parkar Apr 30 '15 at 21:46

Angularjs Cannot Load Data in ASP .Net MVC

1 Answers1