ASP.Net使用母版页窗

背景:每一个网页的基本框架结构类似:

浏览站点的时候会发现,好多站点中。每一个网页的基本框架都是一样的,比方,最上面都是站点的标题,中间是内容。最以下是站点的版权、开发提供商等信息:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHV5dXlhbmc2Njg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" >

在这些网页中。表头、底部的样式和内容都是一样的。不同的仅仅是中间的内容。

因此在制作站点时,能够将这些共同的东西分离出来,放到“窗口母版页”中。在须要的时候嵌套就能够。

巧用窗口母版项:

以下就開始行动(本文是以VisualStudio2013作为编程环境,可能在某些步骤与其它版本号有所出入。请自行注意):

1、在项目中加入一Web窗口母版页test.Master:右键项目—加入—新建项—Web窗口母版页;

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="test.master.cs" Inherits="Web.test1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="contentPlaceHolder" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

2、在窗口母版页test.Master的<head>标记之间加入CSS、JS等引用(这里先仅仅加入CSS文件为例):

<head runat="server">
    <link href="css/common.css" rel="stylesheet" />    <%--加入引用CSS文件--%>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

3、编辑窗口母版页test.Master,加入每一个网页的公共内容(此处以网页布局为上图的布局为例,三个div的css样式就暂不说明):

<body>
    <form id="form1" runat="server">
        <div id="top">                                 <%--每一个网页的公共样式:网页头部--%>
            <h1>某某某站点</h1>
        </div>

        <div id="main">                                <%--每一个网页的不相同式:网页主体内容--%>
            <asp:contentplaceholder id="contentPlaceHolder" runat="server">
                 <%--此处为每一个嵌套此母版的各个网页的不同内容--%>
            </asp:contentplaceholder>
        </div>     

        <div id="footer">                              <%--每一个网页的公共样式:网页版权信息区--%>
            <p>版权全部:******</p>
        </div>
    </form>
</body>

4、在每一个网页中嵌套窗口母版页test.Master:右键项目—加入—新建项—包括母版页的Web窗口test.aspx,在选择母版页对话框中选择test.Master,确定,生成的网页为:

<%@ Page Title="" Language="C#" MasterPageFile="~/common.Master" AutoEventWireup="true" CodeBehind="test2.aspx.cs" Inherits="Web.test2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="contentPlaceHolder" runat="server">
</asp:Content>

此时这个窗口test.aspx和母版页test.Master的执行效果是一样的,接下来就是加上每一个网页中的不同的内容。

5、此时,网页test.aspx中ContentPlaceHolderID=“head”和ContentPlaceHolderID=“contentPlaceHolder”的<asp:Content>就相当于母版页test.Master中相应的<asp:Content>。所以假如每一个网页都会有同样部分,就能够把同样部分写在母版页的相应位置,而将每一个网页的不同内容写在ContentPlaceHolderID=“contentPlaceHolder”的<asp:Content>中。

比方,第4步中。这个test.aspx已经嵌套了这个样式。它的主题内容为
“ 站点内容 站点内容 站点内容 站点内容…… ”。则test.aspx中的代码为:

<%@ Page Title="" Language="C#" MasterPageFile="~/common.Master" AutoEventWireup="true" CodeBehind="test2.aspx.cs" Inherits="Web.test2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="contentPlaceHolder" runat="server">
    <p>站点内容 站点内容 站点内容 站点内容…… </p>
</asp:Content>

假如我又建了一个名为test1.aspx的网页,除了与test1.aspx中的主体内容不一样之外,其它都一样,那么就能够让test1.aspx嵌套母版页test.Master。代码为:

<%@ Page Title="" Language="C#" MasterPageFile="~/common.Master" AutoEventWireup="true" CodeBehind="test2.aspx.cs" Inherits="Web.test2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="contentPlaceHolder" runat="server">
    <p>站点内容1 站点内容1 站点内容1 站点内容1…… </p>
</asp:Content>

拓展:母版页嵌套母版页

当整个站点内的全部网页并非这一种样式。而是一个大的站点分为几个栏目。每一个栏目中网页的风格样式统一,这时候能够用母版页来嵌套母版页 :

如今再建立一个母版页(我在这里给它取名为“子母版页”),用它来嵌套上面的母版页test.Master。代码为:

<%@ Master Language="C#" MasterPageFile="~/test.Master" AutoEventWireup="true" CodeBehind="m_common.master.cs" Inherits="Web.admin.m_common" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="contentPlaceHolder" runat="server">
    <asp:ContentPlaceHolder ID="contentPlaceHolder_child" runat="server">
         <%--此处为嵌套“子母版页”的各个网页的不同内容--%>
    </asp:ContentPlaceHolder>
</asp:Content>

注意。代码第一行的MasterPageFile=“~/test.Master”即要嵌套的母版页的地址。“~”为当前文件夹。

嵌套网页母版项的优点:

能够利用VisualStudio中的窗口母版页来将每一个页面中同样的部分进行封装。在创建同样结构的网页时,便能够直接嵌套这个窗口母版页。避免了代码的反复,提高了代码的复用性;另外,假设要改动一个栏目甚至整个站点的风格。则仅仅需改动母版页以及母版页中引入的<script>等文件。提高了代码的可维护性。充分体现了OOP的思想。

版权声明:本文博客原创文章,博客,未经同意,不得转载。

时间: 2024-10-12 21:23:36

ASP.Net使用母版页窗的相关文章

2014-07-31 ASP.NET的母版页使用

今天是在吾索实习的第17天.我在这天主要负责系统的骨架的搭建.首当其冲,要用的知识点就是ASP.NET母版页的使用了. ASP.NET的母版页有两种:一种是MasterPage,最常用也是最普通的母版页:另一种是NestedMasterPage,继承了其他母版页的母版页,即以其他母版页作为自身的母版的母版页.两种母版页如图1. 图1 而且.NET也提供一种便于使用母版的Web窗体(即内容页),其如图2. 图2 二级母版页与内容页的添加也十分方便,只需点击添加,然后选择所需的母版就可以.(值得一提

ASP.NET中母版页引用外部js或css文件无效,提示对象未定义解决方法

最近做网站用了一个js+css实现的带有二级菜单的导航条,在母版页创建好后,子页面调用出现了许多奇怪的问题,多方查证后的最终解决方案和大家分享下.... 1.路径问题 如果是一个单独的aspx页面调用此文件路径会是 1 <link type="text/css" rel="stylesheet" href="navigator/css/shou.css" /> 2 <script type="text/javascri

Asp.Net套用母版页后元素ID不一致之个人总结

Asp.Net套用母版页后元素ID不一致之个人总结来自森大科技官方博客 http://www.cnsendblog.com/index.php/?p=102在内容页里,在这个标签对里:<asp:Content ID="content" ContentPlaceHolderID="MainContent" runat="server"></asp: Content >一.form的ID变化.<form id="

ASP.NET在母版页或内容页上获取控件ID

原本想给一个button添加一个confirm,不同的分数提示不同的信息(大于80合格,小于80不合格,提示是否提交),最开始用了button.Atribute.Add();但是它每次获取到的是label控件在刷新前的值,后来在网上看到了ViewState[]的使用,但是还是不行,没办法,只能用js: <script> function myconfirm() { if(document.getElementById('lbl').value>=80) {return confirm('

asp.net C#母版页和内容页事件排版加载顺序生命周期

关于ASP页面Page_Load发生在事件之前而导致的问题已经喜闻乐见,对于问题的解释也很全面,但是如何解决问题则较少有人说明,我就再 简单说明一下解决方案.以下是内容页和母版页(如果有)的事件发生顺序: ContentPage.PreInit Master.Init ContentPage.Init ContentPage.InitComplite ContentPage.PreLoad ContentPage.Load Master.Load ContentPage.LoadComplete

Asp.Net 之 母版页中对控件ID的处理

一.问题提出 由于总体排版和设计的需要,我们往往创建母版页来实现整个网站的统一性,最近我由于统一性的需要,把原来整个项目单独的页面全部套用了母版页.但是出现了一系列失效错误. 二. 抽象模型 由于整个页面内容过多,所以我把这个页面中最为本质的问题抽象出来.原来单一页面,就是利用按钮触发JS事件,在文本域中插入“(_)”功能,其实现代码如下: <head id="Head1" runat="server"> <title>单一页面抽象模型-YJ

Asp.Net页面(母版页)加载顺序

Page 执行中将按照如下顺序激活事件: Page.PreInit Page.Init Page.InitComplite Page.PreLoad Page.Load Page.LoadComplete Page.PreRender Page.PreRenderComplete 如果页面从另一个页面继承,如BasePage:System.Web.UI.Page,在BasePage中做了一些扩展,如权限检查,而其他页面从BasePage继承,则BasePage和最终Page的事件激活顺序是: U

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

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

ASP.NET母版页

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