【asp.net core 系列】5 布局页和静态资源

在之前的4篇的内容里,我们较为详细的介绍了路由以及控制器还有视图之间的关系。也就是说,系统如何从用户的HTTP请求解析到控制器里,然后在控制器里处理数据,并返回给视图,在视图中显示出来。这一篇我将为大家介绍基础的最后一部分,布局页和静态资源引入。

1. 布局页

在控制器和视图那一篇,我们了解到_ViewStart 里设置了一个Layout属性的值,这个值正是用来设置布局页的。所谓的布局页,就是视图的公用代码。在实际开发中,布局页通常存放我们为整个系统定义的页面框架,视图里写每个视图的页面。

回顾一下,默认的_ViewStart里的内容是:

@{ Layout = "_Layout"; }

默认的布局页指定的是名为_Layout的布局页,在本系列第三篇中,我们得知这个视图应当在Shared文件夹下,那我们进去看一下这个视图有什么内容:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - MvcWeb</title> <link href="http://www.likecs.com/~/lib/bootstrap/dist/css/bootstrap.min.css" /> <link href="http://www.likecs.com/~/css/site.css" /> </head> <body> <header> <nav> <div> <a asp-area="" asp-controller="Home" asp-action="Index">MvcWeb</a> <button type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <div> <ul> <li> <a asp-area="" asp-controller="Home" asp-action="Index">Home</a> </li> <li> <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> </li> </ul> </div> </div> </nav> </header> <div> <main role="main"> @RenderBody() </main> </div> <footer> <div> &copy; 2020 - MvcWeb - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> </div> </footer> <script src="http://www.likecs.com/~/lib/jquery/dist/jquery.min.js"></script> <script src="http://www.likecs.com/~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="http://www.likecs.com/~/js/site.js" asp-append-version="true"></script> @RenderSection("Scripts", required: false) </body> </html>

这是默认的布局页内容,看着挺多的,但是除了一些html代码,里面还有一些关键的地方需要注意。

1.1 RenderSection

RenderSection 分部渲染,在页面中创建一个标记,表示这个页面块将在子视图(或者是路由的实际渲染视图)中添加内容。

来,我们看一下微软官方给的注释:

In layout pages, renders the content of the section named name.

意思就是在布局页中,渲染名称为name的分部内容。

新创建一个分布页,名称为_Layout1:

<html> <head> <title>Render 测试</title> </head> <body> @RenderSection("SectionDemo") </body> </html>

这个布局页里什么都没有,只有一个RenderSection。现在我们新建一个控制器:

using Microsoft.AspNetCore.Mvc; namespace MvcWeb.Controllers { public class RenderTestController : Controller { public IActionResult Index() { return View(); } } }

创建对应的视图:

Views / RenderTest/Index.cshtml

先设置布局页为_Layout1:

@{ Layout = "_Layout1"; }

先试试启动应用,访问:

:5006/RenderTest/Index

正常情况下,你应该能看到这个页面:

image-20200603223436499

仔细看一下信息,意思是在 RenderTest/Index.cshtml 视图中没有找到 SectionDemo 的分部内容。

那么,如何在视图中设置分部内容呢?

@{ Layout = "_Layout1"; } @section SectionDemo{ <h1>你好</h1> }

使用 @section <Section 名称> 后面跟一对大括号,在大括号中间的内容就是这个section(分部)的内容。

重启应用,然后刷新页面,你能看到这样的页面:

image-20200603224339206

如果不做特殊要求的话,定义在布局页中的分部块,视图必须实现。当然,RenderSection还有一个参数,可以用来设置分部不是必须的:

public HtmlString RenderSection(string name, bool required); 1.2 RenderBody

先看下微软给的官方注释:

In a Razor layout page, renders the portion of a content page that is not within a named section.

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzfxdd.html