ASP.NET Core 入門教程 6、ASP.NET Core MVC 視圖布局入門

一、前言

1、本教程主要內(nèi)容

  • ASP.NET Core MVC (Razor)視圖母版頁教程
  • ASP.NET Core MVC (Razor)帶有Section的視圖母版頁教程
  • ASP.NET Core MVC (Razor)視圖全局代碼(_ViewStart.cshtml)教程

2、本教程環(huán)境信息

軟件/環(huán)境 說明
操作系統(tǒng) Windows 10
SDK 2.1.401
ASP.NET Core 2.1.3
IDE Visual Studio Code 1.28
瀏覽器 Chrome 70

本篇代碼以下代碼進行調(diào)整：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#擴展升級到最新版本。

二、母版頁視圖模板

網(wǎng)頁中往往有通用的布局，比如導(dǎo)航、底部等等，這些頁面中共用的部分，就需要放在母版頁里面。
這樣每個頁面只用關(guān)注本頁面要完成的功能/內(nèi)容即可。提高了開發(fā)效率，也降低了公共部分的維護成本。

Razor視圖引擎原生提供了Layout的概念，作為視圖布局的基礎(chǔ)，可以讓我們在視圖中引用另外一個視圖作為該視圖的母版。

1、創(chuàng)建布局頁（Layout）作為母版頁

在項目根目錄Views文件夾中創(chuàng)建子目錄Shared，并在Shared目錄中創(chuàng)建母版頁 _Layout.cshtml

通常公共的Razor視圖文件名都以_開頭

<html>
    <head>
        <title>@ViewBag.Title - Ken.Tutorial</title>
    </head>
    <body>
        <h1>Ken.Tutorial</h1>
        @RenderBody()
    </body>
</html>

@ViewBag.Title 用于當前應(yīng)用該模板的視圖自定義標題
@RenderBody(`表示渲染當前應(yīng)用該母版的視圖，并填充到當前位置。

2、創(chuàng)建視圖作為子頁面

創(chuàng)建視圖并指定母版頁（Layout）

在/Views/Home中新建文件Index.cshtml
在頁面中可以通過以下方式指定母版頁

  • 指定母版頁名字
@{
    Layout = "_Layout";
}
  • 指定母版頁完整路徑
@{
    Layout = " /Views/Shared/_Layout.cshtml";
}

以上兩種方式任選其一即可

@{
    Layout = "_Layout";
}
<h3>@ViewBag.Title</h3>
@ViewBag.Message

修改Action

調(diào)整 HomeController.cs中Action:Index()，通過視圖輸出Message

public IActionResult Index()
{
    ViewBag.Title = "Home";
    ViewBag.Message = "Hello World ！ -ken.io";
    return View();
}

3、訪問測試

啟動項目，訪問 / 或者 /home/index 將會看到：

image

三、帶片段的母版頁視圖模板

通過母版頁，我們可以方便的共用一些頁面內(nèi)容或者功能。但是對于一些特殊的子頁面可能需要重寫母版頁中一些內(nèi)容，或者在母版頁中插入自己想呈現(xiàn)的內(nèi)容，而不是只能將子頁面呈現(xiàn)在固定的位置。

Razor視圖引擎提供了Section的概念，我們可以在視圖中定義Section，然后再母版視圖中通過RenderSection方式加載視圖定義的Section。

1、Section的定義與加載

Section定義

Section定義在子頁面才有效。
Section定義示例：

 @section test{
     <p>Section Content</p>
 }

@section：定義Section的關(guān)鍵字
test：SectionName，命名規(guī)則同C#變量名一樣，字母或下劃線開頭后面可以跟字母、下劃線、數(shù)字

Section加載

在母版頁中可以通過@RenderSection()方法加載子頁面中定義的Section

RenderSection只有在母版頁(Layout)中使用才有效

  • 強制加載
@RenderSection("test")
  • 子頁面中有定義就加載
@RenderSection("test", false)
  • 子頁面中有定義就加載，沒有就顯示默認內(nèi)容
@if(IsSectionDefined("test"))
{
    RenderSection("test");
}
else
{
    <p>Layout Content</p>
}

2、Section使用示例

創(chuàng)建Controller與Action

在Controllers文件夾中創(chuàng)建LayoutController.cs

using System;
using Microsoft.AspNetCore.Mvc;

namespace Ken.Tutorial.Web.Controllers
{
    public class LayoutController : Controller
    {
        public IActionResult SectionDemo()
        {
            return View();
        }
    }
}

創(chuàng)建帶有Section視圖

在Views文件夾中創(chuàng)建Layout文件夾并創(chuàng)建視圖文件：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

訪問 /，將看到：

image

訪問/layout/sectiondemo將看到：

image

四、視圖呈現(xiàn)之前的全局代碼

Razor視圖引擎，提供了在視圖呈現(xiàn)之前執(zhí)行代碼的入口。
這個入口是一個約定的文件即：_ViewStart.cshtml，我們可以通過該文件定義全局視圖呈現(xiàn)前執(zhí)行的代碼，也是定義某個文件夾下的視圖呈現(xiàn)前需要執(zhí)行的代碼。
完整路徑示例：

  • /Views/_ViewStart.cshtml
  • /Views/Home/_ViewStart.cshtml

如果兩個_ViewStart.cshtml文件同時存在，那么/Views/_ViewStart.cshtml的執(zhí)行優(yōu)先級高于/Views/Home/_ViewStart.cshtml

全局代碼示例

在Views文件夾下創(chuàng)建視圖文件_ViewStart.cshtml

@{
    Layout = "_Layout";
}

這里我們通過全局代碼，將所有視圖的母版頁都指定為_Layout。
這樣我們在視圖子頁面就不用逐一制定母版頁了。

如果我們將Index.cshtml中指定的Layout注釋掉

@{
    //Layout = "_Layout";
}

然后啟動項目，訪問 /，依然看到：

image

局部全局代碼示例

在/Views/Home文件夾下創(chuàng)建視圖文件_ViewStart.cshtml

@{
    Layout = null;
}

這里我們局部全局代碼，將在/Views/Home文件夾下的所有視圖的母版頁都指定為null，默認不引用任何母版頁。

這時我們啟動項目，訪問 / ，將看到：

image

五、備注

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

本文首發(fā)于我的獨立博客：https://ken.io/note/asp.net-core-tutorial-mvc-view-layout-section

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容