ASP.NET MVC + AngularJS + PiranhaCMS + Foundation for Apps 路由问题答案

【问题标题】：ASP.NET MVC + AngularJS + PiranhaCMS + Foundation for Apps routing issueASP.NET MVC + AngularJS + PiranhaCMS + Foundation for Apps 路由问题
【发布时间】：2016-06-17 18:14:37
【问题描述】：

我在这个问题上工作的时间比我想承认的要长。我已经阅读了所有我能找到的与我的问题非常相似的内容，但都空手而归。

我遇到的问题是让我的视图显示 WITH _Layout.cshtml。当我启动网站时，Index.cshtml 视图正在加载，但没有布局页面。

这里是_Layout.cshtml：

<!DOCTYPE html>
<html lang="en"  ng-app="retail">
<head>
  <title>@ViewBag.Title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  @UI.Head()
  <link type="text/css" rel="stylesheet" href="../../Content/Css/style.css"/>
  @RenderSection("head", required: false)
</head>
<body>

<!-- This is the off-canvas menu that will slide in from the left !-->
<zf-offcanvas id="OffCanvasMainMenu" position="left">
  <div id="MainMenu">
    <div class="menuBlock">
      <span class="spacer"></span>
      <ul>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
      </ul>
    </div>
  </div>
</zf-offcanvas>

<div class="grid-frame vertical">
  <div id="Header" class="shrink collapse grid-content">
    <div class="dark title-bar">
                <span class="title center">
                    <img class="logo" src="logo.png">
                </span>
                <span class="left">
                    <button zf-toggle="OffCanvasMainMenu" id="MainMenuToggle">
                        <span>toggle menu</span>
                    </button>
                </span>
      <span class="right"><a id="c-button--slide-right" class="c-button dark"><i
        class="fa fa-shopping-cart fa-2x" aria-hidden="true"></i></a></span>
    </div>
  </div>

  <div class="grid-block">
    <ui-view>
    </ui-view>
  </div>
</div>

<!-- This is the Shopping Cart that will slide over from the right !-->
<nav id="c-menu--slide-right" class="c-menu c-menu--slide-right">
  <button class="c-menu__close">Close Menu &rarr;</button>
</nav><!-- /c-menu slide-right -->

@Scripts.Render("~/bundles/jquery")
<script src="../../lib/angular-touch/angular-touch.js"></script>
<script src="../../lib/ui-bootstrap-custom/ui-bootstrap-custom-tpls-1.3.3.js"></script>
<script src="../../Scripts/build/foundation.js" type="text/javascript"></script>
<script src="../../Scripts/build/templates.js" type="text/javascript"></script>
<script src="../../Scripts/app/core/core.module.js"></script>
<script src="https://use.fontawesome.com/154af4e77a.js"></script>
<script src="../../Scripts/app/home/HomeController.js"></script>
<script src="../../Scripts/assets/menu.js"></script>

</body>

@RenderSection("script", required: false)
</html>

我正在使用带有 AngularJS 的 UI 路由器来提供客户端的 HTML5Mode 路由。这是我的 app.js：

(function() {
  'use strict';

  angular.module('retail', [
    'retail.core'
  ])
    .config(config)
    .run(run);

  config.$inject = ["$stateProvider", "$urlRouterProvider", "$locationProvider"];

  function config($stateProvider, $urlProvider, $locationProvider) {
    $urlProvider.otherwise("/");

    $stateProvider
      .state("home", {
        url: "/",
        templateUrl: "/Home/Index",
        controller: "HomeController",
        controllerAs: "home"
      });

    $locationProvider.html5Mode({
      enabled: false,
      requireBase: false
    });

    $locationProvider.hashPrefix('!');
  }

  function run() {
    FastClick.attach(document.body);
  }

})();

这里是/Home/Index/cshtml:

@model Piranha.Models.PageModel

@{
    Layout = null;
}

<div class="content">
  <div class="main">
    <h1>@Model.Page.Title</h1>
    @Model.Regions.Ad
  </div>
  <div>
    @Model.Regions.CampaignHeader
  </div>
  <div>
    @Model.Regions.CampaignProduct1
  </div>
  <div>
    @Model.Regions.CampaignProduct2
  </div>
  <div>
    @Model.Regions.CampaignProduct3
  </div>
  <div>
    @Model.Regions.CampaignProduct4
  </div>
</div>

这里是 HomeController.cs

public class HomeController : SinglePageController
    {
        public ActionResult Index()
        {
            var model = GetModel();

            return PartialView("~/Views/Home/Index.cshtml", model);
        }
}

如果有其他需要查看的代码，请告诉我。

【问题讨论】：

标签： angularjs asp.net-mvc-4 angular-ui-router zurb-foundation piranha-cms

【解决方案1】：

在/home/index.cshtml中

您声明您希望 Layout 为空。从字面上看，您不希望此文件使用布局。如果您有一个 _ViewStart.cshtml，它很可能默认指向 ~/Views/Shared/_Layout.cshtml。如果没有，你需要制作

Layout = "<path>/<to>/_Layout"

在 HomeController.cs 中，您返回 PartialView(...);它主要用于 AJAX 和调用子视图。如果指定，它将忽略布局选项。你想用

View(...);

【讨论】：

Layout 设置为 null 以正确实现 SPA。这也是我从控制器返回 PartialView 的原因。该部分视图应该通过 Angular 路由插入到 _Layout.cshtml 中的 <ui-view></ui-view> 标记之间。根据我阅读的所有内容，_Layout.cshtml 仍应正常加载。
这个答案是完全正确的。指定 Layout = null 将确保永远不会使用 Layout。这与 Piranha CMS 无关，而是标准的 MVC 功能。要创建 SPA，请确保您的初始路由（home/index）返回一个带有空主体的视图并且包含布局。然后确保从 Angular 调用的所有其他操作设置 Layout = null。这将为您提供您正在寻找的行为！问候