MVC application does not show data in view

Question

I am new in MVC and AngularJs. My problem is that - I am using ng-Repeat to display data. Debugging shows data have been retrieving rightly in both javascript and MVC controller. Even ng-Repeat is working ok, but all rows are generated with out any data in it. I mean 12 blank rows are generated. Below is the Json data.

[{"categoryID":1,"categoryName":"Beverages","description":"Soft drinks, coffees, teas, beers, and ales"},{"categoryID":2,"categoryName":"Condiments","description":"Sweet and savory sauces, relishes, spreads, and seasonings"},{"categoryID":3,"categoryName":"Confections","description":"Desserts, candies, and sweet breads"},{"categoryID":4,"categoryName":"Dairy Products","description":"Cheeses"},{"categoryID":5,"categoryName":"Grains/Cereals","description":"Breads, crackers, pasta, and cereal"},{"categoryID":6,"categoryName":"Meat/Poultry","description":"Prepared meats"},{"categoryID":7,"categoryName":"Produce","description":"Dried fruit and bean curd"},{"categoryID":8,"categoryName":"Seafood","description":"Seaweed and fish"},{"categoryID":9,"categoryName":"www","description":"ghhhh"},{"categoryID":10,"categoryName":"bbb","description":"nnn"},{"categoryID":11,"categoryName":"asd","description":"sdsad"},{"categoryID":12,"categoryName":"ssfsf","description":"af1"}]

Here is my controller (CategoryController.cs)

 public ActionResult GetCategory()
        {
            var categoryList = from cat in _db.Categories
                select new
                    {
                        cat.CategoryID,
                        cat.CategoryName,
                        cat.Description
                    };
            return Json(categoryList, JsonRequestBehavior.AllowGet);
        }

My app.js file

var myApp = angular.module('myApp', ['ngRoute', 'ngResource', 'ui.bootstrap']);

My Router.js file

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: "App/Home/home.html"
    }),
    $routeProvider.when('/about', {
        templateUrl: "App/Home/about.html"
    }),
    $routeProvider.when('/category', {
        templateUrl: "App/Category/Html/categoryList.html",
        controller: "categoryController"
    });
}]);

My categoryController.js file

myApp.controller('categoryController',
    ['$scope', 'categoryDataService', '$location',
    function categoryController($scope, categoryDataService) {
        $scope.categories = [];

        loadCategoryData();

        function loadCategoryData() {
            categoryDataService.getCategories()
            .then(function () {
                $scope.categories = categoryDataService.categories;
            },
                function () {
                    alert("Error");
                })
                .then(function () {
                    $scope.isBusy = false;
                });
        };
    }]);

My categoryDataService.js file

myApp.factory('categoryDataService', ['$http', '$q',
function ($http, $q) {
    var _categories = [];

var _getCategories = function() {
    var deferred = $q.defer();
    var controllerQuery = "Category/GetCategory";

    $http.get(controllerQuery)
        .then(function(result) {
                // Successful
            angular.copy(result.data, _categories);
                deferred.resolve();
            },
            function(error) {
                // Error
                deferred.reject();
            });
    return deferred.promise;
};


//Expose methods and fields through revealing pattern
return {
    categories: _categories,
    getCategories: _getCategories
}
}]);

My CategoryList.html file.

<div class="table table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <td>Id</td>
                        <td>Category Name</td>
                        <td>Description</td>
                        <td></td>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="category in categories | filter:search_txt ">
                        <td>{{category.CategoryID}}</td>
                        <td>{{category.CategoryName}}</td>
                        <td>{{category.Description}}</td>
                        <td>
                            <a class="btn btn-primary" href="#/category/{{CategoryId.id}}">
                            <i class="glyphicon glyphicon-edit"></i></a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

The Index.cshtml file which includes the CategoryList.html file. My Index.cshtml

<div class="ng-view"> </div>

And _Layout.cshtml looks like below

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>@ViewBag.Title - North Wind</title>
    @Styles.Render("~/Content/css")
    @*@Scripts.Render("~/bundels/modernizr")*@
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Northwind", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#/">Home</a></li>
                    <li><a href="#/category">Category</a></li>
                    <li><a href="#/customer">Customer</a></li>
                    <li><a href="#/about">About</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
    </div>
    <hr />
    <footer>
        <div class="container">
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </div>
    </footer>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/angularApp")
    @RenderSection("scripts", required: false)
</body>
</html>

My model file:

namespace WebApp1.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Category
    {
        public int CategoryID { get; set; }
        public string CategoryName { get; set; }
        public string Description { get; set; }
        public byte[] Picture { get; set; }
    }
}

I have given the hole code for your better understanding. Any help will be appreciated.

Thanks

Partha

Answer 1

If you are able to generate your rows and the data is being requested properly as you say it is, then I believe you are facing an issue due to the expressions in your angular databinding such as:

{{category.CategoryName}}

replace it with

{{category.categoryName}}

and repeat that for each of the properties of your json object.