Question

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

[{“categoryID”：1，“categoryName”：“Beverages”，“description”：“软饮料，咖啡，茶，啤酒和啤酒”}，{“categoryID”：2，“categoryName “：”调味品“，”描述“：”甜味和咸味酱汁，味道，涂抹酱和调味料“}，{”categoryID“：3，”categoryName“：”糖果“，”描述“：”甜点，糖果和sweet breads“}，{”categoryID“：4，”categoryName“：”Dairy Products“，”description“：”Cheeses“}，{”categoryID“：5，”categoryName“：”Grains / Cereals“，”description“ ：“面包，饼干，意大利面和麦片”}，{“categoryID”：6，“categoryName”：“肉/家禽”，“描述”：“准备肉类”}，{“categoryID”：7，“categoryName” ：“生产”，“描述”：“干果和豆腐”}，{“categoryID”：8，“categoryName”：“海鲜”，“描述”：“海藻和鱼”}，{“categoryID”：9 ， “类别名称”： “WWW”， “描述”： “ghhhh”}，{ “的categoryID”：10， “类别名称”： “BBB”， “说明”： “NNN”}，{ “的categoryID”：11，”类别名称 “：” ASD”， “描述”： “sdsad”}，{ “的categoryID”：12， “类别名称”： “ssfsf”， “描述”： “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']);

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

Index.cshtml文件，其中包含CategoryList.html文件。我的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; }
    }
}

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

由于

Partha

Answer 1

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

{{category.CategoryName}}

替换为

{{category.categoryName}}

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

MVC应用程序不显示视图中的数据

1 个答案: