如今的网站远比过去复杂。仅仅拥有不错的外观和感觉是远远不够的。它必须易于使用并能够准确显示用户希望看到的信息。此外,用户可能还希望网站以特定的方式来呈现这些信息:根据他们自己的偏好。因此,个性化以及个人配置档案在 Web 开发中显得更为重要。
用户希望定义的不仅仅是简单的个人档案信息,他们要自定义网站的用户界面以满足自己的需求,以便能够在登录时就访问到日常工作所需的所有信息。本文将介绍如何使用 ASP.NET Web Parts Framework 和个性化功能来创建满足这些需求的模块化。
Web 部件与 ASP.NET AJAX
ASP.NET AJAX 扩展和 Web 部件有功能间的重叠。例如,Accordion 控件可以最小化和恢复网页的部件,这和 Web 部件的功能很像。同样,DragPanel 控件可以通过鼠标的拖放重定义内容区域的位置,这也和 Web 部件相似。这就产生了一个问题:什么时候应该使用其中哪个功能呢?
其实,这个问题的答案很简单:Web 部件不仅仅是 Accordion 和 DragPanel 控件所能提供的某个功能。Web Parts Framework 是用于个性化的完整框架。如果需要完整的框架,就应该采用 Web Parts Framework。
它的功能包括为群组和单一用户个性化页面外观,为插入 Web 应用的每个模块进行自定义设置,在运行时不需要重新编译即可添加新模块从而对系统进行动态扩展等。如果需要全部功能,那么就选择 Web 部件,如只需要像最小化和恢复页面的部分或者在网页上拖放内容,那么 Web 部件或许太为厚重了,应使用 ASP.NET AJAX 控件。当然,也可以同时使用这两项技术。
典型门户网站
在个性化环境中,用户要把特定的信息保存到个人配置档案里。此外,用户还要能够定制网站的大部分外观以及它们显示的信息。微软的 MSN 是个性化的很好示例。登录 MSN 后,用户可以配置个人主页上要显示的信息。
用户可以选择要在页面上看到的信息类型,还能拖动内容项到页面不同的地方,退出后再次登录时,所有的变更都得以保留。这些类型的页面定义了用户可以添加或移除信息项的内容区域,信息项无非是可重用的用户界面元素。
多数情况下,门户页面会定义多个内容区域:位于页面中间用于显示最重要信息的主区域;页面左或右侧的导航区域;用于显示其他小项(如天气和快捷链接的列表)的可选区域;多数网页还有页头和页尾(可以通过母版页很方便的创建它们)。
通过 ASP.NET Web Parts Framework 可以很方便的创建个性化网页。组成框架的控件和组件可以为你完成如下工作:
- 定义可自定义的区域。通过 Web 部件区域来组织页面并指定可自定义的区域。
- 为项选择提供组件。除了可自定义的区域,框架还包含了特殊的单元,可以让你编辑页面上显示内容的属性或者添加或移除页面中的信息项。
- 自定义网页。用户登录到应用程序后,可以通过拖放网页各个区域的显示项来自定义网页。用户甚至可以最小化或关闭某些内容来为其他更有意思的内容提供更多空间。
- 保存自定义的外观。ASP.NET 通过个性化框架自动保存用户自定义的外观。
基本 Web 部件页面
使用这种框架的页面被称为 Web 部件页面,可以显示的信息项成为 Web 部件。创建 Web 部件页面所需的步骤如下:
- 创建一个普通的 ASP.NET 页面。
- 添加一个 WebPartManager 控件。这个控件不可见,但它知道当前页面上所有可用的 Web 部件的信息并管理个性化信息。它必须是 Web 部件页面上第一个控件,因为每个与 Web 部件相关的控件都依赖于它。
- 添加 WebPartZone 控件。页面上的每个要显示 Web 部件的区域都被封装在 WebPartZone 的一个实例里。
- 添加 Web 部件。可以使用简单的用户控件、预置的用户控件、自定义服务器控件或者直接从 WebPart 基类派生来的控件。
- 添加预置区域和部件。如果用户想要在运行时添加或者删除 Web 部件,或者编辑 Web 部件的属性,你需要添加预置的区域到网页,如 CatalogZone(该区域允许用户向页面添加 Web 部件)。
完成以上步骤后,Web 部件页面就可以使用了。记住,需要在应用程序里包含用户验证功能(Windows 验证或表单验证),以便框架可以为每个用户保存个性化信息。默认情况下,这些信息保存在基于文件的数据库 ASPNETDB.MDF 里。该文件是安装了 SQL Server Express 后在 App_Data 目录下自动创建的。否则,你需要使用 aspnet_regsql.exe 在完整版本的 SQL Server 上创建该数据库。
创建页面设计
下面的例子创建一个简单的 .aspx 页面,使用 HTML 表为页面构造了一个中间的主区域、一个左边的配置区域、一个右边的简单信息区域:
<div>
<table style="width: 100%">
<tr valign="middle" style="background: #00ccff">
<td colspan="2">
<span style="font-size: 16pt; font-family: Verdana"><strong>Welcome to web part pages!</strong>
</span>
</td>
<td style="height: 22px"></td>
</tr>
<tr valign="top">
<td style="width: 20%"></td>
<td style="width: 60%"></td>
<td style="width: 20%"></td>
</tr>
</table>
</div>
</form>