Asp.Net 母版页

背景:回顾下以前用到过的asp.net控件

介绍:

  使用 ASP.NET 母版页可以为应用程序中的页创建一致的布局。单个母版页可以为应用程序中的所有页(或一组页)定义所需的外观和标准行为。然后可以创建包含要显示的内容的各个内容页。当用户请求内容页时,这些内容页与母版页合并以将母版页的布局与内容页的内容组合在一起输出。

  母版页为具有扩展名 .master的asp.net文件。

原理:

  母版页主要是由母版页本身(.master文件)和一个或多个内容页组成。

  母版页包括一个或多个 <asp:ContentPlaceHolder ID="TestContentPlaceHolder" runat="server"/> 控件,在内容页中可以定义要替换的内容。

  容页中通过添加 Content 控件并将这些控件映射到母版页上的 ContentPlaceHolder控件来创建内容。

示例代码:

代码

<%@ Page Title="" Language="C#" MasterPageFile="~/TestMain.Master" AutoEventWireup="true" CodeBehind="AnotherTestPage.aspx.cs" Inherits="Maticsoft.Web.AnotherTestPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TestContentPlaceHolder" runat="server">
<div style=" width:100%; height:100%; background-color:#666666">
<div style=" margin:10px 0 0 10px">
<h4>
这里是另一个内容页(AnotherTestPage.aspx)
</h4>
<p style=" font-size:12px; font-family:宋体">
&nbsp;&nbsp;&nbsp;&nbsp;Master Page 使您有能力为 web 应用程序中的所有页面(或页面组)创建一致的外观和行为。
Master Page 为其他页面提供了模版,带有共享的布局和功能。Master Page 为内容定义了可被内容页面覆盖的占位符。而输出结果就是 Master Page 和内容页面的组合。<br />
&nbsp;&nbsp;&nbsp;&nbsp;内容页包含您希望显示的内容。
当用户请求内容页时,ASP.NET 会对页面进行合并以生成输出,输出结果对 Master Page 的布局和内容页面的内容进行了合并。
</p>
</div>
</div>
</asp:Content>

<%@ Page Title="" Language="C#" MasterPageFile="~/TestMain.Master" AutoEventWireup="true" CodeBehind="AnotherTestPage.aspx.cs" Inherits="Maticsoft.Web.AnotherTestPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TestContentPlaceHolder" runat="server">
<div style=" width:100%; height:100%; padding: 0px; line-height: 1.8; color: rgb(0, 0, 255);">>
<div style=" margin:10px 0 0 10px">
<h4>
这里是另一个内容页(AnotherTestPage.aspx)
</h4>
<p style=" font-size:12px; font-family:宋体">
&nbsp;&nbsp;&nbsp;&nbsp;Master Page 使您有能力为 web 应用程序中的所有页面(或页面组)创建一致的外观和行为。
Master Page 为其他页面提供了模版,带有共享的布局和功能。Master Page 为内容定义了可被内容页面覆盖的占位符。而输出结果就是 Master Page 和内容页面的组合。<br />
&nbsp;&nbsp;&nbsp;&nbsp;内容页包含您希望显示的内容。
当用户请求内容页时,ASP.NET 会对页面进行合并以生成输出,输出结果对 Master Page 的布局和内容页面的内容进行了合并。
</p>
</div>
</div>
</asp:Content>

母版页代码

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="TestMain.master.cs" Inherits="Maticsoft.Web.TestMain" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>

<style type="text/css">
#main
{
width:800px;
height:600px;
background-color:#aaa;
}
#head
{
width:100%;
height:100px;
background-color:#c1c1e5;
}
#content
{
width:100%;
height:500px;
}
#left
{
width:150px;
height:100%;
float:left;
}
#center
{
width:650px;
height:100%;
float:left;
}
a
{
text-decoration:none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="main">
<div id="head">
<h1 style="margin:10px 0 0 10px">母版页测试</h1>
</div>
<div id="content">
<div id="left">
<h3 style=" margin:10px 0 0 10px">左侧导航</h3>
<div style=" margin-left:20px; font-size:18px; font-family:Verdana">
<a href="TestPage.aspx">asp.net</a><br />
<a href="AnotherTestPage.aspx">CSS</a><br />
<a href="#">HTML</a><br />
<a href="#">JQuery</a>
</div>
</div>
<div id="center">
<asp:ContentPlaceHolder ID="TestContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</form>
</body>
</html>

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="TestMain.master.cs" Inherits="Maticsoft.Web.TestMain" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>

<style type="text/css">
#main
{
width:800px;
height:600px;
background-color:#aaa;
}
#head
{
width:100%;
height:100px;
background-color:#c1c1e5;
}
#content
{
width:100%;
height:500px;
}
#left
{
width:150px;
height:100%;
float:left;
}
#center
{
width:650px;
height:100%;
float:left;
}
a
{
text-decoration:none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="main">
<div id="head">
<h1 style="margin:10px 0 0 10px">母版页测试</h1>
</div>
<div id="content">
<div id="left">
<h3 style=" margin:10px 0 0 10px">左侧导航</h3>
<div style=" margin-left:20px; font-size:18px; font-family:Verdana">
<a href="TestPage.aspx">asp.net</a><br />
<a href="AnotherTestPage.aspx">CSS</a><br />
<a href="#">HTML</a><br />
<a href="#">JQuery</a>
</div>
</div>
<div id="center">
<asp:ContentPlaceHolder ID="TestContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</form>
</body>
</html>

效果图:

时间: 2025-01-11 16:49:10

Asp.Net 母版页的相关文章

ASP.NET母版页

ASP.NET母版页:主要是设置一致界面的页面,在固定的页中进行更新. 如图1-1所示 页头 页中(页内容) 页尾 图1-1  母版页 一般网页是固定页头和页尾,只更新页内容,来实现网页的跳转或内容的更新.其实控件iframe 和a  也可以实现这样的功能. 例如: <iframe  name="if"></iframe>//在iframe控件里面更新或跳转不同网页. <a target="if" href="ww.aspx&

Asp.Net母版页和内容页运行机制

Asp.Net母版页和内容页运行机制来自森大科技官方博客 http://www.cnsendblog.com/index.php/?p=96从上面的讲解中可以看出,单独的母版页是不能被用户所访问的.没有内容页支持,母版页仅仅是一个页面模板,没有更多的实用价值.同样道理,单独的内容页没有母版页的支持,也不能够应用.这两者是不可分割的,只有同时正确创建和使用母版页及内容页,才能发挥它们的强大功能.为了便于读者理解,有必要讲解一下母版页与内容页的运行机制.母版页和内容页的运行过程可以概括为以下5个步骤

asp.net 母版页使用详解--转

http://www.cnblogs.com/_zjl/archive/2011/06/12/2078992.html 母版页是VS2005中新引入的一个概念,它很好地实现界面设计的模块化,并且实现实现了代码的重用.它就像婚纱影楼中的婚纱模板,同一个婚纱模板可以给不同的新人用,只要把他们的照片贴在已有的婚纱模板就可以形成一张漂亮的婚纱照片,这样可以大大简化婚纱艺术照的设计复杂度.这里的母版页就像婚纱模板,而内容页面就像两位新人的照片.在VS2003中没有母版页,要实现这种设计重用的效果,我们只能

ASP.NET——母版页和shtml

创建和使用母版页: 创建Webform的母版页(MasterPage),创建使用母版页的窗体. 母版页使用ContentPlaceHolder挖坑,“使用母版页的窗体”用Content填坑 母版页是服务器帮我们将页面拼接response给浏览器的. 但是,母版页太笨重. 推荐使用shtml. shtml:ServerSideInclude(SSI),主流web服务器(iis.apache等)都支持.效率高,不需要经过asp.net处理,轻量级. 如何创建: 先创建一个头部head.html和fo

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

在做牛腩新闻发布系统的过程中,需要使用ASP.NET的母版页来抽出所有网页的公共部分,以便更好的复用自己的网页布局和设计. 首先我们来看如何创建一个新的母版页,如下图所示: 添加之后,如下图所示: 编写完母版页之后,在使用的时候,问题出现了,在新建Web窗体时,右下角没有视频里讲的使用母版页复选框,如下图: 本来应该是下面这个样子的: 于是就在网上找解决办法,找了半天没有找到答案,网上关于这类问题的答案中描述的大都是较早版本的,我用的是vs2012,因此就去问已经做完了的小伙伴们,发现大家基本都

asp.net 母版页使用详解

母版页是VS2005中新引入的一个概念,它很好地实现界面设计的模块化,并且实现实现了代码的重用.它就像婚纱影楼中的婚纱模板,同一个婚纱模板可以给不同的新人用,只要把他们的照片贴在已有的婚纱模板就可以形成一张漂亮的婚纱照片,这样可以大大简化婚纱艺术照的设计复杂度.这里的母版页就像婚纱模板,而内容页面就像两位新人的照片.在VS2003中没有母版页,要实现这种设计重用的效果,我们只能用“用户控件”来实现,但用户控件没有一种可视化的组合外观,使用起来不太方便. 母版页(扩展名是.master)它的使用跟

asp.net 母版页使用方法

母版页代码: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

引用asp.net母版页后,母版页和内容页的页面事件执行顺序

如下,经测试得到的执行步骤: 第01步.内容页的 Page_PreInit第02步.母版页的 Page_Init第03步.内容页的 Page_Init第04步.内容页的 Page_InitComplete第05步.内容页的 Page_PreLoad第06步.内容页的 Page_Load第07步.母版页的 Page_Load第08步.母版页或内容页的 按钮点击等回发事件(Master或Content的Button事件不会同时触发)第09步.内容页的 Page_LoadComplete第10步.内容

Asp.Net母版页的相关知识

来自森大科技官方博客   http://www.cnsendblog.com/index.php/?p=94 母版页的使用与普通页面类似,可以在其中放置文件或者图形.任何的HTML控件和Web控件,后置代码等.母版页的扩展名以.master结尾,不能被浏览器直接查看.母版页必须在被其他页面使用后才能进行显示. 它的使用跟普通的页面一样,可以可视化的设计,也可以编写后置代码.与普通页面不一样的是,它可以包含ContentPlaceHolder控件,ContentPlaceHolder控件就是可以显