ASP.NET Core 入门笔记7，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

摘抄自：https://www.cnblogs.com/ken-io/p/aspnet-core-tutorial-mvc-view-layout-section.html
如有侵权请告知

巴特西

ASP.NET Core 入门笔记7，ASP.NET Core MVC 视图布局入门

一、前言

1、本教程主要内容

2、本教程环境信息

3、准备工作

二、母版页视图模板

1、创建布局页（Layout）作为母版页

2、创建视图作为子页面

创建视图并指定母版页（Layout）

修改Action

3、访问测试

三、带片段的母版页视图模板

1、Section的定义与加载

Section定义

Section加载

2、Section使用示例

创建Controller与Action

创建带有Section视图

修改模板页

3、访问测试

四、视图呈现之前的全局代码

全局代码示例

局部全局代码示例

最新文章

热门文章