母版页(布局页)视图

article/2025/8/16 17:26:07

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视图为例:

_TestLayout.cshtml
在这里插入图片描述

Test.cshtml 页面

在这里插入图片描述

结果:
在这里插入图片描述
页面还继承了 _viewStart.cshtml
在这里插入图片描述

在_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"]);}

 


http://chatgpt.dhexx.cn/article/wmuYVYk3.shtml

相关文章

VS2019 asp.net母版页布局的创建与使用

asp.net母版页布局使用 工具 Visual Studio 2019 方法/步骤 1.打开Visual Studio 2019&#xff0c;点击【文件】在网站根目录上单击右键&#xff0c;选择【添加新项】 2.在弹出的【添加新项】选择【母版页】默认使用名称&#xff0c;点击【添加】 打开母版页的拆分界面&#…

ASP.NET中的母版页

何为母版页,顾名思义母版就是模版,就像在PPT里面的板式或主题一样,大框架已经有了,我们的任务就是向里面添加具体的内容。这样我们制作的所有幻灯片的外观大体都是一样的。 在ASP.NET中母版页有两种作用,一是提高代码的复用(把相同的代码抽出来),二是使整个网站…

母版页的详细使用介绍

ASP.NET 母版页概述 使用 ASP.NET 母版页可以为应用程序中的页创建一致的布局。单个母版页可以为应用程序中的所有页&#xff08;或一组页&#xff09;定义所需的外观和标准行为。然后可以创建包含要显示的内容的各个内容页。当用户请求内容页时&#xff0c;这些内容页与母版页…

ASP.NET 母版页(嵌套、访问母版页的控件和属性)

文章目录 [toc]一、母版页的嵌套二、访问母版页的控件和属性1、使用Master.FindControl()方法访问母版页上的控件2、引用MasterType指令访问母版页上的属性 友情链接&#xff1a;母版页的概述与创建 一、母版页的嵌套 嵌套就是大的容器套装小的容器。嵌套母版页就是指创建一个…

C# 母版页页面导航

C# 母版页&页面导航 母版页master页面导航站点地图SiteMapDataSource控件TreeView控件Menu控件 ASP.NET常用对象Response对象Request对象ViewState对象Server对象Session对象Cookie对象ApplicationResponse对象 母版页master localhost:50194 第一种情况&#xff1a;在he…

C#母版页

一、母版页的使用 1、概述 母版页为具有扩展名.master的ASP.NET文件&#xff0c;它具有包括静态文本、HTML元素和服务器控件的预定义布局。母版页由特殊的master指令识别&#xff0c;该指令替代普通页面.aspx中的page指令。该指令类看起来类似下面的代码&#xff1a; <% M…

html如何转换为母版页,如何在模板中指定/或取消母版页

很多时候模板中我们需要用到不同的母版页&#xff0c;那么如何在模板中引用不同母版页呢&#xff1f; 方法1、_ViewStart.cshtml中声明&#xff0c;代码如下&#xff1a;{ Layout "_Layout.cshtml"; } 模板Views目录中默认有一个全局的_ViewStart.cshtml文件&#xf…

ASP.NET 母版页

母版页 母版页的功能为提高工作效率、降低开发和维护强度。母版页应用于网站标志、广告条、导航条、版权声明等内容。 创建母版页的步骤&#xff1a; 第一步&#xff1a;打开“Microsoft Visual Studio 2010”程序&#xff0c;选择“文件”—“新建”—“项目”&#xff0c;弹…

asp.net-母版页设计

先引入几个图片&#xff1a; 母版页的.aspx代码如下&#xff1a; <% Master Language"C#" AutoEventWireup"true" CodeFile"A_TEST.master.cs" Inherits"A_TEST" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans…

html中创建母版页,自定义“我的网站”母版页

使用内容占位符控件 母版页和内容页使用一组可替换区域(也称内容占位符控件)协同工作。 每个内容占位符(在页面代码中显示为 ContentPlaceHolder)均表示可在母版页上覆盖的内容。 网站上的任何页面均可通过提供匹配的内容控件替换内容占位符中包含的任何内容。 该内容控件甚至可…

ASP.NET 母版页,内容页之间如何传参数

ASP.NET 母版页,内容页之间如何传参数 绪论:本文介绍如何使用.net 母版页(.master)和内容页(.aspx)相互传参数 母版页传值到内容页 上面可以看见母版页的时间值已经到了内容页上面了&#xff0c;那么让我们一起来看看代码怎么实现的吧&#xff01; 来看看母版页的内容代码 从…

母版页和内容页的使用

虽然母版页和内容页功能强大&#xff0c;但是其创建和应用过程并不复杂。本节和下一节将以创建如图 1 所示示例为例&#xff0c;向读者详细介绍&#xff0c;使用 Visual Stuido 2005 创建母版页和内容页的方法以及相关知识。本节的重点是创建母版页的方法。 母版页中包含的…

VS2012 ASP.NET 母版页的创建与使用

在做牛腩新闻发布系统的过程中,需要使用ASP.NET的母版页来抽出所有网页的公共部分,以便更好的复用自己的网页布局和设计. 首先我们来看如何创建一个新的母版页,如下图所示: 添加之后,如下图所示: 编写完母版页之后,在使用的时候,问题出现了,在新建Web窗体时,右下角没有视频里讲…

ASP.NET母版页

4.2母版页 4.2.1 母版页概述 用户在设计网站时经常会遇到多个网页部分内容相同的情况&#xff0c;例如&#xff1a;具有网关和内容都相同的标题栏、页脚栏、导航栏等&#xff0c;如果每个网页都设计一次&#xff0c;不仅重复劳动而且非常繁琐&#xff0c;此时&#xff0c;使用母…

ASP.NET 母版页(概述、创建)

文章目录 一、母版页概述1、母版页的运行机制2、母版页的优点 二、创建母版页三、创建内容页 一、母版页概述 母版页的主要功能是&#xff1a;创建统一的用户界面和样式。它由一个母版页和&#xff08;多个&#xff09;内容页构成&#xff0c;这些内容页和母版页合并将母版页的…

母版页的使用

一、母版页简介 使用 ASP.NET 母版页可以为应用程序中的页创建一致的布局。单个母版页可以为应用程序中的所有页&#xff08;或一组页&#xff09;定义所需的外观和标准行为。 母版之所以称为母版&#xff0c;就是将大部分网页上固定内容&#xff0c;比如导航栏&#xff0c;版权…

Arduino驱动直流电机风扇

时隔多年&#xff0c;重拾Arduino&#xff0c;先拿直流电机风扇找一下手感。配套的东西如下图所示&#xff1a;直流电机、控制板、风扇、架子。   装好之后的效果如下图所示。   本文参照参考文献中的示例代码进行测试。参考文献中的代码主要通过按钮控制风扇的不同转速&…

BLDC无刷直流电机驱动程序

1.先不考虑霍尔信号&#xff0c;先让BLDC动起来&#xff0c;如下图&#xff0c;主要驱动6个MOS管&#xff0c;有两种驱动方式。第一种方式&#xff0c;上下桥臂都给PWM信号&#xff1b;第二种方式&#xff0c;3个PWM信号3个电平信号。 2.霍尔信号接到定时器的输入捕获&#xf…

直流电机驱动实验

直流电机驱动实验 实验现象 本实验采用小型直流电机驱动L9110驱动一个小型直流电机 理论学习 按照上图接线完成后可以对连接在驱动板上的电机经行控制。 A1.A20.0 时为停转 A1.A21.0 时为正转 A1.A20.1 时为反转 PA 为 PWM 波输入 G 为共地引脚 其中PWM频率最高为 60KHZ&a…

大功率双路直流电机驱动板的设计源文件

大功率双路直流电机驱动板的设计源文件&#xff0c;包括原理图、PCB、原理图与PCB器件库、BOM清单、stm32测试源代码。 &#xff08;注意&#xff1a;出售的是设计资料&#xff0c;出售的是资料&#xff0c;不是实际的产品哈&#xff09;&#xff0c;另外可对该图的设计原理&am…