ASP.NET MVC使用母版页视图

2024-08-03 17:05:40

一、母版页介绍和使用

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

到此这篇关于ASP.NET MVC使用母版页视图的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

详解Asp.Net母版页元素ID不一致的体现

本文介绍了Asp.Net母版页元素ID不一致的体现,分享给大家,具体如下; <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" Theme="style" AutoEventWireup="true" CodeFile="r_Balance.aspx.cs" Inherits="Report_r_Balance"
asp.net使用母版页中使用ajax脚本取数据

方法如下: 1. 页面中拖入ScriptManager.以便于使用Ajax脚本.同时放在其它客户端控件,用于触发NetPost方法.这里不列出客户端控件. 复制代码代码如下: <asp:ScriptManager ID="smMaster" runat="server" ScriptMode="Auto" EnablePageMethods="true"> </asp:ScriptManager> 2
浅谈Asp.Net母版页的相关知识

Asp.Net母版页的相关知识母版页的使用与普通页面类似,可以在其中放置文件或者图形.任何的HTML控件和Web控件,后置代码等.母版页的扩展名以.master结尾,不能被浏览器直接查看.母版页必须在被其他页面使用后才能进行显示. 它的使用跟普通的页面一样,可以可视化的设计,也可以编写后置代码.与普通页面不一样的是,它可以包含ContentPlaceHolder控件,ContentPlaceHolder控件就是可以显示内容页面的区域. 母版页仅仅是一个页面模板,单独的母版页是不能被用户所访问的
ASP.NET下母版页和内容页中的事件发生顺序整理

母版页控件 Init 事件. 内容控件 Init 事件. 母版页 Init 事件. 内容页 Init 事件. 内容页 Load 事件. 母版页 Load 事件. 内容控件 Load 事件. 内容页 PreRender 事件. 母版页 PreRender 事件. 母版页控件 PreRender 事件. 内容控件 PreRender 事件.
ASP.NET 2.0 中的创建母版页

虽然母版页和内容页功能强大,但是其创建和应用过程并不复杂.本节和下一节将以创建如图1所示示例为例,向读者详细介绍,使用Visual Stuido 2005创建母版页和内容页的方法以及相关知识.本节的重点是创建母版页的方法. 母版页中包含的是页面公共部分,即网页模板.因此,在创建示例之前,必须判断哪些内容是页面公共部分,这就需要从分析页面结构开始.图1所示显示的是一个页面截图.在下文中,暂称该页面名为Index.aspx,并且假设其为某网站中的一页.通过分析可知,该页面的结构如图5所示. 图5 页
asp.net母版页如何使用

计算机专业的很多同学临近毕业了,才着急怎么做一个毕业设计来进行答辩,很短的时间是不可能完成的,今天就先跟着小编的步伐,学习asp.net母版页的使用,快速掌握这个实用技巧,相信一定在大家的毕业设计过程中发挥巨大的作用. 工具/原料 Visual Studio 2008 方法/步骤打开Visual Studio 2008,点击[文件][打开网站]找到网站根目录文件夹,点击[打开] 在网站根目录上单击右键,选择[添加新项] 在弹出的[添加新项]选择[母版页]默认使用名称,点击[添加] 打开母版页的
ASP.NET中母版页和shtml实例入门

本文较为深入浅出的分析了ASP.NET中母版页和shtml.分享给大家供大家参考.具体分析如下: 母版页创建和使用母版页: 1. 创建Webform的母版页(MasterPage) 2. 创建使用母版页的窗体(ContentPage). 3. 母版页使用ContentPlaceHolder挖坑,"使用母版页的窗体"用Content填坑母版页是服务器帮我们将页面拼接response给浏览器的. 但是,母版页太笨重.推荐使用shtml. shtml ServerSideInclude(
Asp.Net套用母版页后元素ID不一致(个人总结)

在内容页里,在这个标签对里: <asp:Content ID="content" ContentPlaceHolderID="MainContent" runat="server"> </asp: Content > 一.form的ID变化. <form id="form1″ runat="server"> <form name="aspnetForm"
浅谈Asp.Net母版页和内容页运行机制

从上面的讲解中可以看出,单独的母版页是不能被用户所访问的.没有内容页支持,母版页仅仅是一个页面模板,没有更多的实用价值.同样道理,单独的内容页没有母版页的支持,也不能够应用.这两者是不可分割的,只有同时正确创建和使用母版页及内容页,才能发挥它们的强大功能.为了便于读者理解,有必要讲解一下母版页与内容页的运行机制. 母版页和内容页的运行过程可以概括为以下5个步骤. 用户通过输入内容页的URL来请求某内容页. 获取内容页位置后,读取内容页@ Page指令.如果该指令引用一个母版页,则读取该母版页.
ASP.Net巧用窗体母版页实例

本文实例讲述了ASP.Net巧用窗体母版页的方法.分享给大家供大家参考.具体分析如下: 背景:每个网页的基本框架结构类似: 浏览网站的时候会发现,好多网站中,每个网页的基本框架都是一样的,比如,最上面都是网站的标题,中间是内容,最下面是网站的版权.开发提供商等信息: 在这些网页中,表头.底部的样式和内容都是一样的,不同的只是中间的内容. 因此在制作网站时,可以将这些共同的东西分离出来,放到"窗体母版页"中,在需要的时候嵌套就可以. 巧用窗体母版项: 下面就开始行动(本文是以Visual
ASP.NET母版页基础知识介绍

模板页是做什么的? 利用模板页可以方便快捷的创建统一风格的ASP.NET网站,并且容易管理和维护,提高了效率. 模板页为网页定义所需要的外观和标准,在母版的基础上创建包含显示内容的各个内容页.当用户请求内容页时,这些内容页与母版页合并,这样,模板页的布局与内容页的布局就可以组合在一起输出了. 模板页一般用来: 1.通过修改模板页来处理网页的通用功能. 2.可以方便的创建一组控件和代码,并应用于一组网页. 3.通过允许控制占位符控件的呈现方式,模板页可以在细节上控制最终页的布局. 模板页与普通页
在ASP.NET 2.0中操作数据之三：创建母版页和站点导航

导言通常,用户友好的个性化站点都有着一致的,站点统一的页面布局和导航体系.Asp.net 2.0引入的两个新特性给我们在统一站点的页面布局和站点导航上提供了简单而有效的工具,它们是母板页和站点导航.母板页允许开发者创建统一的站点模板和指定的可编辑区域.这样,aspx页面只需要给模板页中指定的可编辑区域提供填充内容就可以了,所有在母板页中定义的其他标记将出现在所有使用了该母板页的aspx页面中.这种模式允许开发者可以统一的管理和定义站点的页面布局,因此可以容易的得到拥有统一的视觉和感觉的页面并且