MVC教程八:母版页(布局页)视图

一、母版页介绍和使用

母版页的扩展名为".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"]);}

原文地址:https://www.cnblogs.com/dotnet261010/p/8904778.html

时间: 2024-10-12 13:18:18

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

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

我们开发网站项目的时候,都会遇到这样的问题:就是页面怎么统一风格,有一致的外观,在之前ASP.NET的时代,我们有两种选择,一个是使用MasterPage页,一个是手动,自己在每个页面写CSS样式,但这样代码量太大了..不可取,那么到了ASP.NET MVC时代,有什么技术可以统一页面风格呢???有,那就是Layout布局视图.下面就开始学习吧. 1. 首先使用空模板,新建一个MVC Web项目: 新建完成之后,初始化状态是: 2.接着在根目录[LayoutMVC这里是]下,新建一个文件夹[Co

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

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

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

一.Views文件夹 -> Shared文件夹下的 _Layout.cshtml 母版页 @RenderBody 当创建基于_Layout.cshtml布局页面的视图时,视图的内容会和布局页面合并,而新创建视图的内容会通过_Layout.cshtml布局页面的@RenderBody()方法呈现在标签之间. @RenderPage从名称可以猜出来这个方法是要呈现一个页面.比如网页中固定的头部可以单独放在一个共享的视图文件中,然后在布局页面中通过这个方法调用,用法如下:@RenderPage(“~/

MVC之LayOut布局页

LayOut布局页,就是相当于WebForm中母版页,实现了一个代码的共用和公共布局的作用. 布局页的使用 (1)添加新项,选择MVC布局页 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> </head>

ASP.NET MVC在布局页上使用模型(model)

看到这标题有点怪,一般情况之下,我们很容易在视图与部分视图中使用模型(model),但是如果想在布局页_Layout.cshtml页中使用模型(model),按照普通方式也许没有达到预期的效果,在实现时有些情况需要注意的. 下面先按原先我们的设计,在控控制器创建三个视图操作(Action): 创建一个布局页_May15.cshtml,然后上面的三个视图均引用此布局页. 现在我们根据控制器的Action分别创建三个视图,Index.cshtml: PageA.cshtml: PageB.cshtm

ASP.NET MVC 4中如何为不同的浏览器自适应布局和视图

在ASP.NET MVC 4中,可以很简单地实现针对不同的浏览器自适应布局和视图.这个得归功于MVC中的"约定甚于配置"的设计理念. 默认的自适应 MVC 4自动地为移动设备浏览器和PC设备浏览器进行自适应.针对布局页面,默认的文件名为_Layout.cshtml,这个默认会被所有的浏览器使用.但如果我们希望在移动设备上面,呈现一个不同的布局,只需要添加一个名称为_Layout.Mobile.cshtml的布局页面就可以了.同样的规则,也适用于普通的视图页面.例如Index.cshtm

MVC系列-4.布局页

分部视图和布局页的使用 1.创建分部视图 1)右击“~/Views/Shared”文件夹,选择添加->视图. 输入View 名称”Footer”,选择复选框“Create as a partial view”,点击添加按钮. 注意:View中的Shared 共享文件夹是为每个控制器都可用的文件夹,不是某个特定的控制器所属. 2)打开Footer.cshtml,输入以下HTML 代码. <div > <nav class="navbar navbar-default&quo

全网最全ASP.NET MVC 教程汇总

全网最全ASP.NET MVC 教程汇总 MVC架构已深得人心,微软也不甘落后,推出了Asp.net MVC.小编特意整理博客园乃至整个网络最具价值的MVC技术原创文章,为想要学习ASP.NET MVC技术的学习者提供一个整合学习入口.本文从Why,What,How三个角度整理MVC 的学习资源,让学习者第一时间找到最有价值的文章,获取最彻底的ASp.NET MVC 框架知识,Let’s go! 1. Why :为什么需要ASP.NET MVC 本章主要为大家汇总了为什么学习Asp.net MV

Asp.Net MVC part45 过滤器、模板页

过滤器 使用方式自定义类继承自相应的类或接口,重写方法,作为特性使用在控制器类中重写方法 特性方式的使用注意:如果继承自接口需要让类实现FilterAttribute,才可以作为特性使用使用方式1:作为Controller或Action的特性使用方式2:在Global中注册为全局过滤器,应用于所有的Controller的Action参数类均继承自ControllerContext,主要包含属性请求上下文.路由数据.结果 身份验证过滤器在约束的Action执行前执行重写OnAuthorizatio