ASP.NET中五种实现模板功能的方法

撰写于 2011年2月23日 修改于 2021年3月11日 分类 编程杂记 标签 ASP.NET views

在追求风格一致的项目中，无论是UI设计还是程序代码，都希望尽量更多的重用，一来修改方便，二来提高效率。对于WEB程序实现，设计的重用更多的时候也是代码的重用，在完成前期的工作后，如果后期能够模套用模板一样来进行，那将大大利于项目的进行。

为了能够实现模板这个功能，在ASP.NET 1.x中提供了用户控件（User Control），到了ASP.NET 2.0还出现了母版（Master Page），除此之外，还有三种方法可以达到类似的目的，具体实现却各有优点。

一、抄在前面

有一回对我说道，“你读过书么？”我略略点一点头。他说，“读过书，……我便考你一考。茴香豆的茴字，怎样写的？”我想，讨饭一样的人，也配考我么？便回过脸去，不再理会。孔乙己等了许久，很恳切的说道，“不能写罢？……我教给你，记着！这些字应该记着。将来做掌柜的时候，写账要用。”我暗想我和掌柜的等级还很远呢，而且我们掌柜也从不将茴香豆上账；又好笑，又不耐烦，懒懒的答他道，“谁要你教，不是草头底下一个来回的回字么？”孔乙己显出极高兴的样子，将两个指头的长指甲敲着柜台，点头说，“对呀对呀！……回字有四样写法，你知道么？”我愈不耐烦了，努着嘴走远。孔乙己刚用指甲蘸了酒，想在柜上写字，见我毫不热心，便又叹一口气，显出极惋惜的样子。

——周树人《孔乙己》·1919年

二、实现方法

为了方便理解，在这里将分别使用这五种方法来完成如下的内容的页面，页面分为三部分，上半部分为header，下半部分为footer，要求将这两部分模板化，具体各页面只需要对中间的内容进行指定即可。本文最末提供了所有源代码的下载。

1、使用母版方法实现

母版是在ASP.NET 2.0以后才出现的，使用母版时，相当于将页面的整体结构先构架出来，将各个页不同的位置放置一个contentplaceholder控件，并用ID区别之，套用母版时，只需要声明来自某母版，然后将区别于其它页的部分用Content控件组织起来，再指出它应该出现的位置的contentplaceholder ID，即可完成设计。

母版页就像是在一个完成的页面中挖空，然后在具体页面设计时再填空。空的个数可以在母版页中进行定义。

在Visual Studio 2005中新建一个网站，为了方便，我们将对各部分的样式独立一到个样式表中，在解决方案管理器中添加一个新项，模板中选择样式表，命名为style.css，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

body {
background-color:#bbb;
}

#header {
  background-color:#aaa;
  text-align:center;
}

#footer {
  background-color:#aaa;
  text-align:left;
}

再在解决方案管理器中添加一个新项，模板选择“母版页”，命名为TestMasterPage.master，切换到“源视图”，在和中添加如下一行，以引用样式表：

1

<link href = "style.css" rel = "stylesheet" type = "text/css" />

然后在

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div>
  <div id="header">
    <h2>Template Test ASP.NET Site</h2>
    <hr />
  </div>
  <asp:contentplaceholder id="testContentPlaceHolder" runat="server">
  </asp:contentplaceholder>
</div>
<div id="footer">
  <hr />
  <a href="javascript:history.go('-1')">Back</a|
  <a href = "default.aspx" >HomePage</a|
  <a href = "javascript:history.go('1')">Next</a>
</div>

其中asp:contentplaceholder...就是在引用母版页的其它页中可以指定内容的位置。

再在解决方案管理器中添加一个新项，模板中选择“Web窗体”，文件名为“TemplateByMasterPage.aspx”，并勾选“选择母版页”，点击“添加”后选择刚刚新建的母版页TestMasterPage.master。切换到源视图，添加如下代码：

1
2
3
4
5
6

<asp:Content ID="Content1" ContentPlaceHolderID="testContentPlaceHolder" Runat="Server">
  <p>
    This page achiveve by masterpage.
    <br /> MasterPage: <strong>TestMasterPage.master</strong>
  </p>
</asp:Content>

这便在母版页的指定位置实现了区别化的部分。

2、使用用户控件实现

在ASP.NET一出现便提供了用户控件，它的目的是为了让用户将多个经常固定出现的控件或者代码，封装起来组织成一个新的引用单位，用户控件的目的是为了便于用户掌握模块粒度，在模块的耦合与内聚之间进行平衡。

相对于母版的填空，控件更像是组装。

由于我们要实现的页面具有三个部分，有两个部分需要模板化，那就需要新建两个用户控件。

在解决方案管理器中添加一个新项，模板选择“Web用户控件”，命名为TemplateByUserControl_header.ascx，然后在源视图中添加如下代码：

1
2
3
4

<div id="header">
  <h2>Template Test ASP.NET Site</h2>
  <hr />
</div>

再添加另外一个用户控件，命名为TemplateByUserControl_footer.ascx，添加如下代码：

1
2
3
4
5
6

<div id = "footer" >
  <hr />
  <a href = "javascript:history.go('-1')">Back</a|
  <a href = "default.aspx" >HomePage</a|
  <a href = "javascript:history.go('1')">Next</a>
</div>

两个用户控件便添加完成了。在解决方案管理器中添加一个Web窗体新项，命名为TemplateByUserControl.aspx，在<%@ Page …%>行后添加如下两行，用以注册刚刚建立的两个用户控件：

1
2

<%@ Register Src="TemplateByUserControl_footer.ascx" TagName="TemplateByUserControl_footer" TagPrefix="uc_footer" %>
<%@ Register Src="TemplateByUserControl_header.ascx" TagName="TemplateByUserControl_header" TagPrefix="uc_header" %>

这便完成了用户控件的引用，然后在页面的部分中添加对样式表的引用。再在

1
2
3
4
5
6

<uc_header:TemplateByUserControl_header ID="id_uc_header" runat="server" />
<p>
This Page Achieve by UserControls.<br />
UserControls: <strong>TemplateByUserControl_header.ascx</strongand <strong>TemplateByUserControl_footer.ascx</strong>
</p>
<uc_footer:TemplateByUserControl_footer ID="id_uc_footer" runat="server" />

1
2
3
4

<div id = "header">
<h2>Template Test ASP.NET Site</h2>
<hr />
</div>

1
2
3
4
5
6

<div id = "footer" >
<hr />
<a href = "javascript:history.go('-1')">Back</a|
<a href = "default.aspx" >HomePage</a|
<a href = "javascript:history.go('1')">Next</a>
</div>

1
2
3
4
5
6

<% Response.WriteFile("header.inc"); %>
<p>
This page achieve by Response.WriteFile Method.<br />
INC file: <strong>header.inc</strong>  and <strong>footer.inc</strong>
</p>
<% Response.WriteFile("footer.inc"); %>

1

<!--#include file = "TemplateByIncludeASPXfile_header.aspx" -->

1

<iframe id="header"  frameborder ="0" style = "width:100%; height:100px" src = "TemplateByIframe_header.aspx"></iframe>