ASP.NET 2.0 Web Part编程入门（实践篇）

一、简介

在许多Web应用程序中，能够更改内容的外观以及允许用户选择和排列要显示的内容是非常有用的。ASP.NET Web Part功能由一组用于创建网页的控件组成，这些控件能显示模块化内容并允许用户更改外观和内容。

在本示例中，我将创建一个使用Web Part控件集的页面，用于创建用户可以修改或进行个性化设置的网页。本示例具体实现如下任务：

◆向页添加Web Part控件。

◆创建一个自定义用户控件，并将其用作Web Part控件。

◆允许用户对页面上的Web Part控件的布局进行个性化设置。

◆允许用户编辑Web Part控件的外观。

◆允许用户从可用Web Part控件的目录中进行选择。

(一)先决条件

若要完成本示例，您需要：

◆可标识各个用户的站点。如果您有一个已配置了ASP.NET成员资格的站点，则可以使用该站点作为本示例的起点。

◆配置过的个性化设置提供程序和数据库。Web Part个性化设置默认情况下是启用的，它使用SQL个性化设置提供程序(SqlPersonalizationProvider)以及Microsoft SQL Server Exprss Edition（SSE）存储个性化设置数据。此示例使用SSE和默认的SQL提供程序。如果安装了SSE，则不需要进行任何配置。SSE在安装Microsoft Visual Studio 2005时作为可选部分免费提供，也可以从Microsoft.com免费下载。若要使用SQL Server的某个完整版本，必须安装和配置ASP.NET应用程序服务数据库，并配置SQL个性化设置提供程序以连接到该数据库。当然，你也可以创建和配置自定义提供程序，以便使用其他非SQL数据库或存储解决方案。

【注】本文程序调试环境为Windows XP Professional＋VS2005。

二、案例分析

现在，我们开始创建一个使用Web Part控件显示静态内容的页面。使用Web Part的第一步是创建具有两个必需的结构元素的页面。首先，Web Part页需要一个WebPartManager控件来跟踪和协调所有Web Part控件；其次，Web Part页需要一个或多个区域（区域即“Zone”，是包含WebPart或其他服务器控件并且占据页面上指定区域的复合控件）。

【注意】您无需执行任何操作即可启用Web Part个性化设置；Web Part控件集默认情况下即启用该设置。在站点上第一次运行Web Part页时，ASP.NET会设置默认的个性化设置提供程序来存储用户个性化设置。

(一)创建包含Web Part控件的页面

1.启动VS2005，创建一个ASP.NET网站WebPartsDemo，并将默认页面Default.aspx重命名为WebPartsDemo.aspx。

2.切换到“设计”视图。

3.确保在“视图”菜单中选中“非可视控件”和“详细信息”选项，以便查看不具有用户界面的布局标记和控件。

4.在设计图面上将插入点放在标记前，然后按Enter添加一个新行。将插入点放在新行字符前，单击菜单上的“块格式”下拉列表控件，再选择选项“标题1”。在该标题中添加文本“Web Part应用演示”。

5.从工具箱的“WebParts”选项卡中，将一个WebPartManager控件拖动到页上，并将它放置在新行字符之后，标记之前。

【注】WebPartManager控件不呈现任何输出，因此在设计器图面上显示为灰框。

6.将插入点放置在标记内。

7.在“布局”菜单中单击“插入表”，然后创建一个包含一行三列的表。单击“单元格属性”按钮，从“垂直对齐”下拉列表中选择“顶端对齐”，单击“确定”创建表格。

8.将一个WebPartZone控件拖动到该表左边的列中，并设置下面相应的属性：

◆ID—SidebarZone；

◆HeaderText—“侧栏”；

9.再次将一个WebPartZone控件拖动到该表中间的列中，并设置下面的属性：

◆ID—MainZone；

◆HeaderText—“主要”；

10.保存文件。

现在，页面中具有两个能够单独控制的不同区域。但是，这两个区域中都没有任何内容，因此下一步就是创建内容。此示例中使用的是仅显示静态内容的Web Part控件。

Web Part区域的布局由元素指定。在区域模板内可以添加任何ASP.NET控件，无论是自定义Web Part控件、用户控件还是现有服务器控件。注意，本例中使用的是Label控件，其中仅添加了静态内容。如果在WebPartZone区域中放置常规服务器控件，则在运行时，ASP.NET将该控件视为Web Part控件，并在控件上启用Web Part功能。

(二)为主要区域创建内容

1.从工具箱的“标准”选项卡中将一个Label控件拖动到ID属性设置为MainZone的区域的内容区域中。

2.切换到“源”视图。注意，系统自动添加了一个元素来包装MainZone中的Label控件。

3.为元素添加一个名为title的属性，并将属性值设置为“Content”，并从元素中移除Text="Label"属性。然后，在元素的开始标记和结束标记之间添加一些文本，例如在一对元素标记之间添加文本“欢迎访问本主页”。代码如下所示。

欢迎访问本主页

4.保存文件。

接下来，创建一个也可以作为Web Part控件添加到页面中的用户控件。
(三)创建用户控件

本例中，我将一个新的Web用户控件添加到站点中，充当搜索控件。将该控件放在WebPartsDemo.aspx页所在的目录中，并将其命名为SearchUserControl.ascx。

【注意】此示例的用户控件并不实现实际的搜索功能；它仅用于演示Web部件功能。

1.切换到“设计”视图。从工具箱的“标准”选项卡中，将TextBox控件拖动到页面上。

2.将插入点放在刚添加的文本框之后，再按Enter添加一个新行。

3.将Button控件拖动到页面上刚添加的文本框下面的新行上。

4.切换到“源”视图，并确保用户控件的源代码如下所示：

<%@ control language="C#" classname="SearchUserControl" %>

5.保存并关闭文件。

接下来，我们将向侧栏区域添加Web Part控件—将向侧栏区域添加两个控件：一个包含链接列表，另一个则是在前面创建的用户控件。链接是作为标准Label服务器控件添加的，添加方法类似于为主要区域创建静态文本。虽然用户控件中包含的各个服务器控件都可直接包含在该区域中（类似标签控件），但在本示例中不是这样。相反，它们是在前面的过程中创建的用户控件的一部分。这演示了将所需控件和其他功能打包到用户控件中，然后在某个区域中将该控件作为Web Part控件引用的常用方式。

运行时，Web Part控件集将这两个控件都包装在GenericWebPart控件中。当GenericWebPart控件包装Web服务器控件时，GenericWebPart为父控件，您可以通过该父控件的ChildControl属性访问服务器控件。

【注意】GenericWebPart控件能够使标准Web服务器控件具有与从WebPart类派生的Web Part控件相同的基本行为和属性。

(四)向侧栏区域添加Web Part控件

1.打开WebPartsDemo.aspx页。

2.切换到“设计”视图。

3.将已创建的用户控件页SearchUserControl.ascx从“解决方案资源管理器”拖放到ID属性设置为SidebarZone的区域中。

4.保存WebPartsDemo.aspx页面。

5.切换到“源”视图。

6.在SidebarZone的元素内，对用户控件的引用之上，添加一个包含了链接的元素；另外，将Title属性添加到用户控件标记，属性值为“搜索”，如下所示：

headertext="侧栏">





ASP.NET'>http://www.asp.net">ASP.NET网站 




GotDotNethttp://www.gotdotnet.com">GotDotNet> 




Contoso.comhttp://www.contoso.com">Contoso.com> 







title="搜索" />

7.保存并关闭文件。

(五)测试页面

在浏览器中加载WebPartsDemo.aspx页面，结果应该如下图1所示。

图1.具有两个区域的Web Part演示页

该图中，每个控件的标题栏中都有一个向下的箭头，用于提供对控件上可执行操作的动作菜单的访问。单击其中一个控件的动作菜单，然后单击“最小化”，会发现该控件被最小化。在动作菜单上单击“还原”，控件还原为正常大小。

六)支持用户更改布局和编辑页面

Web Part为用户提供了通过将Web Part控件从一个区域拖动到另一个区域来更改其布局的功能。除了允许用户将WebPart控件从一个区域移动到另一个区域外，还允许用户编辑控件的各种特征—包括外观、布局和行为。Web Part控件集为WebPart控件提供了基本的编辑功能。

【注】本示例中，我们仅实现了基本的编辑功能，但您可以创建自定义编译控件来允许用户编辑WebPart控件的功能。和更改WebPart控件的位置一样，编辑控件属性时需要由ASP.NET个性化设置来保存用户所做的更改。

下面，我们将为用户添加相应的功能，使之能编辑页面上所有WebPart控件的基本特性。若要启用这些功能，应向页面中添加其它自定义控件以及一个元素和两个编辑控件。

1．创建支持对页面布局进行更改的用户控件

(1)在Visual Studio中，选择“文件→新建”菜单，然后单击“文件”选项。

(2)在“添加新项”对话框中，选择“Web用户控件”。将新文件命名为DisplayModeMenu.ascx，并取消选项“将源代码放在单独的文件中”。

(3)单击“添加”新建控件。

(4)切换到“源”视图。

(5)按如下内容修改源码（此用户控件允许用户更改其视图和显示模式的Web Part控件集功能，并允许您在某种显示模式下更改页面的物理外观和布局）：

 

<%@ control language="C#" classname="DisplayModeMenuCS"%>




<%@ control language="C#" classname="DisplayModeMenuCS"%>






Borderwidth="1" 

Width="230" 

BackColor="lightgray"

Font-Names="Verdana, Arial, Sans Serif" >


Text=" 显示方式" 

Font-Bold="true"

Font-Size="8"

Width="120" />


AutoPostBack="true" 

Width="120"

OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />


Text="复位用户状态" 

ToolTip="复位页面中当前用户的个性化数据。"

Font-Size="8" 

OnClick="LinkButton1_Click" />


GroupingText="个性化范围"

Font-Bold="true"

Font-Size="8" 

Visible="true" >


Text="用户" 

AutoPostBack="true"

GroupName="Scope" 

OnCheckedChanged="RadioButton1_CheckedChanged" />


Text="共享" 

AutoPostBack="true"

GroupName="Scope" 

OnCheckedChanged="RadioButton2_CheckedChanged" />

(6)保存文件。

2.允许用户更改布局
(1)打开WebPartsDemo.aspx页，并切换到“设计”视图。

(2)在“设计”视图中将插入点放在以前添加的WebPartManager控件之后。在文本后添加一个硬回车，这样会在WebPartManager控件之后生成一个空行。将插入点放置在空行上。

(3)将刚创建的用户控件（文件名为DisplayModeMenu.ascx）拖动到WebPartsDemo.aspx页上，并放置在空行上。

(4)将一个EditorZone控件从工具箱的“WebParts”部分拖动到WebPartsDemo.aspx页面上表格最右边的一个单元格中。

(5)从工具箱的“WebParts”部分将一个AppearanceEditorPart控件和一个LayoutEditorPart控件拖动到EditorZone控件上。

(6)切换到“源”视图。于是，上面单元格中相应的代码类似如下。

runat="server" />

【注意】本示例中仅使用了AppearanceEditorPart和LayoutEditorPart控件，而没有使用BehaviorEditorPart和PropertyGridEditorPart控件。
(7)保存WebPartsDemo.aspx文件。至此，我们已经创建了允许更改显示模式和更改页面布局的用户控件，并且在主页面上引用了该控件。
下面，我们开始测试编辑页面和更改布局的功能。
3.测试布局更改
(1)在浏览器中加载页面。

(2)单击“显示模式”下拉菜单，再选择“Edit”；随即显示区域标题。

(3)通过“链接”控件的标题栏将该控件从侧栏区域拖动到主要区域的底部。最终，页面的外观应类似下面的图2所示。

图2.包含“链接”控件的Web Part演示页
(4)单击“显示模式”下拉菜单，再选择“Browse”。页面被刷新，区域的名称消失，“链接”控件的位置保持不变。

(5)若要演示个性化设置的运行情况，请关闭浏览器，然后重新加载该页面。会保存所做的更改，以备以后的浏览器会话使用。

(6)从“显示模式”菜单中选择“Edit”。

(7)页面上的每个控件的标题栏中现在均显示有一个向下的箭头，其中包含一个谓词下拉菜单。

(8)单击箭头显示“链接”控件上的谓词菜单。单击“Edit”谓词。

(9)随即出现EditorZone控件，并显示添加的EditorPart控件。

(10)在编辑控件的“外观”部分，将标题更改为“我的收藏夹”，使用“镶边类型”下拉列表来选择“只有标题”，然后单击“应用”。下面的图3显示了该页面处于编辑模式时的情形。

图3.编辑模式下的Web Part演示页

(11)单击“显示模式”菜单，再选择“Browse”以返回到浏览模式。

(12)现在，该控件具有更新了的标题但没有边框，如下面的图4所示。

图4.编辑过的Web Part演示页

七)在运行时添加Web Part

还可以允许用户在运行时向页面中添加Web Part控件。为此，应为WebPartsDemo.aspx页面配置Web Part目录—由它给用户提供可添加的Web Part控件列表。
【注意】在本示例中，我们创建一个包含FileUpload和Calendar控件的模板。在此，我们仅为了测试该目录的基本功能，但得到的Web Part控件不会具有任何实际的功能。

1.允许用户在运行时添加Web Part

(1)打开WebPartsDemo.aspx页面，并切换到“设计”视图。

(2)从工具箱的“WebParts”选项卡中将一个CatalogZone控件拖动到表格最右边的列中，并放在EditorZone控件的下方。

【注意】这两个控件可放在同一个表格单元格中，因为它们不会同时显示。

(3)在“属性”窗格中，设置CatalogZone控件的HeaderText属性为“添加Web Parts”。

(4)从工具箱的“WebParts”部分将一个DeclarativeCatalogPart控件拖动到CatalogZone控件的内容区域。

(5)单击DeclarativeCatalogPart控件右上角中的箭头，显示其“任务”菜单，然后选择“编辑模板”。

(6)从工具箱的“标准”部分将一个FileUpload控件和一个Calendar控件拖动到DeclarativeCatalogPart控件的“WebPartsTemplate”部分。

(7)切换到“源”视图。观察元素的源代码。注意，DeclarativeCatalogPart控件中包含了一个元素以及两个可从目录添加到页面中的服务器控件。

【提示】显然，在DeclarativeCatalogPart控件的“WebPartsTemplate”部分中也可以加入你的自定义Web控件或用户控件—如果你愿意的话。

(8)为添加到目录中的每个控件添加Title属性。
【问题】这是否又是微软的一个小纰漏？开始加入控件时，只显示Caption属性，但是在目录区域中显示单选框时，则只能使用Title属性，因此这里只得手工添加，而且可以去掉原有的Caption属性，见下面的代码。另外，虽然Title并非在设计时通常可在这两个服务器控件上设置的属性，但当用户在运行时刻将这些控件从目录添加到WebPartZone区域时，这些控件均包装在GenericWebPart控件中。这使它们可以“充当”Web Part控件，而且它们可以显示此标题。

runat="server">




runat="server" 

title="我的日历" />


runat="server" 

title="上传文件" />

(9)保存页面。
下面，我们可以测试此目录功能了。

2.测试Web Part目录

(1)在浏览器中加载页面。

(2)单击“显示模式”下拉菜单并选择“Catalog”，则会显示位于表格最右边的标题为“添加Web Part”的目录区。

(3)将“我的收藏夹”控件从主要区域拖回侧栏区域顶部。

(4)在“添加Web Part”目录中，选择两个复选框，再从包含可用区域的下拉列表中选择“主要”。

(5)单击目录区域的“添加”；此时，相应的被添加到主要区域中。如果愿意，可将控件的多个实例从目录添加到页面中。

下图5是加入上面两个控件后的结果页面，其中包括文件上载控件和主要区域中的日历控件。

图5.从目录区域添加到主要区域的控件（充当Web Part）

(6)单击“显示模式”下拉菜单，再选择“Browse”，则目录消失，页面随即被刷新。

(7)关闭浏览器，再次加载该页面，上次所做的更改会被保存下来。

三、小结
本文仅提供了在ASP.NET网页上使用Web Part控件的基本示例。正如在前面的【理论篇】中所述，Web Part控件的应用包括三大方面；其中，基于Web Part控件的Web控件开发与创建基于Web Part的完整的、可个性化设置的Web应用程序是较复杂的应用。以后的文章中，我们还会深入探讨Web Part控件在用户控件或自定义控件开发中的应用。