900字范文 > ASP.NET Core 入门教程 6 ASP.NET Core MVC 视图布局入门

ASP.NET Core 入门教程 6 ASP.NET Core MVC 视图布局入门

时间：2021-11-23 08:58:10

一、前言

1、本教程主要内容

Core MVC (Razor)视图母版页教程 Core MVC (Razor)带有Section的视图母版页教程 Core MVC (Razor)视图全局代码(_ViewStart.cshtml)教程

2、本教程环境信息

本篇代码以下代码进行调整：/ken-io/asp...

3、准备工作

VS Code 本身不提供 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将会看到：

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

通过母版页，我们可以方便的共用一些页面内容或者功能。但是对于一些特殊的子页面可能需要重写母版页中一些内容，或者在母版页中插入自己想呈现的内容，而不是只能将子页面呈现在固定的位置。

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>