Asp.net 2.0专题之一:MasterPage

 

Asp.net 2.0专题之一:MasterPage

由于.net 2.0 很快就要发布了,大家都会面临一个IDE环境迁移(vs.net 2005).net 2.0新特性的应用问题,在接下来的一些文章,我会做一些asp.net 2.0的专题,写这些文章的初衷是想为很多分析Community ServerCoder们提供一个在我能力范围内的帮助,让大家看到一些新技术是如何诞生和被应用的,很大一部分新特性对于一个熟悉Community ServerCoder来说根本算不上新,因为它们早就被应用在CS中。专题主要包括:MasterPageTheme、本地化、SiteMap等。

 

这一系列的专题编写环境是winxp sp2vs.net 2005 beta2SQL Server2005 CTP.Net Framework Version 2.0.50215

好了,打开vs.net 2005新建一个web project吧:
Asp.net 2.0专题之一:MasterPage_第1张图片 

这个专题中主要讲解的是MasterPage,什么是MasterPage,先不解释,我后面再来看这个定义,给刚刚建立的工程添加一个MasterPageAsp.net 2.0专题之一:MasterPage_第2张图片MasterPagemaster为后缀名,我们刚刚建立了一个MasterPage.master文件,该文件有如下内容:

<% @ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage"  %>

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >

 

< html  xmlns ="http://www.w3.org/1999/xhtml"   >

< head  runat ="server" >

    
< title > Untitled Page </ title >

</ head >

< body >

    
< form  id ="form1"  runat ="server" >

    
< div >

        
< asp:contentplaceholder  id ="ContentPlaceHolder1"  runat ="server" >

        
</ asp:contentplaceholder >

    
</ div >

    
</ form >

</ body >

</ html >

粗看还以为这是一个普通的aspx页面,其实不是,最上面的<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

表面明这是一个master文件,同时在页面中你可以看到用<div>包裹着的一个asp控件

Contentplaceholder,这个叫“内容占位符”,他的作用就是先通过div或者table进行分割,然后“霸占”一个地方,声明此地有“主”了,不过主人不是Contentplaceholder,而是后面会说道到的Content控件。

注意:<div>一般通过css样式表来控制页面的布局,如cnblogs里面的很多皮肤都是如此,为了不把问题复杂化,我还是用table。在Design状态下画出如下表格(vs.net 2005 Design功能真的好用很多^_^)

Asp.net 2.0专题之一:MasterPage_第3张图片
这是一个很标准的网页页面布局,下一步就把
Contentplaceholder放进去“占地盘”“:

Asp.net 2.0专题之一:MasterPage_第4张图片 

放完后我们把各个部分的ContentPlaceHolder重新命名一次,更改后的代码如下:

<% @ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage"  %>

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >

 

< html  xmlns ="http://www.w3.org/1999/xhtml"   >

< head  runat ="server" >

    
< title > Untitled Page </ title >

</ head >

< body >

    
< form  id ="form1"  runat ="server" >

   
< table  width ="60%" >

            
< tr >

                
< td  colspan ="3"  height ="80" >

                    
< asp:ContentPlaceHolder  ID ="TopContent"  runat ="server" >

                    
</ asp:ContentPlaceHolder >

                
</ td >

            
</ tr >

            
< tr >

                
< td  height ="300"  width ="25%" >

                    
< asp:ContentPlaceHolder  ID ="LeftContent"  runat ="server" >

                    
</ asp:ContentPlaceHolder >

                
</ td >

                
< td >

                    
< asp:ContentPlaceHolder  ID ="CenterContent"  runat ="server" >

                    
</ asp:ContentPlaceHolder >

                
</ td >

                
< td  width ="25%" >

                    
< asp:ContentPlaceHolder  ID ="RightContent"  runat ="server" >

                    
</ asp:ContentPlaceHolder >

                
</ td >

            
</ tr >

            
< tr >

                
< td  colspan ="3"  style ="height: 80px" >

                    
< asp:ContentPlaceHolder  ID ="CopyrightContent"  runat ="server" >

                    
</ asp:ContentPlaceHolder >

                
</ td >

            
</ tr >

        
</ table >

    
</ form >

</ body >

</ html >

Design状态下我们可以看到如下效果:

Asp.net 2.0专题之一:MasterPage_第5张图片
有了
MasterPage后我们该如何使用?光上面所说的根本解决不了任何问题。下面看看如何使用:

首先建立一个新的aspx页面,记得把Select Master Page项选上:

Asp.net 2.0专题之一:MasterPage_第6张图片 

此时点击Add后会谈出下面这个窗口:

Asp.net 2.0专题之一:MasterPage_第7张图片由于目前只有一个MasterPage文件,所以只能选择它,确定后新的Default2.aspx页面被建立,这个时候你会发现Default2.aspx页面中没有标准的html页面的格式,取而代之的是asp.net控件ContentDefault2.aspx中的代码如下:

<% @ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page"  %>

< asp:Content  ID ="Content1"  ContentPlaceHolderID ="TopContent"  Runat ="Server" >

</ asp:Content >

< asp:Content  ID ="Content2"  ContentPlaceHolderID ="LeftContent"  Runat ="Server" >

</ asp:Content >

< asp:Content  ID ="Content3"  ContentPlaceHolderID ="CenterContent"  Runat ="Server" >

</ asp:Content >

< asp:Content  ID ="Content4"  ContentPlaceHolderID ="RightContent"  Runat ="Server" >

</ asp:Content >

< asp:Content  ID ="Content5"  ContentPlaceHolderID ="CopyrightContent"  Runat ="Server" >

</ asp:Content >

 

注意观察一下,在<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>里多了一个MasterPageFile="~/MasterPage.master"项,这表明这个页面使用MasterPage.master

,该文件存放在与该页面相同的目录下(当有多个MasterPage文件时你也可以新建立一个目录方便管理)。记得刚才在MasterPage.master中的设置吗,我们定义了五个ContentPlaceHolderID分别是TopContentLeftContentCenterContentRightContentCopyrightContent,在Default2.aspx页面下的Content控件里,有一个属性就是ContentPlaceHolderID,该字段表明该Content控件中的内容代替ID指向的ContentPlaceHolder占位控件,这就是真的“霸主”了。这样一来,页面布局就使用MasterPage.master中的,而内容就使用Default2.aspxContent控件下的,因此你在Default2.aspx 中找不到Html页面的基本格式标记,如<head><body>。看一下DesignDefault2.aspx会是什么样子:

Asp.net 2.0专题之一:MasterPage_第8张图片
MasterPage.master很像,但又不同,因为除了Content控件占用的地方是可以编辑的外其他地方都是不可以编辑的。

 

现在可以总结MasterPage的作用了,MasterPage其实是一种模板,它可以让你快速的建立相同页面布局而内部不同的网页,如果一个网站有多个MasterPage,那么新建aspx文件的时候就可以选择需要实现页面布局的MasterPage。另外,在你没有使用MasterPage之前,如果N个相同的页面布局需要改动成另外一个样式,那么你就要做很多无聊而又不得不做的工作,对N个页面进行一一更改,如果使用了MasterPage,你只要改动一个页面也就是MasterPage文件就可以了。还有,你是否发现你要要部署的web程序越来越大,使用MasterPage在一定程度上会减小web程序的大小,因为所有的重复的html标记都只有一个版本。

CS 中也采用了MasterPage ,由于asp.net 1.1的框架并不提供MasterPage相关功能的组件,因此CS引用了MetaBuilders.WebControls.MasterPages.dll组件来支持该功能,整个实现过程是一样的。Asp.net 2.0中还对MetaBuilders.WebControls.MasterPages.dll进行了扩展,提供了更多的支持,如:可以给MasterPage文件提供一个*.cs文件,该文件继承了System.Web.UI.MasterPage

最后看看高级的应用MasterPage,先往Default2.aspx中的Content1控件中加入一个红色的Panel控件,为的是标记该Content的位置,然后新建一个MasterPage2.master,MasterPage与之前定义的一样,只把CopyrightContentTopContent控件的位置对调一下。好了,先测试一下:Asp.net 2.0专题之一:MasterPage_第9张图片
这个时候红色的块在顶部也就是
MasterPage.master中定义的位置,再下来我们往Default2.aspx.cs中加入下面一段小代码:

public   void  Page_PreInit()
{

   
this.MasterPageFile= "~/MasterPage2.master";

}

在测试一下,你会看到如下的界面:

Asp.net 2.0专题之一:MasterPage_第10张图片
哈哈,红色的块到底部了,也就是
MasterPage2.master中定义的,因为在MasterPage2.master中把CopyrightContentTopContent对调了。到此,不知道各位是否找到了对MasterPage的感觉?是的,你不光可以静态的使用MasterPage,还能动态的使用,如根据不同的用户,或者根据不同的权限显示页面不同的布局风格。在MasterPage中实现一切都如此简单,其他的想象空间留给各位,感谢你的阅读,你的收获就是我的收获。

 

你可能感兴趣的:(asp.net)