使用 Web 部件页面的门户网站（基本 Web 部件页面）

       如今的网站远比过去复杂。仅仅拥有不错的外观和感觉是远远不够的。它必须易于使用并能够准确显示用户希望看到的信息。此外，用户可能还希望网站以特定的方式来呈现这些信息：根据他们自己的偏好。因此，个性化以及个人配置档案在 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 部件页面所需的步骤如下：

1. 创建一个普通的 ASP.NET 页面。
2. 添加一个 WebPartManager 控件。这个控件不可见，但它知道当前页面上所有可用的 Web 部件的信息并管理个性化信息。它必须是 Web 部件页面上第一个控件，因为每个与 Web 部件相关的控件都依赖于它。
3. 添加 WebPartZone 控件。页面上的每个要显示 Web 部件的区域都被封装在 WebPartZone 的一个实例里。
4. 添加 Web 部件。可以使用简单的用户控件、预置的用户控件、自定义服务器控件或者直接从 WebPart 基类派生来的控件。
5. 添加预置区域和部件。如果用户想要在运行时添加或者删除 Web 部件，或者编辑 Web 部件的属性，你需要添加预置的区域到网页，如 CatalogZone（该区域允许用户向页面添加 Web 部件）。

       完成以上步骤后，Web 部件页面就可以使用了。记住，需要在应用程序里包含用户验证功能（Windows 验证或表单验证），以便框架可以为每个用户保存个性化信息。默认情况下，这些信息保存在基于文件的数据库 ASPNETDB.MDF 里。该文件是安装了 SQL Server Express 后在 App_Data 目录下自动创建的。否则，你需要使用 aspnet_regsql.exe 在完整版本的 SQL Server 上创建该数据库。

 

创建页面设计

       下面的例子创建一个简单的 .aspx 页面，使用 HTML 表为页面构造了一个中间的主区域、一个左边的配置区域、一个右边的简单信息区域：

<form id="form1" runat="server">
<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>

 

WebPartManager 和 WebPartZone

       现在可以添加第一个 Web 部件控件到页面了。这些控件汇集在 VS 工具箱的 WebParts 部分。首先添加 WebPartManager：

<form id="form1" runat="server">

<asp:WebPartManager ID="MyPartManager" runat="server">

</asp:WebPartManager>

<div>

    <table style="width: 100%">

    ...

    </table>

</div>

</form>

       当用户添加或者删除一个 Web 部件时，或者当一个 Web 部件与另一个通信时，WebPartManager 会抛出事件来让你处理，以便应用程序能执行特定的动作。

       添加了 WebPartManager 之后，就可以添加可定制区域到 Web 部件。这些区域称为 Web 部件区域，每个 Web 部件区域都能包含任意多的 Web 部件。添加了 Web 部件区域后，完整的代码如下：

<form id="form1" runat="server">

<asp:WebPartManager ID="MyPartManager" runat="server">

</asp:WebPartManager>

<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">Menu</td>

        </tr>

        <tr valign="top">

            <td style="width: 20%">

                <asp:CatalogZone ID="SimpleCatalog" runat="server">

                </asp:CatalogZone>

            </td>

            <td style="width: 60%">

                <asp:WebPartZone ID="MainZone" runat="server">

                </asp:WebPartZone>

            </td>

            <td style="width: 20%">

                <asp:WebPartZone ID="HelpZone" runat="server">

                </asp:WebPartZone>

            </td>

        </tr>

    </table>

</div>

</form>

       页面现在包含 3 个区域：两个区域用于添加自定义 Web 部件到页面，另一个是特别区域 CatalogZone，它显示当前页面可用的所有 Web 部件的列表，并且允许用户从该列表中选择 Web 部件并将其添加到页面上。在设计器里，当前代码效果图如下：

 

向页面添加 Web 部件

       现在，可以向网页上添加 Web 部件了。Web 部件就是一个基本的 ASP.NET 控件。你可以使用任意类型的控件。如已有的服务器控件、现存的用户控件和自定义的服务器控件等。

       Web 部件区域使用了模板。在概念上它与网格控件相同，在网格控件里你可以为每一行都指定一个模板，模板只定义 Web 部件的外观。

       现在添加现存的服务器控件到一个区域里，如下所示：

<asp:WebPartZone ID="HelpZone" runat="server">

    <ZoneTemplate>

        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>

        <asp:FileUpload ID="FileUpload1" runat="server" />

    </ZoneTemplate>

</asp:WebPartZone>

       现在创建一个如下图所示的数据库表，并且在其中填充一些测试记录，稍后将使用这些记录来扩展这个示例。

       

       基于 Customer 表，现在创建第一个 Web 部件。只需添加一个新的用户控件到解决方案中，从服务器浏览器里拖曳 Customer 表到用户控件。设计器会自动创建数据源和一个 GridView 来显示数据（不要自动格式化 GridView，这将在稍后基于 WebPartZone 控件自动完成）。

       现在，拖动用户控件到主 Web 部件区域，设计器在页面里为注册控件创建必要的条目，然后添加控件到 Web 部件区域，包括添加包含 Web 部件区域的内容的 <ZoneTemplate> 标签：

<asp:WebPartZone ID="MainZone" runat="server">

    <ZoneTemplate>

        <uc1:WebUserControl ID="WebUserControl1" runat="server" />

    </ZoneTemplate>

</asp:WebPartZone>

 

       最后，可以添加一个特别的 Web 部件到前面添加的 CatalogZone 控件。因为这个区域是用来显示 Web 部件目录的，你只可以添加特殊控件（如 PageCatalogPart）到这个区域：

<asp:CatalogZone ID="SimpleCatalog" runat="server">

    <ZoneTemplate>

        <asp:PageCatalogPart ID="PageCatalogPart1" runat="server" />

    </ZoneTemplate>

</asp:CatalogZone>

 

       在启动 Web 应用程序前，可以打开对应区域的智能标签来自动格式化相应的 WebPartZone 控件。你会看到格式化被自动应用到被直接置于该区域内的每个控件上。注意，在 Web 部件自身执行的格式化动作会覆盖 Web 部件区域上的格式化选择。

       运行后会看见类似下图的效果，取决与格式化选项及用户控件的设置等，大体如下：

       每个 Web 部件都有一个默认的标题栏及一个可以使该控件最小化、恢复和关闭的方框，稍后会介绍如何定制这些标题。

       目前，因为还没有配置任何验证方法，所以程序使用默认的 Windows 验证。因此，可以通过最小化或关闭某个 Web 部件来定制 Web 页面。这些设置默认保存在基于 SQL Server Express 版本的 aspnet.mdf 数据库里（如果你没有修改过任何配置的话，它位于 App_Data 目录下）。你还可以使用 aspnet_regsql.exe 在你选择的服务器上创建一个数据库来修改这一默认行为。注意，此工具只适用于 SQL Server。对于其他数据库，必须创建自己的提供程序。你可以像下面这样在 web.config 配置文件中配置这个数据提供程序：

<webParts>

  <personalization defaultProvider="MyProvider">

    <providers>

      <add name="MyProvider" 

           type="System.Web.UI.WebControls.WebParts.SqlPersonalizationProvider"

           connectionStringName="CustomSqlConnection"/>

    </providers>

  </personalization>

</webParts>

       你必须添加连接字符串（本例中的 CustomSqlConnection）到配置文件中的 <connectionStrings> 节，它将指向使用 aspnet_regsql.exe 创建的数据库。

 

定制页面

       目前，在本例中你可以最小化或关闭 Web 部件以调整页面的某些部分，但是向 Web 部件页面添加之前已经关闭的 Web 部件则不可以。因为放置 PageCatalogZone 的 CatalogZone 不会自动显示。此外，只是简单的从一个区域拖曳 Web 部件到另一个区域并不能改变 Web 部件的位置。

       其原因是，Web 部件页面支持多种显示模式，而你想要这么做必须处于正确的显示模式。通过 WebPartManager 的 DisplayMode 属性来配置这些显示模式。

Web 部件页面显示模式

BrowseDisplayMode	默认模式，显示一个 Web 部件页面的内容
DesignDisplayMode	用户可以通过拖曳改变 Web 部件的位置
CatalogDisplayMode	WebPartManager 显示目录 Web 部件，允许用户向页面添加 Web 部件
ConnectDisplayMode	用户可以配置可以连接的 Web 部件之间的连接
EditDisplayMode	允许用户编辑 Web 部件的属性，这个模式显示一个编辑器的 Web 部件。EditZone 是预置的允许显示 Web 部件编辑器控件的一个 Web 部件区域，而 Web 部件编辑器则允许用户修改 Web 部件的设置

       现在，添加一个 Menu 控件到布局表的第一行，如下所示：

<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">

            <asp:Menu ID="PartsMenu" runat="server" OnMenuItemClick="PartsMenu_MenuItemClick">

            </asp:Menu>

        </td>

 

       现在，可以通过代码来用 WebPartManager 的所有可用模式填充这个 Menu 控件，如下：

protected void Page_Load(object sender, EventArgs e)

{

    if (!this.IsPostBack)

    {

        MenuItem Root = new MenuItem("Select Mode");

        foreach (WebPartDisplayMode mode in MyPartManager.DisplayModes)

        {

            if (mode.IsEnabled(MyPartManager))

            {

                Root.ChildItems.Add(new MenuItem(mode.Name));

            }

        }

        PartsMenu.Items.Add(Root);

    }

}

       DisplayModes 属性是 WebPartDisplayMode 项的集合，而且可以验证该模式是否已被启用。这是必要的，因为仅当个性化被启用时特定的模式才可用。如果个性化被禁用了，而某个模式需要启用个性化，那么这个属性会返回 false 且你不能使用这个显示模式。

       此外，RequiresPersonalization 属性确定某个显示模式是否需要启用个性化。如果显示模式被启用了，就把它加到菜单里。

 

       当用户点击菜单项时，你必须切换到合适的 Web 部件页面显示模式，处理事件代码如下：

protected void PartsMenu_MenuItemClick(object sender, MenuEventArgs e)

{

    MyPartManager.DisplayMode = MyPartManager.DisplayModes[e.Item.Text];

}

       现在，允许程序选择不同的显示模式，可以看见各种效果了。

       通过拖曳方式来定制页面，使用了 IE 里的 DHTML 功能，因此只能在 IE 里正常工作。所有其他的功能如添加个性化、最小 / 最大化窗口、以及从目录里添加 Web 部件 到一个指定区域，则可以在你选择的其他浏览器里正常工作。

       你作出的所有个性化修改都会被保存在基于个性化提供程序的个性化存储里。以后的系列文章会介绍如何在页面级启用或禁用个性化功能。