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
     
     =" width: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
     
     >
    
    

    
    

     
     <%
     
     @ 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
        
     
     {
     
     
            width
     
     :
     
     800px
     
     ;
     
     
            height
     
     :
     
     600px
     
     ;
     
     
            background-color
     
     :
     
     #aaa
     
     ;
     
     
        
     
     }
     
     
        #head
        
     
     {
     
     
            width
     
     :
     
     100%
     
     ;
     
     
            height
     
     :
     
     100px
     
     ;
     
     
            background-color
     
     :
     
     #c1c1e5
     
     ;
     
     
        
     
     }
     
     
        #content
        
     
     {
     
     
            width
     
     :
     
     100%
     
     ;
     
     
            height
     
     :
     
     500px
     
     ;
     
     
        
     
     }
     
     
        #left
        
     
     {
     
     
            width
     
     :
     
     150px
     
     ;
     
     
            height
     
     :
     
     100%
     
     ;
     
     
            float
     
     :
     
     left
     
     ;
     
     
        
     
     }
     
     
        #center
        
     
     {
     
     
            width
     
     :
     
     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
     
     >
     
     

    
    

效果图：

 在建立内容页面的时候，在“添加新项”对话框中要选中“选择母版页”复选框。这样建立的页面就是内容页面，内容页面在显示的时候会把母版面的内容一起以水印淡化的形式显示出来，而在母版页中的ContentPlaceHolder控件区域会被内容页面中的Content控件替换，程序员可以在这里编写内容页面中的内容。
代码如下：