一、前言
1、本教程主要內容
- ASP.NET Core MVC (Razor)視圖母版頁教程
- ASP.NET Core MVC (Razor)帶有Section的視圖母版頁教程
- ASP.NET Core MVC (Razor)視圖全局代碼(_ViewStart.cshtml)教程
2、本教程環境信息
| 軟件/環境 | 說明 |
|---|---|
| 操作系統 | Windows 10 |
| SDK | 2.1.401 |
| ASP.NET Core | 2.1.3 |
| IDE | Visual Studio Code 1.28 |
| 瀏覽器 | Chrome 70 |
本篇代碼以下代碼進行調整：https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapter-02
3、準備工作
VS Code 本身不提供 ASP.NET Core MVC 視圖引擎（Razor）的智能感知。
幸運的是，VS Code C#擴展?從 1.17.0 版本開始支持Razor視圖引擎的智能感知。
所以，我們要將VS Code C#擴展升級到最新版本。
二、母版頁視圖模板
網頁中往往有通用的布局，比如導航、底部等等，這些頁面中共用的部分，就需要放在母版頁里面。
這樣每個頁面只用關注本頁面要完成的功能/內容即可。提高了開發效率，也降低了公共部分的維護成本。
gis布局視圖調整大小？Razor視圖引擎原生提供了Layout的概念，作為視圖布局的基礎，可以讓我們在視圖中引用另外一個視圖作為該視圖的母版。
1、創建布局頁（Layout）作為母版頁
在項目根目錄Views文件夾中創建子目錄Shared，并在Shared目錄中創建母版頁?_Layout.cshtml
通常公共的Razor視圖文件名都以_開頭
<html><head><title>@ViewBag.Title - Ken.Tutorial</title> </head> <body> <h1>Ken.Tutorial</h1> @RenderBody() </body> </html> @ViewBag.Title?用于當前應用該模板的視圖自定義標題@RenderBody()表示渲染當前應用該母版的視圖，并填充到當前位置。
2、創建視圖作為子頁面
創建視圖并指定母版頁（Layout）
在/Views/Home中新建文件Index.cshtml
在頁面中可以通過以下方式指定母版頁
- 指定母版頁名字
@{Layout = "_Layout";
}
- 指定母版頁完整路徑
@{Layout = " /Views/Shared/_Layout.cshtml";
}
以上兩種方式任選其一即可
@{Layout = "_Layout";
}
<h3>@ViewBag.Title</h3>
@ViewBag.Message
修改Action
net mvc框架。調整?HomeController.cs中Action:Index()，通過視圖輸出Message
public IActionResult Index()
{ViewBag.Title = "Home"; ViewBag.Message = "Hello World ！ -ken.io"; return View(); } 3、訪問測試
啟動項目，訪問?/?或者?/home/index?將會看到：
Ken.Tutorial
Home
Hello World ！ -ken.io
三、帶片段的母版頁視圖模板
通過母版頁，我們可以方便的共用一些頁面內容或者功能。但是對于一些特殊的子頁面可能需要重寫母版頁中一些內容，或者在母版頁中插入自己想呈現的內容，而不是只能將子頁面呈現在固定的位置。
Razor視圖引擎提供了Section的概念，我們可以在視圖中定義Section，然后再母版視圖中通過RenderSection方式加載視圖定義的Section。
1、Section的定義與加載
Section定義
Section定義在子頁面才有效。
Section定義示例：
@section test{<p>Section Content</p>}
@section：定義Section的關鍵字test:SectionName，命名規則同C#變量名一樣，字母或下劃線開頭后面可以跟字母、下劃線、數字
Section加載
mvc教程？在母版頁中可以通過@RenderSection()方法加載子頁面中定義的Section
RenderSection只有在母版頁(Layout)中使用才有效
- 強制加載
@RenderSection("test")
- 子頁面中有定義就加載
@RenderSection("test", false)
- 子頁面中有定義就加載，沒有就顯示默認內容
@if(IsSectionDefined("test"))
{RenderSection("test");
}
else
{<p>Layout Content</p>
}
2、Section使用示例
創建Controller與Action
在Controllers文件夾中創建LayoutController.cs
using System;
using Microsoft.AspNetCore.Mvc;namespace Ken.Tutorial.Web.Controllers
{public class LayoutController : Controller { public IActionResult SectionDemo() { return View(); } } } 創建帶有Section視圖
在Views文件夾中創建Layout文件夾并創建視圖文件：SectionDemo.cshtml
@{Layout = "_Layout";ViewBag.Title = "SectionDemo";
}
<h3>@ViewBag.Title</h3>
<p>Section Demo by ken.io</p> @section footer{ <p>Section Footer</p> } 修改模板頁
修改?_Layout.cshtml?增加Section加載
<html><head><title>@ViewBag.Title - Ken.Tutorial</title> </head> <body> <div class="header"> <h1>Ken.Tutorial</h1> <hr/> </div> <div class="content"> @RenderBody() </div> <div class="footer"> <hr/> @if(IsSectionDefined("footer")) { RenderSection("footer"); } else { <p>Layout Footer</p> } </div> </body> </html> 3、訪問測試
啟動項目，通過瀏覽器進行訪問測試：/，/layout/sectiondemo
net core mvc 怎么做增刪改查？訪問?/，將看到：
Ken.Tutorial
Home
Hello World ！ -ken.io Layout Footer 訪問/layout/sectiondemo將看到：
Ken.Tutorial
SectionDemo
Section Demo by ken.io Section Footer 四、視圖呈現之前的全局代碼
Razor視圖引擎，提供了在視圖呈現之前執行代碼的入口。
這個入口是一個約定的文件即：_ViewStart.cshtml，我們可以通過該文件定義全局視圖呈現前執行的代碼，也是定義某個文件夾下的視圖呈現前需要執行的代碼。
完整路徑示例：
- /Views/_ViewStart.cshtml
- /Views/Home/_ViewStart.cshtml
如果兩個_ViewStart.cshtml文件同時存在，那么/Views/_ViewStart.cshtml的執行優先級高于/Views/Home/_ViewStart.cshtml
全局代碼示例
在Views文件夾下創建視圖文件_ViewStart.cshtml
@{Layout = "_Layout";
}
這里我們通過全局代碼，將所有視圖的母版頁都指定為_Layout。
這樣我們在視圖子頁面就不用逐一制定母版頁了。
winform mvc架構，如果我們將Index.cshtml中指定的Layout注釋掉
@{//Layout = "_Layout";
}
然后啟動項目，訪問?/，依然看到：
Ken.Tutorial
Home
Hello World ！ -ken.io
局部全局代碼示例
在/Views/Home文件夾下創建視圖文件_ViewStart.cshtml
@{Layout = null;
}
這里我們局部全局代碼，將在/Views/Home文件夾下的所有視圖的母版頁都指定為null，默認不引用任何母版頁。
這時我們啟動項目，訪問?/?，將看到：
Home
Hello World ！ -ken.io 五、備注
1、附錄
- 本文代碼示例
https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapter-06
- 本文參考
六視圖、https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/overview?view=aspnetcore-2.1
本文首發于我的獨立博客：https://ken.io/note/asp.net-core-tutorial-mvc-view-layout-section
?
