MVC 应用程序未在视图中显示数据

Question

我是 MVC 和 AngularJs 的新手。我的问题是 - 我正在使用 ng-Repeat 来显示数据。调试显示数据已在 javascript 和 MVC 控制器中正确检索。甚至 ng-Repeat 也可以正常工作，但是所有行都是在没有任何数据的情况下生成的。我的意思是生成了 12 个空白行。下面是 Json 数据。

[{"categoryID":1,"categoryName":"Beverages","description":"软饮料、咖啡、茶、啤酒和淡啤酒"},{"categoryID":2,"categoryName ":"Condiments","description":"甜味和咸味酱汁、调味品、涂抹酱和调味品"},{"categoryID":3,"categoryName":"Confections","description":"甜点、糖果和甜面包"},{"categoryID":4,"categoryName":"乳制品","description":"Cheeses"},{"categoryID":5,"categoryName":"Grains/Cereals","description" :"面包、饼干、意大利面和麦片"},{"categoryID":6,"categoryName":"Meat/Poultry","description":"预制肉类"},{"categoryID":7,"categoryName" :"Produce","description":"干果豆腐"},{"categoryID":8,"categoryName":"海鲜","description":"紫菜和鱼"},{"categoryID":9 ,"categoryName":"www","description":"ghhhh"},{"categoryID":10,"categoryName":"bbb","description":"nnn"},{"categoryID":11," categoryName":"asd","description":"sdsad"},{"categoryID":12,"categoryName":"ssfsf","description":"af1"}]

这是我的控制器 (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);
        }

我的 app.js 文件

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

我的 Router.js 文件

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

我的 categoryController.js 文件

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

我的 categoryDataService.js 文件

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

我的 CategoryList.html 文件。

<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>

包含 CategoryList.html 文件的 Index.cshtml 文件。 我的 Index.cshtml

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

而 _Layout.cshtml 如下所示

<!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>

我的模型文件：

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; }
    }
}

我已经给出了孔代码以便您更好地理解。任何帮助将不胜感激。

谢谢

帕萨

Answer 1

如果您能够生成行并且按照您所说的那样正确请求数据，那么我相信您正面临由于角度数据绑定中的表达式而导致的问题，例如：

{{category.CategoryName}}

替换为

{{category.categoryName}}

并对json 对象的每个属性重复此操作。