ASP.NET Core 入門教程 6、ASP.NET Core MVC 檢視佈局入門
一、前言
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#擴充套件升級到最新版本。
二、母版頁檢視模板
網頁中往往有通用的佈局,比如導航、底部等等,這些頁面中共用的部分,就需要放在母版頁裡面。
這樣每個頁面只用關注本頁面要完成的功能/內容即可。提高了開發效率,也降低了公共部分的維護成本。
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
調整 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載入
在母版頁中可以通過@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
訪問 /
,將看到:
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
。
這樣我們在檢視子頁面就不用逐一制定母版頁了。
如果我們將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