zoukankan      html  css  js  c++  java
  • 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=" 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>

    复制代码
    <%@ 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=" 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:宋体">
    &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
    {
    800px;
    height:600px;
    background-color:#aaa;
    }
    #head
    {
    100%;
    height:100px;
    background-color:#c1c1e5;
    }
    #content
    {
    100%;
    height:500px;
    }
    #left
    {
    150px;
    height:100%;
    float:left;
    }
    #center
    {
    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
    {
    800px;
    height:600px;
    background-color:#aaa;
    }
    #head
    {
    100%;
    height:100px;
    background-color:#c1c1e5;
    }
    #content
    {
    100%;
    height:500px;
    }
    #left
    {
    150px;
    height:100%;
    float:left;
    }
    #center
    {
    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>
    复制代码

    效果图:

     
  • 相关阅读:
    openwrt 的依赖找不到问题
    数据包与IPTABLE关系
    wifidog 配置中文说明
    Java 线程
    Java 集合
    IDEA配置Maven并创建web项目
    逻辑覆盖
    获得天气数据
    小程序项目文件介绍
    window 10 使用git
  • 原文地址:https://www.cnblogs.com/aiqingqing/p/4509253.html
Copyright © 2011-2022 走看看