EF5+MVC4系列(10) mvc的布局页面 _ViewStart.Cshtml

当客户端请求 /Product/Index的时候, 如果在视图的根目录下有 _ViewStart.Cshtml 就会先执行这个,再去执行 Product文件夹下的Index视图, 如果Product文件夹下也有 _ViewStart.Cshtml文件,那么优先执行这个文件,再去执行 Index视图

根目录下的ViewStart中的数据,可以通过 Page.Title这样 或者是 PageData[“key”] 这样传递给 下面的Product下的ViewStart视图,直至到目标 Index视图

如果根目录下的ViewStart文件中指定了 LayOut为 默认视图的话

那么也就表示,后续的子视图,都会采用这个Layout属性,当然了,子视图也可以使用 Layout=null 来清除默认视图.

我们先去看看这个layout.cshtml默认视图

注释:

@RenderSection("scripts", required: false)  表示,在 父模板中,占了一个坑,这个坑是由子模板去填的,最后会把子模板中的数据,放到这里来.

@RenderBody  这是主要的坑,在子视图中的除了上面  RenderSection中的数据外的其他的代码,都会填在这里来.

 

下面我们回到 根目录下的 ViewStart.cshtml ,我们看看如何从 根目录下的这个视图,传递数据到最后的  Product下的 Index视图.并且看看,如果在跟目下的ViewStart.cshtml中有代码,并且在Product文件夹下的ViewStart也有代码,那么到最后的目标视图 index中也有代码,这3中代码是如何排序的?

答案是,依次进行  比如 根Viewstart中有的代码,会排在 Product下的viewstart的前面,然后把这2者的代码,又会带到 目标Index视图的前面,最后,把这3者的代码,回填到 layout.cshtml默认视图 里面的  RendyBody处  (如果在目标index中,有section节点,会回填到 layout.cshtml中的 RenderSection 处)

下面是流程图

1: 根目录下的 ViewStart.cshtml   指定了Layout 以及传递了 Page.name 这样一个值

2: Product文件夹下 ViewStart.cshtml   .由于 Product下的ViewStart文件,并没有设置 Layout的值,那么这个时候,实际这个Layout值还是根目录下的ViewStart里面的Layout的值,相当于是直接继承了过来

3: 目标Product下的 Index.cshtml 视图文件. 这个目标页也没有设置layout属性,那么也就是表示,是直接从刚才的Product下的Viewstart中继承这个layout值.

我们index视图中发现有个 Section节点(名字为Scripts),那么这个节点,就会去回填给 默认的Layout中的那个名字为 Scripts的 Section坑

index视图,会继承 根目录下的ViewStart中的代码,还会继承product下的ViewStart的代码,最后加上除了刚才的Section节点中的内容的代码,这3者的总和,最后会回填给layout中的RendyBody这个坑.

4:最后回填之后 显示的效果

打开查看html源码,就能看到执行的顺序了

 

EF5+MVC4系列(10) mvc的布局页面 _ViewStart.Cshtml

时间: 2024-10-13 13:53:17

EF5+MVC4系列(10) mvc的布局页面 _ViewStart.Cshtml的相关文章

EF5+MVC4系列(8) ActionResult的返回值

我们在MVC的代码中,经常会看到这样的一个 代码 可能有人会有疑问,既然我定义的是ActionResult,为什么返回值会是View方法呢? 其实这个View方法的返回值的类型是ActionResult的子类ViewResult   我们查看MVC源码可以看到 ActionResult是个抽象类,  ActionResult 有多个派生类(子类),有的子类又有子类 (例如 ViewResultBase 就有  ViewResult子类 和  PartialViewResult 这2种子类) 每个

EF5+MVC4系列(11)在主视图中用Html.RenderPartial来调用分部视图(ViewDate传值);在主视图中用ajax调用action并在action中return PartialView返回分部视图(return view 和return PartialView 的区别)

一:主视图中调用子视图 在没有使用母版页的主视图中(也就是设置了layout为null的视图中),使用 Html.RenderPartial  可以调用分部视图(只调用视图,不调用action),并且使用 ViewData 来从主Action里面传值到主视图,或者是分布视图 最后生成的html如下   二:在主视图中用ajax调用子action并在子action中使用return PartialView返回分布视图(return view 和return PartialView 的区别) 这种情

MVC的布局页,视图布局页和分布页的使用

一,结构如下图 二,布局页和视图布局页 1>使用方法一 _ViewStart.cshtml @{ Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>视图布局页_ViewStart.cshtml</h2> _Layout.cshtml <!DOCTYPE html> <html> <head> <meta name="viewport" content

【JQuery NoviceToNinja系列】01 开篇 Html页面设计和布局

01 开篇 Html页面设计和布局 index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>StarTrackr !</title&

AngularJs 入门系列-1 使用 AngularJs 搭建页面基本框架

每当看到前端程序员在脚本.样式.表单处理逻辑中苦苦挣扎的时候,我就在想,为什么不用Angular Js 呢? Angular Js 支持页面前端的 MVC 模式开发,在 Angular JS 的支持下,我们可以将页面前端处理的数据与页面展示进行分离,实现优雅的代码结构. 首先,我们需要到 AngularJs 的官网下载这个脚本库. 地址:https://angularjs.org/ 不过,这个网站经常被封,你也可以直接在这里下载: http://files.cnblogs.com/haogj/A

七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理

注:本文为学习摘录,原文地址为:http://www.cnblogs.com/powertoolsteam/p/MVC_five.html 目录 实验22——添加页脚 实验23——实现用户角色管理 实验24——实现项目外观一致性 实验25——使用Action  过滤器让页眉和页脚代码更有效 总结 实验22——添加页脚 在本实验中,我们会在Employee 页面添加页脚,通过本实验理解分部视图. 什么是“分部视图”? 从逻辑上看,分部视图是一种可重用的视图,不会直接显示,包含于其他视图中,作为其视

asp.net core系列 44 Web应用 布局

原文:asp.net core系列 44 Web应用 布局 一.概述 MVC的视图与Razor页面经常共享视觉和程序元素,通过使用布局来完成,布局还可减少重复代码.本章演示了以下内容的操作方法:(1)使用通用布局,(2)自定义布局,(3) 共享指令,(4)在呈现Razor页面或MVC视图之前运行通用代码. 大多数 Web 应用都有一个通用布局,可在页面间切换时,为用户提供一致体验. 布局通常包括应用页头.导航或菜单.页脚等常见的用户界面元素,还有经常使用script和css等常用的 HTML 结

从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件

一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页面: 技术博客风格: 详情页风格: 详情页留言风格: 1.3后台风格: 表格风格: 博客发布风格: 以上看到的系统页面是目前系统完成的风格,以后页面设计都参考这些页面风格. 二.使用前端web框架以及插件说明 2.1选择前端web框架,我找了很多框架,以前学过自学过bootstrap觉得对于没有前端

MVC 从后台页面 取前台页面传递过来的值的几种取法

MVC 从后台页面 取前台页面传递过来的值的几种取法 <1>前台页面 Index视图 注意:用户名表单的name值为txtName 密码表单的name值为txtPassword 1 <html> 2 <head> 3 <meta name="viewport" content="width=device-width" /> 4 <title>Test</title> 5 </head>