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:宋体">
Master Page 使您有能力为 web 应用程序中的所有页面（或页面组）创建一致的外观和行为。
Master Page 为其他页面提供了模版，带有共享的布局和功能。Master Page 为内容定义了可被内容页面覆盖的占位符。而输出结果就是 Master Page 和内容页面的组合。<br />
内容页包含您希望显示的内容。
当用户请求内容页时，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:宋体">
Master Page 使您有能力为 web 应用程序中的所有页面（或页面组）创建一致的外观和行为。
Master Page 为其他页面提供了模版，带有共享的布局和功能。Master Page 为内容定义了可被内容页面覆盖的占位符。而输出结果就是 Master Page 和内容页面的组合。<br />
内容页包含您希望显示的内容。
当用户请求内容页时，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>
效果图：
Asp.Net 母版页的更多相关文章
- ASP.NET母版页
ASP.NET母版页:主要是设置一致界面的页面,在固定的页中进行更新. 如图1-1所示 页头 页中(页内容) 页尾 图1-1 母版页 一般网页是固定页头和页尾,只更新页内容,来实现网页的跳转或内容的 ...
- ASP.NET母版页与内容页相对路径的问题
1. 图片问题 图片显示问题:<img runat="server" src="~/images/ad468x60.gif" alt="&quo ...
- asp.net 母版页使用详解--转
http://www.cnblogs.com/_zjl/archive/2011/06/12/2078992.html 母版页是VS2005中新引入的一个概念,它很好地实现界面设计的模块化,并且实现实 ...
- asp.net 母版页使用详解
母版页是VS2005中新引入的一个概念,它很好地实现界面设计的模块化,并且实现实现了代码的重用.它就像婚纱影楼中的婚纱模板,同一个婚纱模板可以给不同的新人用,只要把他们的照片贴在已有的婚纱模板就可以形 ...
- [转]ASP.NET母版页中对控件ID的处理
一.问题提出 由于总体排版和设计的需要,我们往往创建母版页来实现整个网站的统一性,最近我由于统一性的需要,把原来整个项目单独的页面全部套用了母版页.但是出现了一个错误……在我的Blog中记录一下,方便 ...
- VS2012 ASP.NET 母版页的创建与使用
在做牛腩新闻公布系统的过程中,须要使用ASP.NET的母版页来抽出全部网页的公共部分,以便更好的复用自己的网页布局和设计. 首先我们来看怎样创建一个新的母版页,例如以下图所看到的: 加入之后,例如以下 ...
- ASP.NET 母版页和内容页的加载顺序
Master 模板页Content 内容页如果希望Master页面的数据传给Content页面,请Init如果希望Content页面的数据传给Master页面,请重载Load具体细节不多说了,看下面页 ...
- 【转】asp使用母版页时内容页如何使用css和javascript
源地址:https://www.cnblogs.com/accumulater/p/6767138.html
- Asp.Net页面(母版页)加载顺序
ASP.NET 母版页和内容页中的事件 母版页和内容页都可以包含控件的事件处理程序.对于控件而言,事件是在本地处理的,即内容页中的控件在内容页中引发事件,母版页中的控件在母版页中引发事件.控件事件不会 ...
随机推荐
- 我的VSTO之路：序
原文:我的VSTO之路:序 VSTO是微软提供给.Net开发人员的一个接口,通过他我们可以对Office程序做一些处理.但是这个接口并不尽善尽美,相比微软的很多其他产品,VSTO的稳定性并不好,相关的 ...
- 【Linux】鸟哥的Linux私房菜基础学习篇整理（六）
1. 正则表达式特殊符号.[:alnum:]:代表英文大小写字符及数字:[:alpha:]:代表英文大小写字符:[:blank:]:代表空格键与[Tab]键:[:cntrl:]:代表键盘上的控制键,即 ...
- 【ZOJ】3430 Detect the Virus
动态建树MLE.模仿别人的代码模板各种原因wa后,终于AC. #include <iostream> #include <cstdio> #include <cstrin ...
- Unity 3D物体的点击事件响应以及NGUI坐标和世界坐标的互相转换
Unity 版本:4.5 NGUI版本:3.6.5 参考链接:http://game.ceeger.com/Script/Camera/Camera.ScreenPointToRay.html,Uni ...
- WordPress 3.5.1 crypt_private()远程拒绝服务漏洞(CVE-2013-2173)
漏洞版本: WordPress 3.5.1 漏洞描述: BUGTRAQ ID: 60477 CVE(CAN) ID: CVE-2013-2173 WordPress是一种使用PHP语言和MySQL数据 ...
- How to distribute your own Android library through jCenter and Maven Central from Android Studio
In Android Studio, if you wish to include any library to your application. You could just simply add ...
- linux下安装python linux下一些常用的命令
注意 ubuntukylin-14.04.2-desktop-amd64 自带python2.7.6 这个说的比较详细 http://wenku.baidu.com/link?url=gaeFcQrc ...
- linq里的select和selectmany操作 投影运算
原文地址:https://msdn.microsoft.com/zh-cn/library/bb546168.aspx#Mtps_DropDownFilterText 投影运算 其他版本 投影 ...
- 尚学堂 JAVA DAY12 java程序执行时内存的分配
- Gridview导出到Excel
#region #导出到Excel protected void Button2_Click(object sender, EventArgs e) { Respons ...