zoukankan      html  css  js  c++  java
  • ASP.Net使用母版页窗

        

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

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

     

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

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


               巧用窗口母版项:

           以下就開始行动(本文是以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的思想。

       

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

  • 相关阅读:
    C#高级编程第11版
    C#特性
    设计模式 单一职责原则
    设计模式 依赖倒置原则
    C# 预处理指令
    毕业设计 python opencv实现车牌识别 矩形矫正
    毕业设计 python opencv实现车牌识别 颜色判断
    毕业设计 python opencv实现车牌识别 界面
    南昌大学航天杯第二届程序设计竞赛校赛网络同步赛 I
    南昌大学航天杯第二届程序设计竞赛校赛网络同步赛 G
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/4645260.html
Copyright © 2011-2022 走看看