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

MVC application does not show data in view

本文关键字:数据 视图 显示 应用程序 MVC      更新时间:2023-09-26

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

[{"categoryID":1,"categoryName":"饮料","description":"软饮料、咖啡、茶、啤酒和麦芽酒"},{"categoryID":2,"categoryName":"调味品","description":"甜的和咸的酱料、调味品、酱料和调味料"},{"categoryID":3,"categoryName":"糖果","description":"甜点、糖果和甜面包"},{"categoryID":4,"categoryName":"乳制品","description":"奶酪"},{"categoryID":5,"categoryName":"谷物/谷物","description":"面包、饼干、意大利面、"被"和谷物"},{:6"categoryName":"肉类/家禽"、"描述":"准备肉"},{"被":7,"categoryName":"生产"、"描述":"干果和豆腐"},{"被":8"categoryName":"海鲜"、"描述":"海藻和鱼"},{"被":9,"categoryName":"www"、"描述":"ghhhh"},{"被":10"categoryName":"bbb"、"描述":"某某"},{"被":11日"categoryName":"自闭症","描述":"sdsad"},{"被":12日"categoryName":"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"
    });
}]);

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

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

索引。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>

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; }
    }
}
为了让你更好的理解,我已经给出了孔代码。如有任何帮助,不胜感激。

感谢达斯古普塔

如果你能够生成你的行和数据被请求正确,因为你说的是,那么我相信你正面临着一个问题,由于表达式在你的角数据绑定,如:

{{category.CategoryName}}

代替

{{category.categoryName}}

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