母版(MasterPage)

介绍:

使用 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>

母版页代码:

<%@ 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>

效果图:
在这里插入图片描述

  1. 网站的布局通常是统一的,上面是Logo、菜单条、下面是公司地址、版权声明等。如果每个页面都重复做这些功能的话:重复性劳动、一旦修改那么每个页面都要修改。可以使用Iframe(内嵌框架),FrameSet(框架集)技术来解决,但是FrameSet技术不灵活,而且很难进行SEO,所以只有部分内网系统还在用FrameSet,.Net中一般用母版(MasterPage)技术来解决这个问题。
  2. MasterPage是这样一种技术,把页面布局画好,在变化的内容部分“留空”,留空的部分由子页面填充内容,这样子页面只要填空就行,不用重复设计页面结构,一旦要修改页面结构修改母版页就可以,这样所有页面都会变化。母版页“挖坑”,具体页面“填坑”。母版页、具体页面中几乎可以使用所有的普通WebForm页面能够使用的技术。
  3. 添加一个“母版页”,使用asp:ContentPlaceHolder挖坑,新建的母版页已经自动设置了两个ContentPlaceHolder,还可以添加更多的ContentPlaceHolder。在id="head"前面后面都加入一些script,在id="ContentPlaceHolder1"前后也加入一些内容。
  4. 创建使用母版页的具体页面,WebSite是新建“Web窗体”的时候勾选“选择模板页”,WebApplication是新建“Web内容窗体”,然后选择页面使用的母版页(一个项目内可以创建多个母版页,比如新闻频道用一个母版页,视频频道用另外一个母版页)。
  5. 使用母版的具体页面和普通aspx页面的不同是:@Page区域用MasterPageFile属性表示页面使用哪个母版页,页面不包含html等内容,只定义了<asp:Content这些填坑的内容。asp:Content就是用来在具体页面中对母版页进行填坑的,ContentPlaceHolderID为这个Content要填母版页中的哪个坑,对应母版页中ContentPlaceHolder的Id
  6. 具体页面可以对母版页填坑也可以不填坑,如果不填坑则显示asp:ContentPlaceHolder中定义的默认内容。
  7. 案例:实现上导航菜单、下版权声明,左侧功能面板,右侧为具体的内容的模板,然后分别实现关于我们和登录界面。
  8. 在母版页中使用超链接、图片地址等的时候需要注意路径问题,在母版页中的runat=server控件的链接地址、图片地址等会被解析为相对于母版页的地址,而客户端HTML控件ASP.Net引擎是直接输出的,因此是解析为相对于具体页面的地址。建议使用服务端控件,如果不能使用服务器控件,那么可以在aspx页面中调用ResolveClientUrl 、ResolveUrl进行虚拟路径的转换
  9. 每个具体页设置不同的标题,只要在具体页面的@page中设置Title属性即可。可以在具体页中通过Master.FindControl来定位母版页中的控件然后对母版页中的控件进行操作,比如在一个具体页面中将母版页中的一个控件隐藏。
posted on 2019-05-08 15:56  豆皮没有豆  阅读(443)  评论(0)    收藏  举报