本演练中的演示让您亲身体验用于创建使用 Web 部件控件的网页的基本组件和任务。
在许多 Web 应用程序中，可以更改内容的外观并允许用户选择和排列他们想要看到的内容，这一点十分有用。ASP.NET Web 部件功能由一组用于创建网页的控件构成，这些控件将显示模块化内容并使用户能够根据喜好更改外观和内容。有关 Web 部件的一般介绍，请参见 ASP.NET Web 部件概述。有关 Web 部件控件集内主要组件（本演练中使用了其中几个组件）的说明，请参见 Web 部件控件集概述。
在本演练中，您将创建一个页面，该页面使用 Web 部件控件集创建用户可以修改或个性化设置的网页。本演练中阐释的任务包括：
-
将 Web 部件控件添加到页面。
-
创建自定义用户控件并将其用作 Web 部件控件。
-
允许用户个性化设置页面上 Web 部件控件的布局。
-
允许用户编辑 Web 部件控件的外观。
-
允许用户从可用 Web 部件控件的目录中进行选择。
先决条件
若要完成本演练，您需要：
-
已在将承载该站点的计算机上安装和配置的 Internet 信息服务 (IIS)。有关安装和配置 IIS 的详细信息，请参见安装中包含的 IIS 帮助文档，或者参见 Microsoft TechNet 站点（ Internet 信息服务 6.0 技术资源 ）上的联机 IIS 文档。
-
可识别个别用户的 ASP.NET 网站。如果已经配置了这样的站点，则可以将该站点用作本演练的起始点。否则，若要查看有关创建虚拟目录或站点的详细信息，请参见如何：在 IIS 中创建和配置虚拟目录或如何：在 IIS 中创建并配置本地 ASP.NET 网站。
-
已配置的个性化设置提供程序和数据库。默认情况下启用 Web 部件个性化设置，而且它使用 SQL 个性化设置提供程序 (SqlPersonalizationProvider) 和 Microsoft SQL Server Standard Edition 来存储个性化设置数据。本演练使用 SSE 和默认的 SQL 提供程序。如果安装了 SSE，则不需要进行任何配置。SSE 是作为 Microsoft Visual Studio 2005 安装的可选部分提供的，也可以从 Microsoft.com 免费下载。若要使用 SQL Server 的一个完整版本，必须安装和配置一个 ASP.NET 应用程序服务数据库，并将 SQL 个性化设置提供程序配置为连接到该数据库。有关详细信息，请参见为 SQL Server 创建和配置应用程序服务数据库。还可以创建和配置自定义提供程序来使用其他非 SQL 数据库或存储解决方案。有关详细信息和代码示例，请参见实现成员资格提供程序。
创建使用 Web 部件的简单页面
在演练的本部分中，将创建使用 Web 部件显示静态内容的页面。使用 Web 部件的第一步是创建一个页面结构，以包含 Web 部件控件。
| 注意 |
|---|
| 不需要执行任何操作即可启用 Web 部件个性化设置；默认情况下为 Web 部件控件集启用该功能。当第一次在某个站点上运行 Web 部件页时，ASP.NET 将设置一个默认的个性化设置提供程序来存储用户个性化设置。默认提供程序使用在站点目录的子目录中创建的数据库。有关个性化设置的更多信息，请参见 Web 部件个性化概述。 |
创建网页
-
在文本编辑器中，创建新的文件并将下面的页声明添加到该文件的开头。
Visual Basic <%@ page language="VB" %>
C# <%@ page language="C#" %>
-
在页声明的下方输入标记以创建一个完整的页结构，如下面的代码示例所示。请注意，该页包含一个空表，其中有一行、三列。该表将包含稍后添加的 Web 部件控件。
<html> <head runat="server"> <title>Web Parts Page</title> </head> <body> <h1>Web Parts Demonstration Page</h1> <form runat="server" id="form1"> <br /> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td valign="top"> </td> <td valign="top"> </td> <td valign="top"> </td> </tr> </table> </form> </body> </html> -
将该文件命名为 WebPartsDemo.aspx，并保存在您的网站的目录中。
下一步是设置区域。区域是复合控件，它们占用页面的指定区域并包含 Web 部件控件。
将区域添加到页面
-
在页面中 <form> 元素的紧下面，添加一个 <asp:webpartmanager> 元素，如下例所示。
<asp:webpartmanager id="WebPartManager1" runat="server" />
在使用 Web 部件控件的每个页面中都必须使用 WebPartManager 控件。
-
在表中第一个 <td> 元素的内部添加一个 <asp:webpartzone> 元素，并如下面的代码示例所示指定其属性值。请注意，<asp:webpartzone> 元素还包含一个 <zonetemplate> 元素；Web 部件控件放置在 <zonetemplate> 中。
<table cellspacing="0" cellpadding="0" border="0"> <tr> <td valign="top"> <asp:webpartzone id="SideBarZone" runat="server" headertext="Sidebar"> <zonetemplate> </zonetemplate> </asp:webpartzone> </td> -
在表中第二个 <td> 元素的内部添加一个 <asp:webpartzone> 元素，并如下面的代码示例所示指定其属性值。
<td valign="top"> <asp:webpartzone id="MainZone" runat="server" headertext="Main"> <zonetemplate> </zonetemplate> </asp:webpartzone> </td> -
保存 WebPartsDemo.aspx 文件。
此时，页面包含两个不同的区域，您可以分别控制这两个区域。但是，两个区域中都没有包含任何内容，因此下一步是创建内容。对于本演练，将使用只显示静态内容的 Web 部件控件。
Web 部件区域的布局将由 <zonetemplate> 元素指定。在区域模板中，您可以添加任何 Web 服务器控件，无论它是自定义 Web 部件控件、用户控件还是现有的服务器控件。请注意，在本演练中，您将使用 Label 服务器控件，并且只将静态文本添加到该控件中。当您将常规 ASP.NET 服务器控件放入 WebPartZone 区域时，ASP.NET 会在运行时将其视为 Web 部件控件，这样您便可以使用标准服务器控件上的大部分 Web 部件功能。
为区域创建内容
-
在 Main 区域的 <zonetemplate> 元素内，添加一个具有某些内容的 <asp:label> 元素，如下面的代码示例所示。
<asp:webpartzone id="MainZone" runat="server" headertext="Main"> <zonetemplate> <asp:label id="contentPart" runat="server" title="Content"> <h2>Welcome to My Home Page</h2> <p>Use links to visit my favorite sites!</p> </asp:label> </zonetemplate> </asp:webpartzone> -
保存 WebPartsDemo.aspx 文件。
-
在文本编辑器中创建一个新文件。此文件将包含也可以作为 Web 部件控件添加到页面的用户控件。
注意 本演练的搜索控件并不实现实际的搜索功能；它只用于演示 Web 部件功能。
-
在新文件的顶部，如下例中所示添加控件声明。
Visual Basic <%@ control language="VB" classname="SearchUserControl" %>
C# <%@ control language="C#" classname="SearchUserControl" %>
-
在控件声明的下面，添加一对 <script> 标记，并在这对标记之间添加用于创建可个性化设置的属性的代码。请注意，ResultsPerPage 属性 (Property) 包含一个 Personalizable 属性 (Attribute)。如果提供了具有用户界面 (UI) 的编辑控件在“设计”视图中更改设置，则此属性将使控件的用户能够个性化设置每一页要返回的搜索结果数量。控件的代码应当类似于下面的代码示例。
Visual Basic <%@ control language="VB" classname="SearchUserControl" %> <script runat="server"> Private results As Integer <Personalizable()> _ Property ResultsPerPage() As Integer Get Return results End Get Set(ByVal value As Integer) results = value End Set End Property </script>C# <%@ control language="C#" classname="SearchUserControl" %> <script runat="server"> private int results; [Personalizable] public int ResultsPerPage { get {return results;} set {results = value;} } </script> -
在 <script> 元素的下面添加一个文本框和一个按钮，以便为搜索控件提供基本的用户界面，如下面的代码示例所示。
<asp:textbox runat="server" id="inputBox"></asp:textbox> <br /> <asp:button runat="server" id="searchButton" text="Search" /> -
将文件命名为 SearchUserControlVB.ascx 或 SearchUserControlCS.ascx（具体取决于您使用的语言），并将其保存到 WebPartsDemo.aspx 页所在的同一目录中。
安全注意 该控件具有一个文本框，用于接受用户输入，这是一个潜在的安全威胁。网页中的用户输入可能会包含具有恶意的客户端脚本。默认情况下，ASP.NET 网页验证用户输入，以确保输入中不包含 HTML 元素或脚本。只要启用了此验证，就不需要显式检查用户输入中的脚本或 HTML 元素。有关更多信息，请参见脚本侵入概述。
现在，您就可以将 Web 部件控件添加到 Sidebar 区域。您将添加两个控件到 Sidebar 区域，其中一个包含链接列表，而另一个则是在前面的过程中创建的用户控件。这些链接将作为单个标准的 Label 服务器控件进行添加，其方式类似于为 Main 区域创建静态文本。不过，虽然用户控件中包含的单个服务器控件可以直接包含在区域中，但在这种情况下却不能包含在区域中。相反，它们是在前面的过程中创建的用户控件的一部分。这阐释了一种常见方法，使用这种方法可以将需要的任何控件和额外功能打包在用户控件中，然后在区域中将该用户控件作为 Web 部件控件引用。
在运行时，Web 部件控件集将使用 GenericWebPart 控件同时包装这两个控件。当 GenericWebPart 控件包装 Web 服务器控件时，泛型部件控件为父控件，而且您可以通过父控件的 ChildControl 属性访问服务器控件。泛型部件控件的这种用途使得标准 Web 服务器控件可以与从 WebPart 类派生的 Web 部件控件拥有相同的基本行为和属性。
为侧栏区域创建内容
-
在文本编辑器中打开 WebPartsDemo.aspx 页。
-
在页面的顶部，将下面的声明添加到页声明的紧后面，以引用刚刚创建的用户控件。
Visual Basic <%@ register tagprefix="uc1" tagname="SearchUserControl" src="searchusercontrolvb.ascx" %>C# <%@ register tagprefix="uc1" tagname="SearchUserControl" src="searchusercontrolcs.ascx" %> -
在 Sidebar 区域的 <zonetemplate> 元素中，添加包含若干链接的 Label 控件。在该控件的下面，引用之前创建的用户控件，如下面的代码示例所示。
<asp:webPartZone id="SidebarZone" runat="server" headertext="Sidebar"> <zonetemplate> <asp:label runat="server" id="linksPart" title="Links"> <a href="www.asp.net">ASP.NET site</a> <br /> <a href="www.gotdotnet.com">GotDotNet</a> <br /> <a href="www.contoso.com">Contoso.com</a> <br /> </asp:label> <uc1:SearchUserControl id="searchPart" runat="server" title="Search" /> </zonetemplate> </asp:WebPartZone> -
保存 WebPartsDemo.aspx 文件。
现在可以对页进行测试。
对页进行测试
-
在浏览器中加载页。
该页显示两个区域。此时，在页上每个控件的标题栏中都将显示一个向下箭头，其中包含一个称为谓词菜单的下拉菜单。谓词是用户可以对服务器控件执行的操作，如关闭、最小化或编辑控件。谓词菜单中的每个菜单项都是一个谓词。下面的屏幕快照显示的是此页。
WebPartsDemo 页
-
单击控件标题栏中的向下箭头以显示其谓词菜单，再单击“最小化”链接，请注意控件已最小化。然后返回到谓词菜单，并单击“还原”。这阐释了 Web 部件控件的不同视觉显示状态。
使用户能够编辑页和更改布局
Web 部件为用户提供了更改 Web 部件控件布局的能力，方法是将控件从一个区域拖动到另一个区域。除允许用户将 WebPart 控件从一个区域移到另一区域外，您还可以允许用户编辑控件的不同特性，包括控件的外观、布局和行为。Web 部件控件集为 WebPart 控件提供了基本的编辑功能。虽然在本演练中并不这样做，但您也可以创建自定义编辑器控件，用户可以使用这些控件编辑 WebPart 控件的特性。当 WebPart 控件的位置发生更改时，对其属性的编辑将依赖于 ASP.NET 个性化设置来保存用户所做的更改。
在演练的此部分，将为用户增加能力来编辑页上任何 WebPart 控件的基本特性。若要启用这些特性，请将另一个自定义用户控件与一个 <asp:editorzone> 元素和两个编辑控件一同添加到该页。
创建启用页布局更改功能的用户控件
-
在文本编辑器中的新文件内，粘贴下面的代码。这段代码将使用 Web 部件控件集的功能，这些功能使页面能够更改其视图或显示模式，而且还使您能够在某些显示模式下更改页面的物理外观和布局。
Visual Basic <%@ control language="vb" classname="DisplayModeMenuVB"%> <script runat="server"> ' Use a field to reference the current WebPartManager control. Dim _manager As WebPartManager Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) AddHandler Page.InitComplete, AddressOf InitComplete End Sub Sub InitComplete(ByVal sender As Object, ByVal e As System.EventArgs) _manager = WebPartManager.GetCurrentWebPartManager(Page) Dim browseModeName As String = _ WebPartManager.BrowseDisplayMode.Name ' Fill the drop-down list with the names of supported display modes. Dim mode As WebPartDisplayMode For Each mode In _manager.SupportedDisplayModes Dim modeName As String = mode.Name ' Make sure a mode is enabled before adding it. If mode.IsEnabled(_manager) Then Dim item As New ListItem(modeName, modeName) DisplayModeDropdown.Items.Add(item) End If Next mode ' If Shared scope is allowed for this user, display the ' scope-switching UI and select the appropriate radio button ' for the current user scope. If _manager.Personalization.CanEnterSharedScope Then Panel2.Visible = True If _manager.Personalization.Scope = _ PersonalizationScope.User Then RadioButton1.Checked = True Else RadioButton2.Checked = True End If End If End Sub ' Change the page to the selected display mode. Sub DisplayModeDropdown_SelectedIndexChanged(ByVal sender As Object, _ ByVal e As EventArgs) Dim selectedMode As String = DisplayModeDropdown.SelectedValue Dim mode As WebPartDisplayMode = _ _manager.SupportedDisplayModes(selectedMode) If Not (mode Is Nothing) Then _manager.DisplayMode = mode End If End Sub ' Set the selected item equal to the current display mode. Sub Page_PreRender(ByVal sender As Object, ByVal e As EventArgs) Dim items As ListItemCollection = DisplayModeDropdown.Items Dim selectedIndex As Integer = _ items.IndexOf(items.FindByText(_manager.DisplayMode.Name)) DisplayModeDropdown.SelectedIndex = selectedIndex End Sub ' Reset all of a user's personalization data for the page. Protected Sub LinkButton1_Click(ByVal sender As Object, _ ByVal e As EventArgs) _manager.Personalization.ResetPersonalizationState() End Sub ' If not in User personalization scope, toggle into it. Protected Sub RadioButton1_CheckedChanged(ByVal sender As _ Object, ByVal e As EventArgs) If _manager.Personalization.Scope = _ PersonalizationScope.Shared Then _manager.Personalization.ToggleScope() End If End Sub ' If not in Shared scope, and if user has permission, toggle the ' scope. Protected Sub RadioButton2_CheckedChanged(ByVal sender As _ Object, ByVal e As EventArgs) If _manager.Personalization.CanEnterSharedScope AndAlso _ _manager.Personalization.Scope = _ PersonalizationScope.User Then _manager.Personalization.ToggleScope() End If End Sub </script> <div> <asp:Panel ID="Panel1" runat="server" Borderwidth="1" Width="230" BackColor="lightgray" Font-Names="Verdana, Arial, Sans Serif" > <asp:Label ID="Label1" runat="server" Text=" Display Mode" Font-Bold="true" Font-Size="8" Width="120" /> <div> <asp:DropDownList ID="DisplayModeDropdown" runat="server" AutoPostBack="true" Width="120" OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" /> <asp:LinkButton ID="LinkButton1" runat="server" Text="Reset User State" ToolTip="Reset the current user's personalization data for the page." Font-Size="8" OnClick="LinkButton1_Click" /> </div> <asp:Panel ID="Panel2" runat="server" GroupingText="Personalization Scope" Font-Bold="true" Font-Size="8" Visible="false" > <asp:RadioButton ID="RadioButton1" runat="server" Text="User" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton1_CheckedChanged" /> <asp:RadioButton ID="RadioButton2" runat="server" Text="Shared" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton2_CheckedChanged" /> </asp:Panel> </asp:Panel> </div>C# <%@ control language="C#" classname="DisplayModeMenuCS"%> <script runat="server"> // Use a field to reference the current WebPartManager control. WebPartManager _manager; void Page_Init(object sender, EventArgs e) { Page.InitComplete += new EventHandler(InitComplete); } void InitComplete(object sender, System.EventArgs e) { _manager = WebPartManager.GetCurrentWebPartManager(Page); String browseModeName = WebPartManager.BrowseDisplayMode.Name; // Fill the drop-down list with the names of supported display modes. foreach (WebPartDisplayMode mode in _manager.SupportedDisplayModes) { String modeName = mode.Name; // Make sure a mode is enabled before adding it. if (mode.IsEnabled(_manager)) { ListItem item = new ListItem(modeName, modeName); DisplayModeDropdown.Items.Add(item); } } // If Shared scope is allowed for this user, display the // scope-switching UI and select the appropriate radio // button for the current user scope. if (_manager.Personalization.CanEnterSharedScope) { Panel2.Visible = true; if (_manager.Personalization.Scope == PersonalizationScope.User) RadioButton1.Checked = true; else RadioButton2.Checked = true; } } // Change the page to the selected display mode. void DisplayModeDropdown_SelectedIndexChanged(object sender, EventArgs e) { String selectedMode = DisplayModeDropdown.SelectedValue; WebPartDisplayMode mode = _manager.SupportedDisplayModes[selectedMode]; if (mode != null) _manager.DisplayMode = mode; } // Set the selected item equal to the current display mode. void Page_PreRender(object sender, EventArgs e) { ListItemCollection items = DisplayModeDropdown.Items; int selectedIndex = items.IndexOf(items.FindByText(_manager.DisplayMode.Name)); DisplayModeDropdown.SelectedIndex = selectedIndex; } // Reset all of a user's personalization data for the page. protected void LinkButton1_Click(object sender, EventArgs e) { _manager.Personalization.ResetPersonalizationState(); } // If not in User personalization scope, toggle into it. protected void RadioButton1_CheckedChanged(object sender, EventArgs e) { if (_manager.Personalization.Scope == PersonalizationScope.Shared) _manager.Personalization.ToggleScope(); } // If not in Shared scope, and if user has permission, toggle // the scope. protected void RadioButton2_CheckedChanged(object sender, EventArgs e) { if (_manager.Personalization.CanEnterSharedScope && _manager.Personalization.Scope == PersonalizationScope.User) _manager.Personalization.ToggleScope(); } </script> <div> <asp:Panel ID="Panel1" runat="server" Borderwidth="1" Width="230" BackColor="lightgray" Font-Names="Verdana, Arial, Sans Serif" > <asp:Label ID="Label1" runat="server" Text=" Display Mode" Font-Bold="true" Font-Size="8" Width="120" /> <div> <asp:DropDownList ID="DisplayModeDropdown" runat="server" AutoPostBack="true" Width="120" OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" /> <asp:LinkButton ID="LinkButton1" runat="server" Text="Reset User State" ToolTip="Reset the current user's personalization data for the page." Font-Size="8" OnClick="LinkButton1_Click" /> </div> <asp:Panel ID="Panel2" runat="server" GroupingText="Personalization Scope" Font-Bold="true" Font-Size="8" Visible="false" > <asp:RadioButton ID="RadioButton1" runat="server" Text="User" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton1_CheckedChanged" /> <asp:RadioButton ID="RadioButton2" runat="server" Text="Shared" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton2_CheckedChanged" /> </asp:Panel> </asp:Panel> </div> -
将文件命名为 Displaymodemenu.ascx，并将其保存到之前保存的页面所在的同一目录中。
使用户能够更改布局
-
在 WebPartsDemo.aspx 页中，添加一条 <register> 指令，以便将新的用户控件注册到页面上。
Visual Basic <%@ register TagPrefix="uc2" TagName="DisplayModeMenuVB" Src="DisplayModeMenu.ascx" %>C# <%@ register TagPrefix="uc2" TagName="DisplayModeMenuCS" Src="DisplayModeMenu.ascx" %> -
在 WebPartsDemo.aspx 页中，在 <asp:webpartmanager> 元素的紧下面添加对用户控件的声明性引用。
Visual Basic <uc2:DisplayModeMenuVB ID="DisplayModeMenu1" runat="server" />
C# <uc2:DisplayModeMenuCS ID="DisplayModeMenu1" runat="server" />
-
在表中的第三个 <td> 元素内添加一个 <asp:editorzone> 元素。添加一个 <zonetemplate> 元素、一个 <asp:appearanceeditorpart> 元素和一个 <asp:layouteditorpart> 元素。这些代码看起来应当类似于下面的示例。
<td valign="top"> <asp:editorzone id="EditorZone1" runat="server"> <zonetemplate> <asp:appearanceeditorpart runat="server" id="AppearanceEditorPart1" /> <asp:layouteditorpart runat="server" id="LayoutEditorPart1" /> </zonetemplate> </asp:editorzone> </td>注意 虽然在本演练中使用了 AppearanceEditorPart 和 LayoutEditorPart 控件，但是没有使用 BehaviorEditorPart 和 PropertyGridEditorPart 控件，因为它们需要在本演练的范围之外设置。
-
保存 WebPartsDemo.aspx 文件。您已创建一个允许您更改显示模式和页面布局的用户控件，并且已在主网页上引用该控件。
现在可以测试编辑页面和更改布局的功能。
测试布局更改
-
在浏览器中加载页。
-
单击“显示模式”下拉菜单，然后选择“编辑”。将显示区域标题。
-
拖动“链接”控件的标题栏将该控件从 Sidebar 区域拖动到 Main 区域的底部。您的页面看起来应当类似于下面的屏幕快照。
编辑后的 Web 部件页面
-
单击“显示模式”下拉菜单，然后选择“浏览”。此页被刷新，区域名称消失，而且“链接”控件保持在您将其定位到的位置。
-
若要证实个性化设置已生效，可关闭浏览器，然后重新加载页面。您所做的更改将被保存用于将来的浏览器会话。
-
从“显示模式”菜单中选择“编辑”。
-
单击箭头以显示“链接”控件上的谓词菜单。单击“编辑”谓词。
将显示 EditorZone 控件，同时显示您添加的 EditorPart 控件。
-
在编辑控件的“外观”部分中，将“标题”更改为“收藏夹”，使用“镶边类型”下拉列表选择“只有标题”，然后单击“应用”。下面的屏幕快照显示仍然处于编辑模式的修订页面。
显示有 EditorZone 控件的修订页面
-
单击“显示模式”菜单，然后选择“浏览”返回到浏览模式。
此时，控件包含更新后的标题，并且没有边框，如下面的屏幕快照所示。
包含更新后的“链接”控件的修订页面
在运行时添加 Web 部件
还可以允许用户在运行时向他们的页面添加 Web 部件控件。为此，请使用 Web 部件目录配置页面，该目录包含您希望用户可以使用的 Web 部件控件的列表。
| 注意 |
|---|
| 在本演练中，您将创建一个包含 FileUpload 和 Calendar 控件的模板。这将允许您测试目录的基本功能，但是得到的 Web 部件控件不包含任何实际的功能。如果您有自定义 Web 控件或用户控件，则可以使用该控件替代静态内容。 |
允许用户在运行时添加 Web 部件
-
在 WebPartsDemo.aspx 文件中，将 <asp:catalogzone> 元素添加到表的第三列中，并正好位于 <asp:editorzone> 元素的下面。添加一个 <zonetemplate> 元素，并在该元素中添加一个 <asp:declarativecatalogpart> 元素和一个 <webpartstemplate> 元素。最后，添加 <asp:fileupload> 和 <asp:calendar> 元素。您的代码看起来应当类似于下面的代码示例。
<asp:catalogzone id="CatalogZone1" runat="server" headertext="Add Web Parts"> <zonetemplate> <asp:declarativecatalogpart id="catalogpart1" runat="server" Title="My Catalog"> <webPartsTemplate> <asp:fileupload runat="server" id="upload1" title="Upload Files" /> <asp:calendar runat="server" id="cal1" Title="Team Calendar" /> </webPartsTemplate> </asp:declarativecatalogpart> </zonetemplate> </asp:catalogzone>注意 EditorZone 和 CatalogZone 控件可以同时位于同一个表单元格中，因为它们并不同时显示。
-
保存 WebPartsDemo.aspx 文件。
现在可以测试目录。
测试 Web 部件目录
-
在浏览器中加载页。
-
单击“显示模式”下拉菜单，然后选择“目录”。
将显示名为“添加 Web 部件”的目录。
-
将“收藏夹”控件从 Main 区域拖回 Sidebar 区域的顶部。
-
在“添加 Web 部件”目录中，全部选中两个复选框，然后从“添加到”下拉列表中选择“主”。
-
在目录中单击“添加”。控件将被添加到 Main 区域。如果您愿意，可以将控件的多个实例从目录添加到页面。
下面的屏幕快照显示了在 Main 区域中包含文件上载控件和日历的页面。
控件已添加到主区域
-
单击“显示模式”下拉菜单，然后选择“浏览”。目录消失，并且页面被刷新。
-
关闭浏览器。重新加载页面。您所做的更改将保持不变。
后续步骤
本演练已阐释在 ASP.NET 网页上使用非常简单的 Web 部件控件的基本原理。您可能希望试用其他更为复杂的 Web 部件功能。对进一步研究的建议包括：
-
创建比本演练中的静态 Web 部件控件提供更复杂功能的 Web 部件控件。您可以创建 Web 部件控件作为用户控件或自定义控件。有关详细信息，请参见 WebPart 类的文档。
