ASP.NET MVC+;AngularJS+;食人鱼+;应用程序路由问题的基础
我在这个问题上工作的时间比我想承认的要长。我读了所有我能找到的与我的问题非常相似的东西,结果空手而归 我遇到的问题是如何使用_Layout.cshtml显示视图。启动站点时,会加载Index.cshtml视图,但没有布局页面 以下是_Layout.cshtml:ASP.NET MVC+;AngularJS+;食人鱼+;应用程序路由问题的基础,angularjs,asp.net-mvc-4,angular-ui-router,zurb-foundation,piranha-cms,Angularjs,Asp.net Mvc 4,Angular Ui Router,Zurb Foundation,Piranha Cms,我在这个问题上工作的时间比我想承认的要长。我读了所有我能找到的与我的问题非常相似的东西,结果空手而归 我遇到的问题是如何使用_Layout.cshtml显示视图。启动站点时,会加载Index.cshtml视图,但没有布局页面 以下是_Layout.cshtml: <!DOCTYPE html> <html lang="en" ng-app="retail"> <head> <title>@ViewBag.Title</title>
<!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 →</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>
这里是/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>
如果还有任何需要查看的代码,请告诉我。In/home/index.cshtml
您声明希望布局为空。从字面上说,您不希望此文件使用布局。如果您有一个_ViewStart.cshtml,默认情况下它很可能指向~/Views/Shared/_Layout.cshtml。如果不是的话,你需要
Layout = "<path>/<to>/_Layout"
为了正确实现SPA,布局设置为null。这也是我从控制器返回PartialView的原因。该局部视图应该通过角度布线插入到_Layout.cshtml中的
标记之间。根据我读到的所有内容,_Layout.cshtml仍应正常加载。这个答案完全正确。指定Layout=null将确保从未使用该布局。这与食人鱼CMS无关,而是标准的MVC功能。要创建SPA,请确保初始管线(主/索引)返回的视图主体为空,并且包含布局。然后确保从Angular sets Layout调用的所有其他操作均为null。这会给你你想要的行为!当做
public class HomeController : SinglePageController
{
public ActionResult Index()
{
var model = GetModel();
return PartialView("~/Views/Home/Index.cshtml", model);
}
}
Layout = "<path>/<to>/_Layout"
View(...);