小技巧：基于ASP.NET的网页复用方法
2024-07-10 13:04:37
供稿：网友
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，内容如下：
<%@ control %>
<table width="775" border="0">
<tr>
<td align="center" valign="middle"><a href="../default.aspx"><img alt="" src="http://www.VeVb.com/htmldata/2006-04-04/upload/200902/banner1.jpg" border="0"></a>
</td>
</tr>
</table>
页脚为两行文字，用两行一列的表格实现。新建文件footer.ascx，内容如下：
<%@ control %>
<table width="775" border="0">
<tr>
<td align="center" valign="middle">www.hahaha.com</td>
</tr>
<tr>
<td align="center" valign="middle">hahaha studio </td>
</tr>
<tr>
<td align="center" valign="middle">contact us :<a href="mailto:[email protected]">[email protected]</a> </td>
</tr>
</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>加入以上注册的控件，就可以了。还可以直接在visual studio.net开发环境中将web窗体用户控件拖放至需要的位置，查看网页代码可知，两种方法的效果是一样的。开发环境中的图片如图2。
但是，每个页面都要手动加上上段所提代码，似乎有些麻烦，是否可以设定一个基类，而具体网页作为子类来继承它呢，事实证明是可行的，这也是asp.net带来的好处之一。
建立文件univnewsbase.cs，代码如下：
using system;
using system.io;
using system.web.ui;
using system.web.ui.htmlcontrols;
using univnews.controls;
namespace univnewsbase
{
public class univnewsbase : system.web.ui.page
{
protected override void render(htmltextwriter writer)
{
//建立页眉，导航菜单，页脚三个控件
header header = (header)loadcontrol(request.applicationpath +
path.altdirectoryseparatorchar +
"controls/header.ascx");
menu menu = (menu)loadcontrol(request.applicationpath +
path.altdirectoryseparatorchar +
"controls/menu.ascx");
footer footer = (footer)loadcontrol(request.applicationpath +
path.altdirectoryseparatorchar +
"controls/footer.ascx");
//得到网页中的form，将上面建立的控件插入
control form = page.controls[1];
form.controls.addat(0, header);
form.controls.addat(1, menu);
form.controls.addat(page.controls[1].controls.count, footer);
//回调父类方法
base.render(writer);
}
}
}
代码中使用loadcontrol方法得到载入已定义好的web用户控件，再强制转换为相应的类型。page.controls[1]得到网页的form，再用form的controls属性的addat方法加控件到form中。值得注意的是在加页脚控件footer时，使用了page.controls[1].controls.count来定位，这样可以确保页脚控件在form上的最后一个位置。
删去campus.aspx文件中的web窗体用户控件，在campus.aspx.cs中将campus类的基类由system.web.ui.page改为univnewsbase，其余保持不变，可以发现运行时的结果和修改前一样。而其它的页面，凡是采用和campus.aspx一样布局的，都可以从univnewsbase继承。如此，这些页面的制作工作被大大简化，并且布局若要有所改变，修改基类就可以了，这充分利用了面向对象方法的优点。
3、 扩展
上述解决方案针对横向导航菜单，但是现在有许多情况下导航菜单是竖向排列，位于页面左边（如图3），这时就不能使用上面的方法了。一般地，需要做一个基本页面的框架（并不是html中frame的概念），把页眉、页脚、导航菜单都放好后，再在导航菜单的右侧，也就是根据页面不同而不同的内容部分，放上诸如placeholder、datalist等等服务器端控件，然后在页面所对应的codebehind文件中，对这些控件应该包含的数据加以操作，例如从数据库中将新闻标题绑定到datalist上，或着将具体新闻显示出来等等。以这种方式，页面文件（.aspx）同样可以做到尽可能少，其余事务均放在服务器端处理了。
