Asp.Net MVC4學習系列–Layout

MVC框架的View提供了只處理顯示的部份, 而.net MVC中的View, 又以Layout來做為畫面顯示的基礎. 所以就自己學習的部份做一些記錄.

為何每個頁面都會去自動載入_Layout.cshtml?

.net MVC中有定義了一個機制, 在Views目錄中有一個_ViewStart.cshtml, 要顯示任何view之前, 都會先執行這個程式, 而預設的範本就已經將_Layout.cshtml設好了:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

也就是說, 任何要在view顯示前執行或所有頁面都需要的資源就可以在這裡做設定.

如何新增自訂Layout(新增Sidebar)?

若是要新增一個sidebar到某個畫面中, 要如何繼承原layout範本並新增sidebar呢? 在.net MVC中, 可以指定該頁面的parent/master page:

新增View: Shared目錄 > 按右鍵 > Add > View, 命名View為_LayoutWithSidebar, 並選擇use a layout page, 選擇Views/Share/_Layout.cshtml

加入sidebar block: 以CSS的float方式, 將sidebar的div放在RenderBody()前. 並將_Layout.cshtml所需的section都補上.

@{
    ViewBag.Title = "_LayoutWithSidebar";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>_LayoutWithSidebar</h2>

<div class="sidebar">
    @*強制要使用這個layout的view都一定要有sidebar這個section*@
    @RenderSection("sidebar")
</div>

<div class="content">
    @RenderBody()
</div>

@section Scripts{
    @RenderSection("scripts", required: false)
}

@section Feature{
    @RenderSection("feature", required: false)
}

在需要有sidebar的view中使用_LayoutWithSidebar, 並加入sidebar這個section(sample.cshtml)

@section Sidebar {
    <p>Here is my sidebar!</p>
}

1就這樣設計方式, 我的認知是mvc要顯示sample.cshtml時使用_LayoutWithSidebar當成layout, 而_LayoutWithSidebar又以_Layout.cshtml當Master page, 所以會畫出原範本的一些元素, 然後_LayoutWithSidebar.cshtml中的RenderBody()應該時繼承_Layout.cshtml的RenderBody(), 會去載入sample.cshtml的內容, 而sample.cshmtl中使用_LayoutWithSidebar, 所以會在body中畫出在_LayoutWithSidebar所佈置的內容, 顯示出sidebar。