javascript - MVC 应用程序不在 View 中显示数据

Question

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

[{"categoryID":1,"categoryName":"饮料","description":"软饮料、咖啡、茶、啤酒和麦芽酒"},{"categoryID":2,"categoryName ":"调味品","description":"甜味和咸味酱汁、调味品、涂抹酱和调味料"},{"categoryID":3,"categoryName":"甜点","description":"甜点、糖果和甜面包"},{"categoryID":4,"categoryName":"乳制品","description":"奶酪"},{"categoryID":5,"categoryName":" Cereal / Cereal ","description":"面包、 cookies 、面食和麦片"},{"categoryID":6,"categoryName":"肉类/家禽","description":"预制肉类"},{"categoryID":7,"categoryName":"农产品","description":"干果 bean 腐"},{"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"}]

这是我的 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);
        }

我的 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 文件。我的索引.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

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

{{category.CategoryName}}

替换为

{{category.categoryName}}

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