我很难弄清楚为什么ng-view没有在Asp.net MVC页面中呈现我的模板html。让我在这一点上布置我所拥有的内容，并希望有人可以指出我所缺少的内容。
问题不在于没有生成数据，因为视图没有被渲染或数据没有被绑定查看......某些东西......当我导航到/ KPI时，数据在浏览器中显示为Raw json /得分路线。
非常感谢任何帮助！
这是我的_Layout.cshtml页面：
<html ng-app="portalModule">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - CM Team Portal Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@RenderSection("JavascriptInHead", required: false)
</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("CM Team Portal", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("KPI", "Index", "KPI")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
<p class="nav navbar-text navbar-right">Hello, @User.Identity.Name!</p>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - CM Team Portal Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/angular")
@Scripts.Render("~/bundles/portal")
@RenderSection("scripts", required: false)
</body>
</html>
以下是我的KPI SPA的索引页面：
@{
ViewBag.Title = "KPI";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section JavascriptInHead
{
<script src="~/Scripts/Scores/scores-controller.js"></script>
<script src="~/Scripts/Scores/scores-repository.js"></script>
}
<div class="container" >
<div class="row">
<div class="navbar navbar-default">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li><span class="navbar-brand">Score Detail</span></li>
</ul>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/KPI/Scores">Scores</a></li>
</ul>
</div>
</div>
</div>
<div ng-view></div>
</div>
这是我的templates / scores.html：
<div class="row">
<div class="span10">
<h2>KPI Scores</h2>
</div>
</div>
<div class="row">
<div class="span10">
<table class="table table-condensed table-hover">
<tr>
<th>DrNumber</th>
<th>ProjectName</th>
<th>DisplayName</th>
<th>Score</th>
<th>DeploymentDate</th>
</tr>
<tr ng-repeat="score in scores">
<td> {{score.drNumber}}</td>
<td> {{score.projectName}}</td>
<td> {{score.displayName}}</td>
<td> {{score.score}}</td>
<td> {{score.deploymentDate}}</td>
</tr>
</table>
</div>
</div>
这是我的BundleConfig：
using System.Web;
using System.Web.Optimization;
namespace Rma.ReleaseManager.Portal
{
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap-superhero.css",
"~/Content/site.css"));
bundles.Add(new ScriptBundle("~/bundles/portal").Include(
"~/Scripts/portal-module.js"));
bundles.Add(new ScriptBundle("~/bundles/angular").Include(
"~/Scripts/angular.min.js",
"~/Scripts/angular-resource.min.js",
"~/Scripts/angular-route.min.js"));
}
}
}
这是我的RouteConfig：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace Rma.ReleaseManager.Portal
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "KPI Scores SPA",
url: "KPI/Scores",
defaults: new { controller = "Scores", action = "Index" });
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
}
}
这是我的分数Asp.net MVC控制器：
using Rma.ReleaseManager.Portal.Models.Scores;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Rma.ReleaseManager.Portal.Controllers
{
public class ScoresController : JsonController
{
// GET: Scores
private ScoresVmBuilder _scoresVmBuilder = new ScoresVmBuilder();
public ActionResult Index()
{
return Json(_scoresVmBuilder.GetScoresVM(),JsonRequestBehavior.AllowGet);
}
}
}
这是我的JsonController：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Newtonsoft.Json.Serialization;
using Newtonsoft.Json;
using System.Net;
namespace Rma.ReleaseManager.Portal.Controllers
{
public class JsonController : Controller
{
protected new ActionResult Json(object data, JsonRequestBehavior behavior = JsonRequestBehavior.DenyGet)
{
var jsonSerializerSettings = new JsonSerializerSettings
{
ContractResolver = new CamelCasePropertyNamesContractResolver()
};
if (Request.RequestType == WebRequestMethods.Http.Get && behavior == JsonRequestBehavior.DenyGet)
throw new InvalidOperationException("GET is not permitted for this request");
var jsonResult = new ContentResult
{
Content = JsonConvert.SerializeObject(data, jsonSerializerSettings),
ContentType = "application/json"
};
return jsonResult;
}
}
}
这是我的Angular模块：
'use strict';
var portalModule = angular.module("portalModule", ['ngResource','ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/KPI/Scores',
{
templateUrl: '/templates/scores.html',
controller: 'ScoresController'
});
$routeProvider.otherwise(
{
redirectTo: '/KPI/Scores'
});
$locationProvider.html5Mode(true);
});
这是我的Angular控制器：
'use strict';
portalModule.controller("ScoresController", function ($scope, scoresRepository) {
scoresRepository.get().then(function (scores) { $scope.scores = scores; });
});
这是我的Angular存储库：
'use strict';
portalModule.factory('scoresRepository', function ($http, $q) {
return {
get: function () {
var deferred = $q.defer();
$http.get('/Scores').success(deferred.resolve).error(deferred.reject);
return deferred.promise;
}
}
});