基于ASP.NET的网页复用方法

** 摘要 ** ：以一个新闻网站页面为例，结合 ASP.NET 的特性，介绍了复用网页的方法。

** Abstract ** ： This paper introduces some methods of reusable web page which combining with the features of ASP.NET, and taking a web page of a News web site as an example.

** 关键词 ** ： ASP.NET 复用 用户控件 继承

** Key Words ** ： ASP.NET reusable User Controls inherit

0、 引言

随着网络的不断发展，以 Web 为基础的 B/S 架构是当前应用程序的主流，在这种架构下业务逻辑和数据库都放在服务器段，用户通过浏览器来操作服务器端的数据。在 Microsoft.NET 平台还没有推出之前，人们可以通过 ASP 方式实现上述目标，现在则可以选择 ASP.NET 了。

ASP.NET 是一个已编译的、基于 .NET 的环境，可以用任何与 .NET 兼容的语言（包括 Visual Basic.NET 、 C# 和 JScript.NET. ）创作应用程序。任何 ASP.NET 应用程序都可以使用整个 .NET Framework 。相比之下， ASP 是一种解释型的编程框架，脚本语言为 VBScript 和 JavaScript ，这两种语言的功能有限，需要使用 C++ 、 Java 等语言编写的组件来扩展其功能，加之又是解释运行，效率有限。

1、 问题提出

一个网站，特别是与数据库结合起来的网站（如新闻网站、产品介绍网站等），有许多网页都是类似的，不同的只是与数据库相关的数据（如不同的新闻内容、不同的产品等）。我们没有必要为每一个页面写一个文件，这样做的代价太高，我们可以将不变的部分固定下来，变化的部分根据客户端请求的不同而动态产生。

以一个包含页眉、页脚、导航栏的新闻网站页面为例，示例页面如下：

2、 解决方法

ASP.NET 中引入了 Web 窗体用户控件的概念，利用它我们可以方便地创建自定义的可重用控件。用户控件可以在第一次请求时被编译并存储在服务器内存中，这样可以缩短后续请求的响应时间。用户控件继承自 System.Web.UI.UserControl 。我们可以将页眉 、页脚、导航栏都做成用户控件。

为简单起见，页眉只包含一张指向首页的图片。新建文件 Header.ascx ，内容如下：

1@ Control 

1<table border="0" width="775">
2<tr>
3<td align="center" valign="middle"><a href="../default.aspx"><img alt="" border="0" src="image/banner1.jpg"/></a>
4</td>
5</tr>
6</table>

页脚为两行文字，用两行一列的表格实现。新建文件 Footer.ascx ，内容如下：

1@ Control 

 1<table border="0" width="775">
 2<tr>
 3<td align="center" valign="middle">www.hahaha.com</td>
 4</tr>
 5<tr>
 6<td align="center" valign="middle">hahaha studio </td>
 7</tr>
 8<tr>
 9<td align="center" valign="middle">contact us :<a href="mailto:[email protected]">[email protected]</a> </td>
10</tr>
11</table>

导航菜单有 5 个链接，分别对应校园、学术报告、时事、体育、科教五个栏目，对应链接为 campus.aspx 、 dissertation.aspx 、 news.aspx 、 sports.aspx 、 education.aspx ，所采用的是图片链接的方式。建立 Menu.ascx 文件，其代码与页眉相似，此处略去。

三个控件的效果如图 1 。

我们在 campus.aspx 等五个文件中均可用到上述控件，以 compus.aspx 为例。首先在文件的开始加入语句 ``` @ Register TagPrefix="uc1" TagName="Header" Src="Controls/Header.ascx"

<uc1:header id="Header1" runat="server"></uc1:header>

 1加入以上注册的控件，就可以了。还可以直接在  Visual Studio.NET  开发环境中将  Web  窗体用户控件拖放至需要的位置，查看网页代码可知，两种方法的效果是一样的。开发环境中的图片如图  2  。   
 2
 3
 4![](http://dev.csdn.net/article/46/file:///C:/Documents%20and%20Settings/Liangjiang/桌面/a2.JPG)   
 5但是，每个页面都要手动加上上段所提代码，似乎有些麻烦，是否可以设定一个基类，而具体网页作为子类来继承它呢，事实证明是可行的，这也是  ASP.NET  带来的好处之一。 
 6
 7建立文件  UnivNewsBase.cs  ，代码如下： 
 8
 9using System; 
10
11using System.IO; 
12
13using System.Web.UI; 
14
15using System.Web.UI.HtmlControls; 
16
17using UnivNews.Controls; 
18
19namespace UnivNewsBase 
20
21{ 
22
23public class UnivNewsBase : System.Web.UI.Page 
24
25{ 
26
27protected override void Render(HtmlTextWriter writer) 
28
29{ 
30
31//  建立页眉，导航菜单，页脚三个控件 
32
33Header header = (Header)LoadControl(Request.ApplicationPath + 
34
35Path.AltDirectorySeparatorChar + 
36
37"Controls/Header.ascx"); 
38
39Menu menu = (Menu)LoadControl(Request.ApplicationPath + 
40
41Path.AltDirectorySeparatorChar + 
42
43"Controls/Menu.ascx"); 
44
45Footer footer = (Footer)LoadControl(Request.ApplicationPath + 
46
47Path.AltDirectorySeparatorChar + 
48
49"Controls/Footer.ascx"); 
50
51//  得到网页中的  form  ，将上面建立的控件插入 
52
53Control form = Page.Controls[1]; 
54
55form.Controls.AddAt(0, header); 
56
57form.Controls.AddAt(1, menu); 
58
59form.Controls.AddAt(Page.Controls[1].Controls.Count, footer); 
60
61//  回调父类方法 
62
63base.Render(writer); 
64
65} 
66
67} 
68
69} 
70
71代码中使用  LoadControl  方法得到载入已定义好的  Web  用户控件，再强制转换为相应的类型。  Page.Controls[1]  得到网页的  form  ，再用  form  的  Controls  属性的  AddAt  方法加控件到  form  中。值得注意的是在加页脚控件  footer  时，使用了  Page.Controls[1].Controls.Count  来定位，这样可以确保页脚控件在  form  上的最后一个位置。 
72
73删去  campus.aspx  文件中的  Web  窗体用户控件，在  campus.aspx.cs  中将  campus  类的基类由  System.Web.UI.Page  改为  UnivNewsBase  ，其余保持不变，可以发现运行时的结果和修改前一样。而其它的页面，凡是采用和  campus.aspx  一样布局的，都可以从  UnivNewsBase  继承。如此，这些页面的制作工作被大大简化，并且布局若要有所改变，修改基类就可以了，这充分利用了面向对象方法的优点。 
74
753、  扩展 
76
77上述解决方案针对横向导航菜单，但是现在有许多情况下导航菜单是竖向排列，位于页面左边（如图  3  ），这时就不能使用上面的方法了。一般地，需要做一个基本页面的框架（并不是  Html  中  frame  的概念），把页眉、页脚、导航菜单都放好后，再在导航菜单的右侧，也就是根据页面不同而不同的内容部分，放上诸如  PlaceHolder  、  DataList  等等服务器端控件，然后在页面所对应的  codeBehind  文件中，对这些控件应该包含的数据加以操作，例如从数据库中将新闻标题绑定到  DataList  上，或着将具体新闻显示出来等等。以这种方式，页面文件（  .aspx  ）同样可以做到尽可能少，其余事务均放在服务器端处理了。 
78
79![](http://dev.csdn.net/article/46/C:/Documents and Settings\\Liangjiang\\桌面\\a3.JPG)
80
81参考文献 
82
83[1] Daniel Cazzulino  等  C# Web  应用程序入门经典  [M].  北京：清华大学出版社，  2003-08 
84
85[2]  黄忠成  ASP.NET  组件设计  [M]  北京：电子工业出版社，  2004-05 
86
87[3] Joseph Mayo C#  技术内幕  [M]  北京：机械工业出版社，  2003-01
Published At
Categories with Web编程
Tagged with
comments powered by Disqus