Appsルーティング用のASP.NET MVC + AngularJS + PiranhaCMS + Foundation

-1

私はこの問題について、私が認めたいと思っているよりも長く働いています。私は私の問題によく似たものを見つけ出し、空手になった。Appsルーティング用のASP.NET MVC + AngularJS + PiranhaCMS + Foundation

私が抱えている問題は、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>

私はクライアント側、HTML5Modeルーティングを提供するために、AngularJSとUIのルータを使用しています。ここに私の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); 
    } 

})();

は/ホーム/インデックス/ 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); 
     } 
}

です私に教えてください。あなたはレイアウトがnullになりたい/home/index.cshtml

あなたの状態では

出典

2016-06-17 OCDDev

。これは、文字通り、このファイルで使用されるレイアウトは望ましくないと言います。 _ViewStart.cshtmlを持っている場合は、デフォルトで〜/ Views/Shared/_Layout.cshtmlを指している可能性が最も高いでしょう。あなたが作る必要がない場合

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

あなたはPartialView（...）を返しています。これはAJAXとSub-Viewsを呼び出すために使用されます。レイアウトオプションが指定されている場合は無視されます。あなたは使いたい

View(...);

出典

2016-06-17 20:01:52

SPAを適切に達成するために、レイアウトはヌルに設定されています。これは、コントローラからPartialViewを返す理由です。その部分的なビューは、角度ルーティングによって、_Layout.cshtmlの ''タグの間に挿入されると考えられます。私が読んだことすべてに基づいて、_Layout.cshtmlはまだ普通に読み込まれるべきです。 – OCDDev

この回答は完全に正しいです。 Layout = nullを指定すると、レイアウトが使用されないことが確認されます。これはPiranha CMSとは関係ありませんが、標準のMVC機能です。 SPAを作成するには、最初のルート（ホーム/インデックス）が空のボディでレイアウトを含むビューを返すことを確認します。その後、Angular sets Layout = nullから呼び出される他のすべてのアクションが確実に実行されます。これは、あなたが探している行動をあなたに与えるでしょう！よろしく –

Appsルーティング用のASP.NET MVC + AngularJS + PiranhaCMS + Foundation

答えて

関連する問題