母版页允许开发人员创建具有指定的可编辑区域的站点级模板。随后，此模板可应用到网站中的 ASP.NET 页面上。这些 ASP.NET 页面只需为母版页中指定的可编辑区域提供相应内容 – 在使用母版页的所有 ASP.NET 页面中，母版页中的所有其它标记都相同。此模型允许开发人员定义并集中实现站点级页面布局。 因此，开发人员可以方便地为所有页面创建一致的外观，并进行轻松的更新。

简而言之：在一个网站上会有很多页面，并且有可能有的页面都有相同的部分，这样的话我们就可以将相同的部分制作成一个母版页，在多个页面进行调用，节省了代码的重复使用和开发效率。

开发过程：

新建两个html文件HtmlPage1.html，HtmlPage2.html，一个web窗体WebForm.aspx,一个web窗体用户控件WebUserControl1.ascx

第一种方式，利用纯html制作

1.首先我们先用静态html制作一个母版页，再利用iframe来显示母版页

HtmlPage1.html为母版页

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <style>
  7.         body{
  8.             margin:0px;
  9.         }
  10.  
  11.         #top{
  12.             width:%;
  13.             height:100px;
  14.             background-color:#6f5e5e;
  15.         }
  16.         .left{
  17.           float:left;
  18.          margin-top:12px;
  19.          margin-left:25px;
  20.         }
  21.         .logo{
  22.             margin-left:auto;
  23.             margin-right:auto;
  24.             margin-top:25px;
  25.         }
  26.         img{
  27.            vertical-align:middle;
  28.         }
  29.         .right{
  30.           float:right;
  31.         }
  32.  
  33.     </style>
  34. </head>
  35.  
  36. <body>
  37.  <div id="top">
  38.   <img src="img/leftcloud.png" class="left" />
  39.      <img src="img/logo.png" class="logo" />
  40.      <img src="img/rightcloud.png" class="right" />
  41.  </div>
  42. </body>
  43. </html>

HtmlPage2.html来调用

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6. </head>
  7.  
  8. <body style="margin:0px">
  9.     <iframe src="HtmlPage1.html" width="100%" height="100px"></iframe>
  10.     //利用iframe框架标签来显示
  11. </body>
  12. </html>

 第二种方式利用ASP.NET制作

分别利用iframe框架标签和调用web用户控件来显示

用web用户控件制作母版页，因为测试所以代码跟HtmlPage1.html基本一样

web窗体用户控件WebUserControl1.ascx代码

  1. <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="WebApplication3.WebUserControl1" %>
  2. <style>
  3.         body{
  4.             margin:0px;
  5.         }
  6.  
  7.         #top{
  8.             width:%;
  9.             height:100px;
  10.             background-color:#6f5e5e;
  11.         }
  12.         .left{
  13.           float:left;
  14.          margin-top:12px;
  15.          margin-left:25px;
  16.         }
  17.         .logo{
  18.             margin-left:auto;
  19.             margin-right:auto;
  20.             margin-top:25px;
  21.         }
  22.         img{
  23.            vertical-align:middle;
  24.         }
  25.         .right{
  26.           float:right;
  27.         }
  28.  
  29.     </style>
  30.  
  31.  <div id="top">
  32.   <img src="img/leftcloud.png" class="left" />
  33.      <img src="img/logo.png" class="logo" />
  34.      <img src="img/rightcloud.png" class="right" />
  35.  </div>

web窗体WebForm1.aspx调用代码

  1.  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>
  2.  
  3.  <%@ Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %>
  4.  
  5.  <!DOCTYPE html>
  6.  
  7.  <html xmlns="http://www.w3.org/1999/xhtml">
  8.  <head runat="server">
  9.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  10.      <title></title>
  11.  </head>
  12.  <body style="margin:0px">
  13.       <!--两种方式嵌入不需要改变的网页显示部分-->
  14.      <iframe src="HtmlPage1.html" width="100%" height="100px"></iframe> <!--iframe 框架标签-->
  15.  
  16.      <form id="form1" runat="server">
  17.          <uc1:WebUserControl1 runat="server" id="WebUserControl1" />
  18.          <!--web窗体用户控件-->
  19.      </form>
  20.  </body>
  21.  </html>

asp调用web窗体用户控件很简单，你着需要从解决方案那里把用户控件拖到代码区就行了，厉害吧

ASP.NET设置母版页的更多相关文章

  1. pages 元素（ASP.NET 设置架构）web.config 详解

    pages 元素(ASP.NET 设置架构)    buffer="[True|False]"   enableEventValidation="[True|False] ...

  2. 【配置】检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法（非简单设置为【经典】模式）。

      ×   检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为[经典]模式). 我们将ASP.NET程序从IIS6移植到IIS7,可能运行提示以下错误: HTTP 错误 5 ...

  3. 检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(转)

    我们将ASP.NET程序从IIS6移植到IIS7,可能运行提示以下错误: HTTP 错误 500.23 - Internal Server Error 检测到在集成的托管管道模式下不适用的 ASP.N ...

  4. HTTP 错误 500.23 - Internal Server Error 检测到在集成的托管管道模式下不适用的 ASP.NET 设置。

    检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为[经典]模式). - CatcherX 2014-03-11 11:03 27628人阅读 评论(2) 收藏 举报  分类 ...

  5. ASP.NET 之 检测到在集成的托管管道模式下不适用的ASP.NET设置

    将ASP.NET程序从IIS6移植到IIS7后,调试运行可能提示以下错误: HTTP 错误 500.23 - Internal Server Error 检测到在集成的托管管道模式下不适用的 ASP. ...

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

    asp.net C#母版页和内容页事件排版载入顺序生命周期 关于ASP页面Page_Load发生在事件之前而导致的问题已经喜闻乐见,对于问题的解释也非常全面.可是怎样解决这个问题则较少有人说明,我就再 ...

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

    今天是在吾索实习的第17天.我在这天主要负责系统的骨架的搭建.首当其冲,要用的知识点就是ASP.NET母版页的使用了. ASP.NET的母版页有两种:一种是MasterPage,最常用也是最普通的母版 ...

  8. (转)检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(转)

    我们将ASP.NET程序从IIS6移植到IIS7,可能运行提示以下错误: HTTP 错误 500.23 - Internal Server Error 检测到在集成的托管管道模式下不适用的 ASP.N ...

  9. roleManager 元素（ASP.NET 设置架构），我是因为SSL弱密码（转）

    为角色管理配置应用程序. 此元素是 .NET Framework 2.0 版中的新元素. configuration 元素(常规设置架构)  system.web 元素(ASP.NET 设置架构)   ...

随机推荐

  1. mysql 模糊查询 concat()

    concat() 函数,是用来连接字符串. 精确查询: select * from user where name=”zhangsan” 模糊查询: select * from user where ...

  2. POJ1051 P,MTHBGWB

    题目来源:http://poj.org/problem?id=1051 题目大意: Morse密码里每个字母用长度不定的点和线来表示,一条信息中字母的编码之间用空隙隔开.下表为Morse密码的编码表: ...

  3. [JavaScript]如何实现一个JS脚本能在browser和NodeJs里都是用

    下面是一个Common的Solution 'use strict'; // Universal Module Definition (UMD) to support AMD, CommonJS/Nod ...

  4. 解决浏览器location.href重定向失效问题

    在[location.href]赋值语句后,添加页面刷新代码[location.reload(true)],参数为[true]这样就等价于F5刷新页面了. 需要注意的是:不能把[location.re ...

  5. IOS开发-基于WebDriverAgent代理服务，实现iOS手机app自动化测试的框架搭建

    导引 iOS自动化测试一直使用的appium,iOS系统升级至10.0 Xcode8.0之后,改用WebDriverAgent代理服务作为server,编写了一套基于WebDriverAgent服务 ...

  6. Paw —— 比Postman更舒服的API利器

    特点: 颜值高本地应用,流畅有收藏夹,管理请求可使用环境变量.比如用来一键切换开发环境请求和线上环境请求.即不同环境的同个接口只有host不一样,其它都是一样的,所以就把host抽离出来弄成一个环境变 ...

  7. 事物及exec

    事物3要出不多讲: 1.BEGIN TRANSACTION--开启事务 2.COMMIT TRANSACTION--事务执行 3.ROLLBACK TRANSACTION--事务回滚 俩总捕捉事物的方 ...

  8. esper（2）-事件类型

    1.pojo package com.ebc.eventtype.pojo.pojo1; import cn.hutool.core.collection.CollUtil; import com.e ...

  9. inode与block知识总结

    inode概述:硬盘要分区,然后格式化,创建文件系统在每个Linux存储设备的分区被格式化为ext3文件系统后一般有两个部分:    第一部分Inode:存储这些数据的属性信息(大小,属主,归属的用户 ...

  10. 27-----BBS论坛

    BBS论坛(二十七) 27.首页帖子列表布局完成 (1)apps/models.py 把帖子跟用户关联起来 class PostModel(db.Model): __tablename__ = 'po ...