专栏首页Core NetASP.NET Core 2.0 : 四. _Layout与_ViewStart

ASP.NET Core 2.0 : 四. _Layout与_ViewStart

本章我们新建一个项目,并通过这个项目熟悉一下_Layout与_ViewStart以及它们的加载顺序.

新建一个项目

首先, 文件->新建一个解决方案

选择.Net Core 的APP下面的ASP.NET Core Web App(MVC)

Next

设置解决方案的名称(和Xcode的界面风格有点像), 输入FL.WeightManager, 做一个每天记录体重的应用

点击Create.

项目新建完毕, 项目的文件结构上一章已经说过了.

_layout的应用

新建好的项目默认运行效果如下图

页面主要分三部分, 上面的header, 下面的footer, 点击上面菜单总的Home、About和Contact切换一下页面看一下

这两部分都是不变的, 只有中间部分在变.

打开Shared文件夹下面的_layout.cshtml页面看一下, header和footer都是定义在这里的, 

而中间变的部分是 @RenderBody().也就是我们经常要改变的地方了.

现在将主页改变一下, 打开Home文件夹下的Index文件,将里面的一大堆代码改成如下代码

 1 @{
 2     ViewData["Title"] = "主页";
 3 }
 4 <table class="table table-hover">
 5     <thead>
 6         <tr>
 7             <th>序号</th>
 8             <th>日期</th>
 9             <th>体重</th>
10             <th>备注</th>
11         </tr>
12     </thead>
13     <tbody>
14         <tr>
15             <td>1</td>
16             <td>2018-02-15</td>
17             <td>66.6</td>
18             <td>除夕,胖了</td>
19         </tr>
20         <tr>
21             <td>2</td>
22             <td>2018-02-16</td>
23             <td>68.8</td>
24             <td>春节,又重了</td>
25         </tr>
26     </tbody>
27 </table> 

刷新一下页面

看起来效果还不错, 可能会注意到, 这个table有个class  <table class="table table-hover"> ,

这个class定义在哪里呢.

再次打开_layout文件, 可以看到里面在Development环境下引用了bootstrap的css

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>

所以可以把一些"通用"的css和js的引用放在layout文件里, 避免重复写这些引用.

顺便把header和footer中显示的项目名称改一下, 然后分别打开Index和About这些页面, Header和Footer都统一改变了.

如下图的About页面.

但是我们在这个Index页中没有对这个模板做引用, 是通过什么方式引用的呢?

_ViewStart的应用

回顾修改后的Index页面, 我们并没有写 Layout = "_Layout" 这样的代码, 这是因为已经在_ViewStart中默认设置了

_ViewStart中只有这一句

@{
    Layout = "_Layout";
}

如果我们在Index页面中添加一句 Layout=null 如下,

@{
    Layout=null;
    ViewData["Title"] = "主页";
}

再次刷新页面, 样子变成了这样

Header和Footer以及Table的样式全都没有了, 是因为这些本来都写在_Layout中, 现在失去了对_Layout的引用, 这些也就消失了.

总结: _ViewStart对模板页做了默认的设置, 除非显示的写明Layout=XXX, 否则会采用_ViewStart中的设置.

       所以未做设置和设置 Layout = "_Layout" 的效果是一样的.

 _ViewStart、_Layout和Index(实际页面)的加载顺序

 加载顺序是: _ViewStart =>Index=>_Layout.

1._ViewStart在所有View加载之前加载, 设置了默认的模板页.

2.接着由Controller指定的页面查找Index.cshtml加载, 并读取该页面的Layout设置. 

3.根据Index页面的Layout设置的模板页查找对应的模板页加载.

将_ViewStart中的 Layout = "_Layout" 改为 Layout = "_Layout1" , 再次运行, 页面会出现如下找不到模板的错误.

An unhandled exception occurred while processing the request.

InvalidOperationException: The layout view '_Layout1' could not be located. The following locations were searched:
/Views/Home/_Layout1.cshtml
/Views/Shared/_Layout1.cshtml
Microsoft.AspNetCore.Mvc.Razor.RazorView.GetLayoutPage(ViewContext context, string executingFilePath, string layoutPath)

View的查找规则: 先查找Controller对应的文件夹(这里是Home), 若未找到则到Shared文件夹查找, 若最终未找到则提示错误.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ASP.NET Core 2.1 : 十四.静态文件与访问授权、防盗链

    我的网站的图片不想被公开浏览、下载、盗链怎么办?本文主要通过解读一下ASP.NET Core对于静态文件的处理方式的相关源码,来看一下为什么是wwwroot文件...

    FlyLolo
  • 微信小程序:动画(Animation)

    官方文档是这样说的:①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动画数据传递给组件的 ani...

    FlyLolo
  • ASP.NET Core 2.2 十八.各种Filter的内部处理机制及执行顺序

    ASP.NET core 的Filter是系统中经常用到的,本文详细分享一下各种Filter定义、执行的内部机制以及执行顺序。(ASP.NET Core 系列目...

    FlyLolo
  • 读书笔记: 博弈论导论 - 01 - 单人决策问题

    绿巨人
  • PHP打印出库单,下载与打印

    出库单打印出三色单,这个很普遍,以下用PHP来实现出库单的打印预览,主要用到tcpdf插件,整合到laravel项目中。tcpdf插件可以到官网下载最新的版本。...

    php007
  • Hibernate【inverse和cascade属性】知识要点

    Inverse属性 Inverse属性:表示控制权是否转移.. true:控制权已转移【当前一方没有控制权】 false:控制权没有转移【当前一方有控制权】 I...

    Java3y
  • 200字作文机器人找出8处错误,你觉得它改得正确吗?

    批改作文是非常令老师崩溃的一件事情,尤其是歪果仁,还是初学者。最近,浙江外国语学院国际学院把批改作文这件事情交给了机器人,据了解,这个AI机器人还非常高效,仅用...

    机器人网
  • 通过键盘方向键控制TreeView节点的移动

    本文转载:http://dengzebo.blog.163.com/blog/static/18867406201032141932204/

    跟着阿笨一起玩NET
  • JavaScript异步编程

    Javascript语言的执行环境是”单线程”(single thread)。所谓”单线程”,就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任...

    奋飛
  • 怎么对ChannelHandler做测试?

    爬蜥

扫码关注云+社区

领取腾讯云代金券