2015年8月4日 星期二

MVC 5 - Nested Layout

 

Tool:Visual Studio 2013 Ultimate Update 4
OS:Windows 8.1
ASP.NET MVC 5

 

MVC的Layout可以是巢狀式的,以下說明Nested Layout的設計方式。

先建立一個MVC的範本專案來修改:

image

修改\Views\Shared\_Layout.cshtml檔案如下,此檔的內容將當做最外層的Layout:


<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";
}


重新產生Index View:



image


預設產生的Index View如下:


image


執行Index View,版面便有巢狀式Layout的效果:


image

沒有留言:

總網頁瀏覽量