ASP.NET2.0最得称道的特性之一就是支持“页面模板”。这个特性也许在每一个需要维护一致性的ASP.NET工程中都会用到。

   在ASP.NET2.0的这个特性中最酷的功能之一就是“页面嵌套”。使用这项技术可以为一个网站创建一个“根”页面,然后可以为不同的站点创建一些嵌套的页面,而这些页面都继承于“根”页面。如果想修改某一页的风格,只需要在子页面上修改即可。如我们创建一个SingleColumn页面和TwoColumn页面。这两页的基本风格和主页相同,只是SingleColumn有一列,而TwoColumn有两列而已。这项页面嵌套技术也非常有弹性。它可以使开发人员和设计人员快速并清楚地修改页面的风格和组织结构,并使用最少的代码,甚至不用复制内容就可完成。但非常遗憾的是Visual Studio 2005并不真正支持“页面嵌套”。在VS2005的WYSIWYG设计器中并不能编辑嵌套页面,这不能不说是一个遗憾。

    也许是微软意识到了这一点,这一切将在微软即将推出的Visual Studio 2008中得到彻底解决。也就是说VS2008将完全支持嵌套页面。并使得操作它们变得超级容易。因此,我建议所有的ASP.NET工程应该使用这个特性,因为这项特性将为我们的ASP.NET工程带来非常大的弹性。

一、使用VS2008中的嵌套主页

    如果我们现在还没有好模板,可以到http://www.opensourcetemplates.org/或其他的网页模板网站去下载更丰富的网页模板。这个模板网页是存的HTML的,也就是说,我们可以将它们应用到任何的服务端编程技术中。更准确地说,它们是使用CSS和XHTML建立的。图1是这个网站首页的截图。

为了做本文的实验,读者可以自行选择比较漂亮的模板。当然,我们可以在这个网站上在线浏览模板效果。

 

 

二、在嵌套页中使用上述的CSS/HTML模板

在VS2008中将上述的模板放到ASP.NET中以及使用嵌套页是非常容易的,具体可按以下几步操作。

1. 创建一个“根”页面

最开始我们会创建一个新的根页面文件。我们将在这个文件中定义其他页都需要的的布局和结构。我们将这个文件命名为“Site.Master”,并复制/粘贴刚才下载的模板的文件内容到这个文件中。然后我们在要插入特殊内容的地方放一个<asp:contentplaceholder>。我们将<asp:contentplaceholder> 控件命名为“MainContent”。如图1所示

使用VS2008的页面嵌套模板(图一)

图1  Site.Master

 

2. 创建一个SingleColumn页

在这一步我们使用上面创建的Site.Master来设置当前工作的页面。接下来会创建一个可以定制的子页面。

    为了实现这一步,我们用击solution explorer,在上下文菜单中选择“Add New Item”菜单项。然后选择“Master.Page”,并在文件名处输入“SingleColumn.Master”,最后选中“Select Master Page”。在做完上述工作后,点击“Add”按钮关闭对话框,如图2所示:

使用VS2008的页面嵌套模板(图二)

点击查看大图


图2 创建SingleColumn.master页

 

然后VS2008会让我们选择Site.Master模板以确定SingleColumn.master将基于哪一个页面建立。如图4所示:

使用VS2008的页面嵌套模板(图三)

点击查看大图

 

 



 最后VS2008会为我们建立一个SingleColumn.master文件,如图5所示:

使用VS2008的页面嵌套模板(图四)

点击查看大图


图5 SingleColumn.master

 

 

我们从上述的结果可以看出,VS2008已经将在“根”页面定义的叫“MainContent”的<asp:contentplaceholder>控件加到SingleColumn.master了。并自动加了一对<asp:content>控件,通过这个控件,我们可以对SingleColumn.master进行覆盖和扩展。

从图5的界面中我们还可以看到,在VS2008中将支持“分割视图”的,也就是说HTML的源代码和WYSIWYG设计器将会同时在一个界面显示。当我们在“分割视图”中的任何一个视图进行变化时,另一个视图就会立即同步这些变化。

    在本文中的SingleColumn.Master模板也是非常简单的,只需要使用CSS来定义它的列宽度,然后使用<asp:contentplaceholder>控件来填充指定的内容,SingleColumn.Master的内容如图6所示:

使用VS2008的页面嵌套模板(图五)

点击查看大图


图6 SingleColumn的内容

 

 

3. 创建TwoColumn页面

除了SingleColumn页面模板外,我们还需要第二个嵌套页面模板来处理两列的内容。我们将重复上面的步骤来建立一个TwoColumn.Master文件。这个文件的定义如图7所示:


 

使用VS2008的页面嵌套模板(图六)

点击查看大图



 

 

要注意的是在上面的代码中我们加了<asp:contentplaceholder>控件,一个叫“MainColumn”,另外一个叫“LeftColumn”(如果内容较少,将会被放在左侧的列中)。在这里我们将使用标准的HTMLCSS来控制这两列的位置。

4.  使用嵌套页来建立内容页

    到现在为止,我们已经定义了用于控制我们的站点的布局结构的页面。接下来我们来向网站中加入web页。启动“Add New Item”后,在文件名中输入“HomePage.aspx”,这个将是网站的默认首页。如图8所示:

使用VS2008的页面嵌套模板(图七)

点击查看大图


图8 建立HomePage.aspx页

 

然后来选择使用哪一个嵌套页做为HomeHome.aspx的模板页。在这里我们来选择TwoColumn.master作为模板页,如图9所示:

使用VS2008的页面嵌套模板(图八)

点击查看大图


图9 为HomePage.aspx选择嵌套页

 



   下面是HomePage.aspx的代码,在其中加入了两个空的<asp:content>控件,我们可以利用这两个控件向主列和左列中添加内容。如图10所示:

使用VS2008的页面嵌套模板(图九)

点击查看大图


图10 HomePage.aspx的内容

 

从上面的内容可以看出,在VS2008中我们不仅仅得到了WYSIWYG的支持,而且还支持分割视图。接下来到任务就是向<asp:content>中添入自己的内容和代码了。如图11所示:


 

使用VS2008的页面嵌套模板(图十)

点击查看大图


图11

 

上面所述的只是抛砖引玉,我们还可以为这个工程加入其它的页,这些页可以基于SingleColumn.Master或TwoColumn.Master。

由于这两个模板都继承于“根”模板Site.Master,因此,如果我对Site.Master进行任何变化(如变化了顶端的logo或导航条),那么这些变化将自动应用到其它的页面。如果如想改动继承于SingleColumn.Master和TwoColumn.Master的页面,只需要修改这个页模板即可。

三、 小结

    微软即将推出的VS2008将全面支持ASP.NET嵌套页面(免费的Visual Web Developer Express 2008也同样支持这个特性)。这个特性将会大大提高页面的一致性。

由于VS2008支持多个版本的.net framework,因此,我们在使用上述特性时可以不使用.NET3.5。我们在VS2008中仍然可以使用现在已经成熟的ASP.NET2.0来创建工程,并充分使用这个特性。

posted on 2009-03-04 16:02  许维光  阅读(565)  评论(0)    收藏  举报