Tool:Visual Studio 2013 Ultimate Update 4
OS:Windows 8.1
ASP.NET MVC 5
MVC的Layout可以是巢狀式的,以下說明Nested Layout的設計方式。
先建立一個MVC的範本專案來修改:
修改\Views\Shared\_Layout.cshtml檔案如下,此檔的內容將當做最外層的Layout:
<html>
<body>
<h1>Outer Layout</h1>
<div>
@RenderBody( )
</div>
</body>
</html>
<body>
<h1>Outer Layout</h1>
<div>
@RenderBody( )
</div>
</body>
</html>
在\Views\Shared\資料夾加入一個_Layout_Inner.cshtml檔,其Layout屬性指向Outer Layout(~/Views/Shared/_Layout.cshtml):
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Inner Layout</h1>
<div>
@RenderBody( )
</div>
修改\Views\_ViewStart.cshtml檔案,指定Layout是Inner:
@{
Layout = "~/Views/Shared/_Layout_Inner.cshtml";
}
Layout = "~/Views/Shared/_Layout_Inner.cshtml";
}
重新產生Index View:
預設產生的Index View如下:
執行Index View,版面便有巢狀式Layout的效果:
沒有留言:
張貼留言