ASP.NET Core 入門教程六、ASP.NET Core MVC 視圖佈局入門

時間 2019-12-10

標籤 asp.net asp core 入門教程 mvc 視圖佈局欄目 ASP 简体版

原文原文鏈接

1、前言

一、本教程主要內容

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

二、本教程環境信息

軟件/環境	說明
操做系統	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...html

三、準備工做

VS Code 自己不提供 ASP.NET Core MVC 視圖引擎（Razor）的智能感知。
幸運的是，VS Code C#擴展從 1.17.0 版本開始支持Razor視圖引擎的智能感知。git

因此，咱們要將VS Code C#擴展升級到最新版本。github

2、母版頁視圖模板

網頁中每每有通用的佈局，好比導航、底部等等，這些頁面中共用的部分，就須要放在母版頁裏面。
這樣每一個頁面只用關注本頁面要完成的功能/內容便可。提升了開發效率，也下降了公共部分的維護成本。瀏覽器

Razor視圖引擎原生提供了Layout的概念，做爲視圖佈局的基礎，可讓咱們在視圖中引用另一個視圖做爲該視圖的母版。mvc

一、建立佈局頁（Layout）做爲母版頁

在項目根目錄Views文件夾中建立子目錄Shared，並在Shared目錄中建立母版頁 _Layout.cshtmlasp.net

一般公共的Razor視圖文件名都以_開頭

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

@ViewBag.Title 用於當前應用該模板的視圖自定義標題
@RenderBody(`表示渲染當前應用該母版的視圖，並填充到當前位置。佈局

二、建立視圖做爲子頁面

建立視圖並指定母版頁（Layout）

在/Views/Home中新建文件Index.cshtml
在頁面中能夠經過如下方式指定母版頁測試

指定母版頁名字

@{
    Layout = "_Layout";
}

指定母版頁完整路徑

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

以上兩種方式任選其一便可spa

@{
    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();
}

三、訪問測試

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

3、帶片斷的母版頁視圖模板

經過母版頁，咱們能夠方便的共用一些頁面內容或者功能。可是對於一些特殊的子頁面可能須要重寫母版頁中一些內容，或者在母版頁中插入本身想呈現的內容，而不是隻能將子頁面呈如今固定的位置。

Razor視圖引擎提供了Section的概念，咱們能夠在視圖中定義Section，而後再母版視圖中經過RenderSection方式加載視圖定義的Section。

一、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>
}

二、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>