专栏首页Ken的杂谈ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门
原创

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ASP.NET Core 入门教程 5、ASP.NET Core MVC 视图传值入门

    本篇代码基于以下代码进行调整:https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapt...

    KenTalk
  • ASP.NET Core 入门教程 7、ASP.NET Core MVC 分部视图入门

    本篇代码以下代码进行调整:https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapter...

    KenTalk
  • ServiceStack.Host.MVC vs ASP.NET MVC

    KenTalk
  • MySQL创建视图

    视图定义中引用的表或视图必须存在。但是,创建完视图后,可以删除定义引用的表或视图。可使用 CHECK TABLE 语句检查视图定义是否存在这类问题。

    弄啥嘞
  • SQL学习笔记七之MySQL视图、触发器、事务、存储过程、函数

    视图是一个虚拟表(非真实存在),其本质是【根据SQL语句获取动态的数据集,并为其命名】,用户使用时只需使用【名称】即可获取结果集,可以将该结果集当做表来使用。

    Jetpropelledsnake21
  • 如何画出一张合格的技术架构图?

    系统架构是概念的体现,是对物/信息的功能与形式元素之间的对应情况所做的分配,是对元素之间的关系以及元素同周边环境之间的关系所做的定义。

    刘盼
  • 『互联网架构』调用链系统服务端实现(115)

    a. 初化一个限定容量的阻塞队列 b. 采集器抓取数据并上传至队列,超出容量直接丢弃 c. 线程池分配上传线程 d. 控制器取出指定数量数据,如果数量小于0线程...

    IT故事会
  • 编程小知识之 CanvasScaler 的一点知识

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    用户2615200
  • 【Rust日报】2020-02-08 wasm-pack 0.9.1发布了!

    wasm-pack,该工具旨在成为一站式平台,用于构建Rust生成的WebAssembly,希望使用它与JavaScript,浏览器或Node.js进行互操作。...

    MikeLoveRust
  • 【转载】 屏蔽Ansible中的危险命令方法

    原文地址:https://www.jianshu.com/p/f8cbc12180b8

    二狗不要跑

扫码关注云+社区

领取腾讯云代金券