演练：创建 Web 部件页

项目
10/22/2014

更新：2007 年 11 月

本演练中的演示让您亲身体验用于创建使用 Web 部件控件的网页的基本组件和任务。

在很多 Web 应用程序中，允许用户选择并排列他们希望查看的内容是很有用的。ASP.NET Web 部件功能由一组用于创建网页的控件构成，这些控件将显示模块化内容并使用户能够根据喜好更改外观和内容。有关 Web 部件的一般介绍，请参见 ASP.NET Web 部件概述。有关 Web 部件控件集内主要组件（本演练中使用了其中几个组件）的说明，请参见 Web 部件控件集概述。

在本演练中，将使用 Web 部件控件来创建一个用户可以修改或进行个性化设置的网页。本演练演示如下任务：

将 Web 部件控件添加到页面。
创建自定义用户控件并将其用作 Web 部件控件。
使用户能够对页面上的 Web 部件控件的布局进行个性化设置。
使用户能够编辑 Web 部件控件的外观。
使用户能够从可用 Web 部件控件的目录中进行选择。

先决条件

若要完成本演练，您需要：

已在将承载该站点的计算机上安装和配置的 Internet 信息服务 (IIS)。有关安装和配置 IIS 的详细信息，请参见安装中附带的 IIS 帮助文档，或者参见 Microsoft TechNet 网站（“Internet Information Services 6.0 Technical Resources”（Internet 信息服务 6.0 技术资源））上的联机 IIS 文档。
可识别单个用户的 ASP.NET 网站。如果已经配置了这样的站点，则可以将该站点用作本演练的起始点。否则，若要查看有关创建虚拟目录或站点的详细信息，请参见如何：在 IIS 5.0 和 6.0 中创建和配置虚拟目录或如何：在 IIS 6.0 中创建和配置本地 ASP.NET 网站。
已配置的个性化设置提供程序和数据库。Web 部件个性化设置默认情况下是启用的，它使用 SQL 个性化设置提供程序 (SqlPersonalizationProvider) 以及 Microsoft SQL Server Standard Edition 存储个性化设置数据。本演练使用 SSE 和默认的 SQL 提供程序。如果安装了 SSE，则不需要进行任何配置。SSE 是作为 Microsoft Visual Studio 2005 安装的可选部分提供的，也可以免费下载。有关详细信息，请参见 Microsoft SQL Server 2005 Express Edition 网页。若要使用 SQL Server 的一个完整版本，必须安装和配置 ASP.NET 应用程序服务数据库，并且将 SQL 个性化设置提供程序配置为连接到该数据库。有关详细信息，请参见为 SQL Server 创建和配置应用程序服务数据库。还可以创建和配置自定义提供程序来使用其他非 SQL 数据库或存储解决方案。有关详细信息和代码示例，请参见实现成员资格提供程序。

创建使用 Web 部件的简单页面

在演练的本部分中，将创建使用 Web 部件显示静态内容的页面。

说明：
不需要执行任何操作即可启用 Web 部件个性化设置；默认情况下为 Web 部件控件集启用该功能。当第一次在某个站点上运行 Web 部件页时，ASP.NET 将设置一个默认的个性化设置提供程序来存储用户个性化设置。默认提供程序使用在站点目录的子目录中创建的数据库。有关个性化设置的更多信息，请参见 Web 部件个性化设置概述。

不需要执行任何操作即可启用 Web 部件个性化设置；默认情况下为 Web 部件控件集启用该功能。当第一次在某个站点上运行 Web 部件页时，ASP.NET 将设置一个默认的个性化设置提供程序来存储用户个性化设置。默认提供程序使用在站点目录的子目录中创建的数据库。有关个性化设置的更多信息，请参见 Web 部件个性化设置概述。

创建网页

在文本编辑器中，创建新的文件并将下面的页声明添加到该文件的开头。
```
<%@ page language="VB" %>
```
```
<%@ 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 部件控件添加到页面的用户控件。
在新文件的顶部，如下例中所示添加控件声明。
```
<%@ control language="VB" classname="SearchUserControl" %>
```
```
<%@ control language="C#" classname="SearchUserControl" %>
```
说明：

本演练的搜索控件并不实现实际的搜索功能；它只用于演示 Web 部件功能。

说明：
本演练的搜索控件并不实现实际的搜索功能；它只用于演示 Web 部件功能。

在控件声明的下面，添加一对 <script> 标记，并在这对标记之间添加用于创建可个性化设置的属性的代码。

请注意，ResultsPerPage 属性 (Property) 包含一个 Personalizable 属性 (Attribute)。如果提供了具有用户界面 (UI) 的编辑控件在“设计”视图中更改设置，则此属性将使控件的用户能够个性化设置每一页要返回的搜索结果数量。

请确保您的控件代码类似于下面的代码示例：

<%@ 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>

<%@ control language="C#" classname="SearchUserControl" %>
<script runat="server">
  private int results;

  [Personalizable]
  public int ResultsPerPage
  {
    get
      {return results;}

    set
      {results = value;}
  }    
</script>

在 <script> 元素的下面添加一个文本框和一个按钮，以便为搜索控件提供 UI，如下面的代码示例所示：

<asp:textbox runat="server" id="inputBox"></asp:textbox>
<br />
<asp:button runat="server" id="searchButton" text="Search" />

安全说明：
该控件具有一个文本框，用于接受用户输入，这是一个潜在的安全威胁。默认情况下，ASP.NET 网页验证用户输入，以确保输入中不包含 HTML 元素或脚本。有关更多信息，请参见脚本侵入概述。

将文件命名为 SearchUserControlVB.ascx 或 SearchUserControlCS.ascx（具体取决于您使用的语言），并将其保存到 WebPartsDemo.aspx 页所在的同一目录中。

现在，您将向 Sidebar 区域添加两个控件，其中一个包含链接列表，而另一个则是您在前面的过程中创建的用户控件。这些链接将作为单个标准的 Label 服务器控件进行添加，其方式类似于为 Main 区域创建静态文本。不过，虽然用户控件中包含的单个服务器控件可以直接包含在区域中，但在这种情况下却不能包含在区域中。相反，它们是在前面的过程中创建的用户控件的一部分。这阐释了一种常见方法，使用这种方法可以将需要的任何控件和额外功能打包在用户控件中，然后在区域中将该用户控件作为 Web 部件控件引用。

在运行时，ASP.NET 将使用 GenericWebPart 控件包装这两个控件。当 GenericWebPart 控件包装 Web 服务器控件时，泛型部件控件为父控件，而且您可以通过父控件的 ChildControl 属性访问服务器控件。通过泛型部件控件，可以使标准 Web 服务器控件与从 WebPart 类派生的 Web 部件控件具有相同的基本行为和属性。

为侧栏区域创建内容

在文本编辑器中打开 WebPartsDemo.aspx 页。

在页面的顶部，将下面的声明添加到页声明的紧后面，以引用刚刚创建的用户控件：

<%@ register tagprefix="uc1" tagname="SearchUserControl" 
  src="searchusercontrolvb.ascx" %>

<%@ 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 文件。

现在可以对页进行测试。

测试页面

在浏览器中加载页。

该页显示两个区域。页上每个控件的标题栏中都将显示一个向下箭头，其中包含一个称为谓词菜单的下拉菜单。谓词是用户可以对服务器控件执行的操作，如关闭、最小化或编辑控件。谓词菜单中的每个菜单项都是一个谓词。下面的屏幕快照显示的是此页。
单击控件标题栏中的向下箭头以显示其谓词菜单，再单击**“最小化”**链接。

该控件将被最小化。
在谓词菜单中单击**“还原”**。

这阐释了 Web 部件控件的不同视觉显示状态。

使用户能够编辑页和更改布局

用户可以更改 Web 部件控件的布局，方法是将这些控件从一个区域拖动到另一个区域。此外，还可使用户能够编辑控件特性，例如外观、布局和行为。Web 部件控件集为 WebPart 控件提供了基本的编辑功能。（虽然本演练并未设置此任务，但您也可以创建自定义编辑器控件，以使用户可以编辑 WebPart 控件的功能。）当 WebPart 控件的位置发生更改时，对其属性的编辑将依赖于 ASP.NET 个性化设置来保存用户所做的更改。

在本部分演练中，将使用户能够编辑页面上所有 WebPart 控件的基本特性。

创建启用页布局更改功能的用户控件

在文本编辑器中创建一个新文件，然后将下面的代码复制到该文件中。

此代码使用了 Web 部件控件集的允许页面更改其视图或显示模式的功能。通过此代码，您还可以在某些显示模式下更改页面的物理外观和布局。

<%@ 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="&nbsp;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>

<%@ 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="&nbsp;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> 指令，以便将新的用户控件注册到页面上：

<%@ register TagPrefix="uc2" 
  TagName="DisplayModeMenuVB" 
  Src="DisplayModeMenu.ascx" %>

<%@ register TagPrefix="uc2" 
  TagName="DisplayModeMenuCS" 
  Src="DisplayModeMenu.ascx" %>

在 <asp:webpartmanager> 元素的紧下方添加对该用户控件的声明性引用：

<uc2:DisplayModeMenuVB ID="DisplayModeMenu1" runat="server" />

<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>
```
说明：

将不使用 BehaviorEditorPart 和 PropertyGridEditorPart 两个附加控件，因为它们所需的设置已超出本演练的范围。
保存 WebPartsDemo.aspx 文件。

已经创建了一个允许您更改显示模式和页面布局的用户控件，并且在主网页上引用了该控件。

说明：
将不使用 BehaviorEditorPart 和 PropertyGridEditorPart 两个附加控件，因为它们所需的设置已超出本演练的范围。

现在可以测试编辑页面和更改布局的功能。

测试布局更改

在浏览器中加载页。
单击**“显示模式”下拉菜单，再选择“编辑”**。

将显示区域标题。
拖动**“链接”**控件的标题栏将该控件从 Sidebar 区域拖动到 Main 区域的底部。

页面看起来将与下面的屏幕快照类似：
单击**“显示模式”下拉菜单，再选择“浏览”**。

此页被刷新，区域名称消失，而且**“链接”**控件保持在您将其定位到的位置。
关闭浏览器，然后再次加载该页面。

所做更改已保存，以供未来的浏览器会话使用，这说明个性化设置工作正常。
在**“显示模式”菜单中单击“编辑”**。
单击箭头以显示**“链接”控件上的谓词菜单，再单击“编辑”**谓词。

将显示 EditorZone 控件，同时显示您添加的 EditorPart 控件。
在编辑控件的**“外观”部分中，将“标题”更改为“收藏夹”，使用“镶边类型”下拉列表选择“只有标题”，然后单击“应用”**。

下面的屏幕快照显示仍然处于编辑模式下的修订页面：
单击**“显示模式”菜单，然后选择“浏览”**返回到浏览模式。

该控件现在具有了经过更新的标题但没有边框，如下面的屏幕快照所示：

在运行时添加 Web 部件

还可以使用户能够在运行时向页中添加 Web 部件控件。为此，请使用 Web 部件目录配置页面，该目录包含您希望用户可以使用的 Web 部件控件的列表。

说明：
在本演练中，您将创建一个包含 FileUpload 和 Calendar 控件的模板。这样，您便可以测试目录的基本功能，但是得到的 Web 部件控件将不具有任何实际的功能。如果您有自定义 Web 控件或用户控件，则可以使用该控件替代静态内容。

使用户能够在运行时添加 Web 部件

在 WebPartsDemo.aspx 文件中，添加以下内容：
- 在表中第三列的 <asp:editorzone> 元素的紧下方添加 <asp:catalogzone> 元素。
- 添加一个 <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 文件。

说明：
EditorZone 和 CatalogZone 控件可以同时位于同一个表单元格中，因为它们并不同时显示。

现在可以测试目录。

测试 Web 部件目录

在浏览器中加载页。
单击**“显示模式”下拉菜单，再选择“目录”**。

将显示名为**“添加 Web 部件”**的目录。
将**“收藏夹”**控件从 Main 区域拖到 Sidebar 区域的顶部。
在**“添加 Web 部件”目录中，全部选中两个复选框，然后从“添加到”下拉列表中选择“主”**。
在目录中单击**“添加”**。

控件将被添加到 Main 区域。如果您愿意，可以将控件的多个实例从目录添加到页面。

下面的屏幕快照演示了该页，其中包括文件上载控件和 Main 区域中的日历控件：
单击**“显示模式”下拉菜单，再选择“浏览”**。

目录消失，并且页面被刷新。
关闭浏览器。重新加载页面。

您所做的更改将保持不变。

后续步骤

本演练演示了在 ASP.NET 网页上使用简单的 Web 部件控件的基本原则。您可能想要尝试更复杂的 Web 部件功能。例如，您可以将 Web 部件控件创建为用户控件或自定义控件。有关详细信息，请参见 WebPart 类的文档。

请参见

通过