ASP.NET设置母版页

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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

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

开发过程：

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

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

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

HtmlPage1.html为母版页

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body{
            margin:0px;
        }
       
        #top{
            width:100%;
            height:100px;
            background-color:#6f5e5e;
        }
        .left{
          float:left;
         margin-top:12px;
         margin-left:25px;
        }
        .logo{
            margin-left:auto;
            margin-right:auto;
            margin-top:25px;
        }
        img{
           vertical-align:middle;
        }
        .right{
          float:right;
        }

    </style>
</head>

<body>
 <div id="top">
  <img src="img/leftcloud.png" class="left" />
     <img src="img/logo.png" class="logo" />
     <img src="img/rightcloud.png" class="right" />
 </div>
</body>
</html>

HtmlPage2.html来调用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body style="margin:0px">
    <iframe src="HtmlPage1.html" width="100%" height="100px"></iframe>
    //利用iframe框架标签来显示
</body>
</html>

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

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

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

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

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="WebApplication3.WebUserControl1" %>
<style>
        body{
            margin:0px;
        }
       
        #top{
            width:100%;
            height:100px;
            background-color:#6f5e5e;
        }
        .left{
          float:left;
         margin-top:12px;
         margin-left:25px;
        }
        .logo{
            margin-left:auto;
            margin-right:auto;
            margin-top:25px;
        }
        img{
           vertical-align:middle;
        }
        .right{
          float:right;
        }

    </style>

 <div id="top">
  <img src="img/leftcloud.png" class="left" />
     <img src="img/logo.png" class="logo" />
     <img src="img/rightcloud.png" class="right" />
 </div>

View Code

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 
 6 <!DOCTYPE html>
 7 
 8 <html xmlns="http://www.w3.org/1999/xhtml">
 9 <head runat="server">
10 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
11     <title></title>
12 </head>
13 <body style="margin:0px">
14      <!--两种方式嵌入不需要改变的网页显示部分-->
15     <iframe src="HtmlPage1.html" width="100%" height="100px"></iframe> <!--iframe 框架标签-->
16   
17     <form id="form1" runat="server">
18         <uc1:WebUserControl1 runat="server" id="WebUserControl1" />  
19         <!--web窗体用户控件-->
20     </form>
21 </body>
22 </html>