MVC应用程序不显示视图中的数据
MVC application does not show data in view
我是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>© @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
对象的每个属性重复此操作。
- 如何处理数据视图中项目的鼠标点击
- 具有多个控件的数据视图
- 在slickgrid数据视图中使用深度映射
- 数据视图和原型继承
- 对于光滑网格数据视图,如果有更多的行数,则不会加载所有行
- 创建一个滚动条一个ext js数据视图
- 如何使用外部存储呈现数据视图的 tpl
- Google 图表数据视图动态设置列
- Slickgrid-如何更新数据视图中的数据
- 如何动态重新加载任何slickgrid数据视图
- extjs数据视图未找到事件选择
- 如何将数据添加到SlickGrid数据视图
- 如何使用函数对Google Charts数据表或数据视图进行排序
- Sencha Touch:数据视图上的组件,看起来像列表组头
- 数据视图滚动问题sencha触摸
- EXTJS 3.4如何在选择更改时获取记录数据视图
- 数据视图样本在MVC架构下不工作
- Extjs数据视图不显示图像
- Extjs 4数据视图拖放(复制)只工作一次
- 谷歌图表API无法动态设置数据视图列