애플 리케이션 라우팅을위한 ASP.NET MVC + AngularJS + PiranhaCMS + Foundation

-1

나는이 문제에 대해 인정하고 싶습니다. 나는 내 문제와 매우 흡사 한 모든 것을 읽고 빈 손으로 올랐다.애플 리케이션 라우팅을위한 ASP.NET MVC + AngularJS + PiranhaCMS + Foundation

문제는 WITH _Layout.cshtml을 표시하도록 내 의견을 얻는 것입니다. 사이트를 시작하면 Index.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 라우터를 사용하고 있습니다 : 여기

는 _Layout.cshtml입니다. 여기 내 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을 가리킬 것입니다. 당신이 HomeController.cs에서

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

을 할 필요가 없습니다 경우 PartialView (...)를 반환하는; 이는 AJAX와 Sub-Views를 호출 할 때 주로 사용됩니다. 지정된 경우 레이아웃 옵션을 무시합니다. 당신은 사용하고 싶습니다

View(...);

출처

2016-06-17 20:01:52

SPA를 제대로 달성하기 위해 레이아웃을 null로 설정합니다. 이것은 또한 컨트롤러에서 PartialView를 반환하는 이유이기도합니다. 이 부분 뷰는 각도 라우팅을 통해 _Layout.cshtml의 ''태그 사이에 삽입됩니다. 읽은 모든 것을 기반으로 _Layout.cshtml은 여전히 정상적으로로드되어야합니다. – OCDDev

이 답변은 완전히 맞습니다. Layout = null을 지정하면 Layout이 사용되지 않습니다. 이것은 Piranha CMS와는 아무 관련이 없지만 표준 MVC 기능입니다. SPA를 만들려면 초기 경로 (집/색인)가 본문이 비어있는보기를 반환하고 레이아웃이 포함되어 있는지 확인하십시오. 그런 다음 Angular sets Layout = null에서 호출 된 다른 모든 액션이 있는지 확인하십시오. 이것은 당신에게 당신이 찾고있는 행동을 줄 것입니다! 문안 인사 –

애플 리케이션 라우팅을위한 ASP.NET MVC + AngularJS + PiranhaCMS + Foundation

답변

관련 문제