一、母版页介绍和使用

母版页的扩展名为".cshtml"，也叫做视图布局页，它相当于网页的模板。在其他网页中，只要引用了母版页，母版页的页面内容就可以自动显示出来，设计者可以修改引用的母版页中预留的部分，其他部分保持不变，这样就可以使多个页面的风格保持一致，给网页设计带来了很大的方便。

1、创建母版页视图的要点

(1)、在Views的子文件夹Shared文件夹里面添加。

(2)、以“_”前缀作为开头。

(3)、以"Layout.cshtml"作为结束。

2、MVC母版页里的三个功能点：

(1)、RenderBody-子页面内容占位符。

(2)、RenderPage-引用呈现一个页面。

(3)、RenderSection-内容占位符。

如果新建一个MVC程序，里面有没有使用母版页视图呢？查看Index视图：

从上面的截图中可以看出，Index里面只有两个DIV，但是一个基本的网页代码需要有HTML、head、body等元素标签组成，但是这里面并没有。同时，浏览index视图：

这时查看网页源代码：

从上面的截图中可以看到有HTML、head、body等HTML元素，到这里可以看出，MVC中已经使用了母版页。MVC中默认使用Shared文件夹里面的_ViewStart.cshtml视图。

二、RenderBody

RenderBody的作用是子页面内容占位符。即母版页中使用了RenderBody的地方会使用子页面的内容来代替。以_Layout视图为例：

在_Layout母版页中使用了RenderBody，所以运行的时候这部分内容将会被Index里面的内容代替。

下面我们自己重新定义一个母版页，同时定义一个子页面来使用这个母版页来查看RenderBody的作用。

1、添加母版页

在Shared文件夹上面右键添加，选择MVC5布局页

2、命名为_TestLayout

生成的模板页代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>@ViewBag.Title</title>

</head>

<body>

    <div>

        @RenderBody()

    </div>

</body>

</html>

3、修改母版页，修改后的母版页代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>@ViewBag.Title</title>

</head>

<body>

    <div>

        我是母版页，在子页面中不允许更改

        <!--内容页占位符-->

        @RenderBody()

    </div>

</body>

</html>

4、创建子页面使用母版页

在Home控制器里面添加一个ActionName为Test的Action方法，并添加视图：

生成的Test视图如下图所示：

注意：如果Layout=null，则表示不使用母版页视图。

修改Test视图也，修改后的代码如下：

@{

    ViewBag.Title = "Test";

    Layout = "~/Views/Shared/_TestLayout.cshtml";

}

<h2>Test</h2>

<div>

    我是子页面-home控制器的Test方法

</div>

5、运行程序，浏览Test视图

通过运行结果和查看网页源代码，可以看出是母版页和子页面组成的页面。

三、RenderPage

RenderPage：引用呈现一个页面，即在一个页面中引用呈现另外一个页面，也就是说另外一个页面是这个页面的一部分。

以网页尾部布局为例说明RenderPage。

1、在Shared文件夹里面新添加一个分部页，并命名为FooterPartial。

2、修改分部也

修改后的代码如下：

<div>

    我是页脚

</div>

3、在母版页中使用分部页

在RenderBody的下面使用RenderPage，RenderPage方法的参数如下图所示：

从上图中可以看出，使用RenderPage()方法的时候，只需知道分部页的路径即可，修改后的母版页代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>@ViewBag.Title</title>

</head>

<body>

    <div>

        我是母版页，在子页面中不允许更改

        <!--内容页占位符-->

        @RenderBody()

        @RenderPage("_FooterPartial.cshtml")

    </div>

</body>

</html>

4、运行结果

四、RenderSection

先来看下面一个例子：

在Test视图里面添加一段脚本，修改后的Test视图代码如下：

这是在运行程序，结果如下：

通过运行结果发现脚本在视图内容呈现之前先执行了，这显示不是我们想要的效果。我们希望是在整个页面都加载完成之后再执行脚本。修改布局页代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>@ViewBag.Title</title>

</head>

<body>

    <div>

        我是母版页，在子页面中不允许更改

        <!--内容页占位符-->

        @RenderBody()

        <div style="color:blue">

            <p>

                <!---->

                @RenderSection("SectionContent")

            </p>

        </div>

        @RenderPage("_FooterPartial.cshtml")

    </div>

</body>

</html>

子页面修改如下：

运行结果：

如果在母版页中定义了RenderSection，而在子页面中并没有对定义的RenderSection进行处理，那么结果是怎样的呢？

从上图中可以看出，如果在子页面中没有对定义的RenderSection进行处理，程序运行的时候直接就报错了：SectionContent节未定义。如果不想处理RenderSection该如何修改呢？

RenderSection方法截图如下：

如果不想处理RenderSection，那么required参数设置为false就可以了，修改后的布局页代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>@ViewBag.Title</title>

</head>

<body>

    <div>

        我是母版页，在子页面中不允许更改

        <!--内容页占位符-->

        @RenderBody()

        <div style="color:blue">

            <p>

                <!---->

                @RenderSection("SectionContent",false)

            </p>

        </div>

        @RenderPage("_FooterPartial.cshtml")

    </div>

</body>

</html>

这时在运行程序就可以正常运行了。

通过上面的例子，我们可以使用下面的方法解决开头例子中遇到的问题：在body元素的结束标签上面定义RenderSection，这时无论在子页面的任何位置定义script脚本，都会在页面全部加载完成以后才执行脚本。

布局页定义如下：

五、总结

1、RenderBody

在Razor引擎中没有“母版页”，取而代之的是叫做“布局”的页面(_Layout.cshtml)放在了共享视图文件夹中。在这个页面中，会看到标签里面有这样一条语句：
@RenderBody()
其实它的作用和母版页中的服务器控件类似，当创建基于此布局页面的视图时，视图的内容会和布局页面合并，而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在标签之间。
这个方法不需要参数，而且只能出现一次。

2、RenderPage

从名称可以猜出来这个方法是要呈现一个页面。比如网页中固定的头部可以单独放在一个共享的视图文件中，然后在布局页面中通过这个方法调用，用法如下：
@RenderPage("_FooterPartial.cshtml")
可以带参数
@RenderPage("_FooterPartial.cshtml",new {parm="my",parm2="you"})
调用页面获取参数：
//获取RenderPage()传递过来的参数
@PageData["param"]

3、RenderSection

布局页面还有节(Section)的概念，也就是说：如果某个视图模板中定义了一个节，那么可以把它单独呈现出来，用法如下：
@RenderBody()
@RenderPage("_FooterPartial.cshtml")
//模板里添加了一个节
@RenderSection("head")
当然还要在视图中定义节，否则会出现异常：
@secion head{
//do
}
为了防止因缺少节而出现异常，可以给RenderSection()提供第2个参数：
@RenderSection("head",false)
或者
@if(IsSectionDefined("head"))
{
@RenderSection("head",false)
}
else
{
<p>head Section is not defined!</p>
}

4、@Html.Partial

Partial每次都会创建自己的TextWriter实例并且把内容缓存到内存中，最后把所有write输出的内容发送到一个MvcString对象中。
更多时候我们会使用@{Html.RenderPartial("Details");}而不是@Html.Partial。
Html.RenderPartial()和@Html.Partial的区别：
Html.RenderPartial()直接输出至当前HttpContext（因为是直接输出，所以性能好）。
Html.Partial 将视图内容直接生成一个字符串并返回（相当于有个转义的过程）。
RenderPage()和RenderPartial()的区别
RenderPage()调用的页面只能使用其传递过去的数据。
RenderPartial()是可以使用ViewData、model等数据的。
如：@{Html.RenderPartial("BasicChart",model);}
用这个重载可以在部分视图里使用强类型，然后在主视图中使用第二个参数传model过去。
@{Html.RenderPartial("BasicChart",ViewData["myData"]);}

MVC教程八：母版页(布局页)视图的更多相关文章

  1. 2017.3.31 spring mvc教程（七）多视图控制器

    学习的博客:http://elf8848.iteye.com/blog/875830/ 我项目中所用的版本:4.2.0.博客的时间比较早,11年的,学习的是Spring3 MVC.不知道版本上有没有变 ...

  2. MVC学习系列5--Layout布局页和RenderSection的使用

    我们开发网站项目的时候,都会遇到这样的问题:就是页面怎么统一风格,有一致的外观,在之前ASP.NET的时代,我们有两种选择,一个是使用MasterPage页,一个是手动,自己在每个页面写CSS样式,但 ...

  3. ASP.NET MVC中的嵌套布局页

    在WEB窗体模式中,用惯了母版页,并且常有母版页嵌套的情况. 而在MVC模式下,对应母版页的,称作为布局页.默认的布局页为 ~/Views/Shared/_Layout.cshtml.默认每个页面都会 ...

  4. ASP.NET MVC教程八：_ViewStart.cshtml

    一.引言 _ViewStart.cshtml是在ASP.NET MVC 3.0及更高版本以后出现的,用Razor模板引擎新建项目后,Views目录下面会出现一个这样的文件: 打开_ViewStart. ...

  5. MVC教程八：缓存过滤器

    缓存过滤器用来输出页面缓存,其用法如下图所示: 注意: Duration:表示缓存多少秒;VaryByParam:表示缓存是否随地址参数而改变.OutputCache除了可以定义在Action方法上面 ...

  6. ASP.NET MVC 5 学习教程：修改视图和布局页

    原文 ASP.NET MVC 5 学习教程:修改视图和布局页 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符串 ...

  7. MVC视图布局页常用代码

    1.在视图 Views 中新建文件夹  Shared 2.在 Shared 中新建布局页-母版页   _Layout.cshtml @{ Layout = null; } <!DOCTYPE h ...

  8. MVC的布局页，视图布局页和分布页的使用

    一,结构如下图 二,布局页和视图布局页 1>使用方法一 _ViewStart.cshtml @{ Layout = "~/Views/Shared/_Layout.cshtml&quo ...

  9. ASP.Net MVC 布局页 模板页 使用方法详细说明

    一.Views文件夹 -> Shared文件夹下的 _Layout.cshtml 母版页 @RenderBody 当创建基于_Layout.cshtml布局页面的视图时,视图的内容会和布局页面合 ...

随机推荐

  1. JSON.toJSONString中序列化空字符串遇到的坑

    前言 最近在做系统Bug修复时遇到了一个问题,调用其他服务时传递的参数和自己预先的不一致,例如Map中有10条记录,然后使用JSON.toJSONString 包装后进行网络传递,但是通过调试发现接收 ...

  2. MySQL 死锁与日志二三事

    最近线上 MySQL 接连发生了几起数据异常,都是在凌晨爆发,由于业务场景属于典型的数据仓库型应用,白天压力较小无法复现.甚至有些异常还比较诡异,最后 root cause 分析颇费周折.那实际业务当 ...

  3. php分享二十八：mysql运行中的问题排查

    一:杀掉mysql连接的方法: kill thread_id:  杀掉当前进程,断开连接 kill query thread_id: 只杀掉某连接当前的SQL,而不断开连接. 批量杀死MySQL连接的 ...

  4. java将数据从List转换Map

    一.多对多 -> 一对多 二.代码实现 /** * 1个国家下所有城市,一对多关系 * 组装成Map结构返回 **/ public Map<String,List<JSONObjec ...

  5. Java：concurrent包下面的Collection接口框架图（ CopyOnWriteArraySet, CopyOnWriteArrayList,ConcurrentLinkedQueue,BlockingQueue）

    Java集合大致可分为Set.List和Map三种体系,其中Set代表无序.不可重复的集合:List代表有序.重复的集合:而Map则代表具有映射关系的集合.Java 5之后,增加了Queue体系集合, ...

  6. bit,Byte,Word,DWORD（DOUBLE WORD,DW）

    1个二进制位称为1个bit,8个二进制位称为1个Byte,也就是1个字节(8位),2个字节就是1个Word(1个字,16位),则DWORD(DOUBLE WORD)就是双字的意思,两个字(4个字节/3 ...

  7. Python Socket网络编程详解

    Socket 简介 socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. s ...

  8. how many shards and replicas should be set for Elastic Search

    https://cpratt.co/how-many-shards-should-elasticsearch-indexes-have/ https://blog.trifork.com/2014/0 ...

  9. u3d中的INput

    属性 属性: 功能: 轴 (Axes) 包含当前工程的所有定义的输入轴:数目 (Size) 该工程中不同输入轴的数量,元素 0.1.... 是要修改的特定的轴. 名称 (Name) 在游戏启动器中以及 ...

  10. lua 的 table 处理

    lua 的整体效率是很高的,其中,它的 table 实现的很巧妙为这个效率贡献很大. lua 的 table 充当了数组和映射表的双重功能,所以在实现时就考虑了这些,让 table 在做数组使用时尽量 ...