zoukankan      html  css  js  c++  java
  • 母版页的应用

    一、定义

    使用 ASP.net母版页可以为应用程序中的页创建一致的布局。单个母版页可以为应用程序中的所有页(或一组页)定义所需的外观和标准行为。

    然后可以创建包含要显示的内容的各个内容页。当用户请求内容页时,这些内容页将与母版页合并,从而产生将母版页的布局与内容页中的内容组合在一起的输出 。
    母版页的使用与普通页面类似,可以在其中放置文件或者图形、任何的HTML控件和Web控件,后置代码等。母版页的扩展名以.master结尾,不能被浏览器直接查看。母版页必须在被其他页面使用后才能进行显示。
    它的使用跟普通的页面一样,可以可视化的设计,也可以编写后置代码。与普通页面不一样的是,它可以包含ContentPlaceHolder控件,ContentPlaceHolder控件就是可以显示内容页面的区域。
    母版页仅仅是一个页面模板,单独的母版页是不能被用户所访问的。单独的内容页也不能够使用。母版页和内容页有着严格对应关系。母版页中包含多少个ContentPlaceHolder控件,那么内容页中也必须设置与其相对应的Content控件。当客户端浏览器向服务器发出请求,要求浏览某个内容页面时,引擎将同时执行内容页和母版页的代码,并将最终结果发送给客户端浏览器。
     
    优点:
    1、使用母版页可以集中处理页的通用功能,以便可以只在一个位置上进行更新。
    2、使用母版页可以方便地创建一组控件和代码,并将结果应用于一组页。例如,可以在母版页上使用控件来创建一个应用于所有页的菜单。
    3、通过允许控制占位符控件的呈现方式,母版页使您可以在细节上控制最终页的布局。
    4、母版页提供一个对象模型,使用该对象模型可以从各个内容页自定义母版页。
    二、母版页的创建
    解决方案右键--添加新项--母版页--添加
    母版页中预留有两个母版控件,应用于调用的web窗体添加内容,母版内容在body中设置
    例:
    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
    
    <!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>
        <%-- 母版样式 --%>
        <style type="text/css">
            #top {
                100%;
                height:100px;
                background-color:red;
            }
            #bottom {
                100%;
                height:300px;
                background-color:black;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <%-- 母版内容 --%>
            <div id="top"></div>
            <%-- 内容母版 --%>
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
    
    
            <div id="bottom"></div>
    
    
        </div>
        </form>
    </body>
    </html>

    母版引用:

    解决方案右键--添加新项--新建web窗体--选择母版--添加
    例:
     
     
    三、主程序编写:
    1、新建web窗体中
    /2、次级母版页
    <%@ Master Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="MasterPage2.master.cs" Inherits="MasterPage2" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    
        <div style="100px;height:300px;background-color:blue;float:left">
        <div>dssdsa</div>
        <div>asdas</div>
        <div>fcdsfd</div>
        <div>dfdsvcx</div>
        <div>dfdsagv</div>
        <div>fdsvcxv</div>
        <div>cxzvz</div>
        <div>cxvz</div>
        <div>zcxvz</div>
    </div>
        <div style="800px;height:200px;background-color:yellow;float:left">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
        </div>
    
    </asp:Content>
     
    效果图:
     
    编写在预留的内容母版页中,母版页要添加控件
    四、多层次母版传值
    多层级母版传值,是在父级母版中设置公共方法,在子级中调用
    例:
    public partial class MP2 : System.Web.UI.MasterPage
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            
        }
    
        public void aaa(string a)
        {
            TextBox1.Text = a;
            MP1 m1 = this.Master as MP1;
            m1.m1_aaa(a);
        }
    }
    父级母版
    public partial class Default3 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Button1.Click += Button1_Click;
        }
    
        void Button1_Click(object sender, EventArgs e)
        {
            string s =TextBox1.Text;
            Label1.Text = s;
    
            MP2 m2 = this.Master as MP2;
            m2.aaa(s);
        }
    }
    子级母版调用

    五、母版页样式及js

    母版页样式表由外部引用不许要翻页,母版页相当于一个掮客将路径缩短,可认为样式在母版页,页面调用的母版页样式

    母版页js不能自动匹配,解决方案:
     
    <script src="<%=abc() %>"></script>
    
    C#代码:
     public string YingShe()
        {
            return ResolveClientUrl("js/JavaScript.js"); 
    }
     
     
     
     
     
     
     
     
  • 相关阅读:
    慕课网多物体运动源代码
    慕课网javascript动画特效 多透明度 源代码
    百度地图实时侦听鼠标滚轮获取地图zoom缩放级别
    百度地图自定义地图切片问题
    百度地图之多点步行路径连线问题
    百度地图利用数组实现多个标注点的显示
    理解clear: left/clear: right
    CSS3 Transform属性详解
    setInterval() 方法
    for Share
  • 原文地址:https://www.cnblogs.com/hclyz/p/6904831.html
Copyright © 2011-2022 走看看