演练：在 Visual Web Developer 中创建 Web 部件页

项目
10/22/2014

更新：2007 年 11 月

本演练是创建网页所涉及的重要组件和任务的实际演示，网页中将使用可视化页设计工具（如 Microsoft Visual Studio 2005）中的 Web 部件控件。

在许多 Web 应用程序中，能够更改内容的外观以及允许用户选择和排列要显示的内容是非常有用的。使用 ASP.NET Web 部件可以创建能显示模块化内容并允许用户更改外观和内容以满足其偏好的网页。有关 Web 部件的一般介绍，请参见 ASP.NET Web 部件概述。有关 Web 部件控件集的概述，请参见Web 部件控件集概述。

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

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

先决条件

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

可标识各个用户的网站。如果您有一个已配置了 ASP.NET 成员资格的网站，则可以使用该网站完成本演练。否则，本演练提供有关如何将网站配置为根据 Windows 用户帐户名标识用户的简介。
用于创建网页的可视化设计环境。本演练使用 Visual Studio 2005。
已配置的个性化设置提供程序和数据库。Web 部件个性化设置默认情况下是启用的，它使用 SQL 个性化设置提供程序 (SqlPersonalizationProvider) 以及 Microsoft SQL Server Express Edition 存储个性化设置数据。本演练使用 SQL Server Express 和默认的 SQL 提供程序。如果安装了 SQL Server Express，则不需要进行任何配置。SQL Server Express 既可作为 Microsoft Visual Studio 2005 安装的一个可选部分而获得，也可以从 Microsoft.com 免费下载。若要使用完整版本的 SQL Server，则您必须安装并配置 ASP.NET 应用程序服务数据库，并将 SQL 个性化设置提供程序配置为连接到该数据库。有关详细信息，请参见为 SQL Server 创建和配置应用程序服务数据库。

创建和配置网站

此演练要求您具有用户标识，因此您可以键控您的 Web 部件设置。如果已经具有配置为使用成员资格的网站，建议使用该网站。否则，您可以创建新网站并将您的当前 Windows 用户名用作用户标识。

创建新的网站

在 Visual Studio 中，创建新的 ASP.NET 网站。

有关详细信息，请参见演练：创建具有成员资格和用户登录功能的网站。

使用 Web 部件创建一个简单的页

在本部分演练中，将创建一个使用 Web 部件控件显示静态内容的页。使用 Web 部件的第一步是创建具有两个必需的元素的页。首先，Web 部件页需要一个 WebPartManager 控件来协调所有 Web 部件控件。其次，Web 部件页需要一个或多个区域，区域是包含 WebPart 或其他服务器控件并且占据页上的指定区域的复合控件。

说明：
您无需执行任何操作即可启用 Web 部件个性化设置；Web 部件控件集默认启用该设置。在网站上第一次运行 Web 部件页时，ASP.NET 会设置默认的个性化设置提供程序来存储用户个性化设置。有关个性化设置的更多信息，请参见 Web 部件个性化设置概述。

创建包含 Web 部件控件的页

关闭默认页并添加一个名为 WebPartsDemo.aspx 的新页。
切换到“设计”视图。
从**“视图”菜单中单击“可视辅助”，然后确保选中“ASP.NET 非可视控件”和“详细信息”**选项。

这样您就可以查看没有 UI 的布局标记和控件。
在 body 元素之前，紧接该元素添加一个新行。

说明：

如果无法正常执行此操作，请选择 div 元素并按两次 ESC 键以选择 body 元素，接着按左箭头键，然后按 Enter 键。
将插入点定位在换行符之前。
在工具栏的**“块格式”列表中，选择“标题 1”**。
在标题中添加文本“Web 部件演示页”。
从“工具箱”的**“WebParts”**选项卡中，将一个 WebPartManager 控件拖动到该页上，将它放在新行字符与 <div> 的开始标记之间。

WebPartManager 控件不呈现任何输出，因此在设计器图面上显示为灰色的框。
将插入点定位在 div 元素中。
在**“表”菜单上单击“插入表”，指定一个具有一行和三列的表，然后单击“确定”**。
将一个 WebPartZone 控件拖动到该表左边的列中。右击该 WebPartZone 控件，选择**“属性”**，再设置下面的属性：

ID：SidebarZone

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

ID：MainZone

HeaderText：Main
保存文件，但是先不要将其关闭。

说明：
如果无法正常执行此操作，请选择 div 元素并按两次 ESC 键以选择 body 元素，接着按左箭头键，然后按 Enter 键。

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

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

为 Main 区域创建内容

在“设计”视图中，从“工具箱”的**“标准”**选项卡中将一个 Label 控件拖动到 ID 属性设置为 MainZone 的区域的内容区域中。
切换到“源”视图。

注意，添加了一个 zonetemplate 元素来包装 MainZone 中的 Label 控件。
为 asp:label 元素添加一个名为 title 的属性，并将属性值设置为 Content。从 asp:label 元素中移除 Text="Label" 属性。在 asp:label 元素中，添加一些文本，如“<h2>欢迎访问本主页</h2>”。代码如下所示：
```
<asp:webpartzone id="MainZone" runat="server" headertext="Main">
   <zonetemplate>
      <asp:label id="Label1" runat="server" title="Content">
         <h2>Welcome to My Home Page</h2>
      </asp:label>
   </zonetemplate>
</asp:webpartzone>
```
保存该文件。

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

创建用户控件

将一个新的 Web 用户控件作为名为 SearchUserControl.ascx 的搜索控件添加到网站中，确保已清除**“将源代码放在单独的文件中”**。

说明：

此演练的用户控件并不实现实际的搜索功能；它仅用于演示 Web 部件功能。
切换到“设计”视图。
从工具箱的**“标准”**选项卡中，将 TextBox 控件拖动到页面上。
将插入点放在刚添加的文本框之后，再按 Enter 添加一个新行。
将 Button 控件拖动到页面上刚添加的文本框下面的新行上。

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

切换到“源”视图，然后确保用户控件的源代码如下面的示例所示：

<%@ control language="VB" classname="SearchUserControl" %>
<asp:textbox runat="server" id="TextBox1"></asp:textbox>
<br />
<asp:button runat="server" id="Button1" text="Search" />

<%@ control language="C#" classname="SearchUserControl" %>
<asp:textbox runat="server" id=" TextBox1"></asp:textbox>
<br />
<asp:button runat="server" id=" Button1" text="Search" />

保存并关闭文件。

安全说明：
此控件具有一个接受用户输入的文本框，这是一种潜在的安全威胁。网页中的用户输入可能会包含具有恶意的客户端脚本。默认情况下，ASP.NET 网页会验证用户输入以确保输入中未包含 HTML 元素或脚本。只要启用了此验证，就不需要显式检查用户输入中的脚本或 HTML 元素。有关更多信息，请参见脚本侵入概述。

此控件具有一个接受用户输入的文本框，这是一种潜在的安全威胁。网页中的用户输入可能会包含具有恶意的客户端脚本。默认情况下，ASP.NET 网页会验证用户输入以确保输入中未包含 HTML 元素或脚本。只要启用了此验证，就不需要显式检查用户输入中的脚本或 HTML 元素。有关更多信息，请参见脚本侵入概述。

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

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

打开 WebPartsDemo.aspx 页。
切换到“设计”视图。
将已创建的用户控件页 SearchUserControl.ascx 从**“解决方案资源管理器”**拖动到 ID 属性设置为 SidebarZone 的区域中。
保存 WebPartsDemo.aspx 页。
切换到“源”视图。

在 SidebarZone 的 asp:webpartzone 元素中，添加一个包含链接的 asp:label 元素，并在用户控件标记中添加一个值为“搜索”的 Title 属性，如下面的示例所示：

<asp:WebPartZone id="SidebarZone" runat="server" 
   headertext="Sidebar">
   <zonetemplate>
      <asp:label runat="server" id="linksPart" title="My Links">
             <a href="https://www.asp.net">ASP.NET site</a> 
             <br />
             <a href="https://www.gotdotnet.com">GotDotNet</a> 
             <br />
             <a href="https://www.contoso.com">Contoso.com</a> 
             <br />
      </asp:label>
      <uc1:SearchUserControl id="searchPart" runat="server"
          title="Search" />
   </zonetemplate>
</asp:WebPartZone>

保存并关闭文件。

现在可以测试该页。

测试页面

在浏览器中加载页。

页中显示两个区域。下面的屏幕快照显示了该页。

具有两个区域的 Web 部件演示页

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

启用用户编辑页和更改布局的功能

Web 部件为用户提供了通过将 Web 部件控件从一个区域拖动到另一个区域来更改其布局的功能。除了允许用户将 WebPart 控件从一个区域移动到另一个区域外，还允许用户编辑控件的各种特征，包括其外观、布局和行为。Web 部件控件集为 WebPart 控件提供了基本的编辑功能。本演练中不会实现编辑功能，但您可以创建自定义编译器控件来允许用户编辑 WebPart 控件的功能。和更改 WebPart 控件的位置一样，编辑控件属性时需要由 ASP.NET 个性化设置来保存用户所做的更改。

在本部分演练中，将为用户添加相应的功能，使之能编辑页上所有 WebPart 控件的基本特性。若要启用这些功能，应向页中添加其他自定义控件以及一个 asp:editorzone 元素和两个编辑控件。

创建启用对页面布局进行更改的用户控件

在 Visual Studio 中，在**“文件”菜单上单击“新建”，再单击“文件”**。
在**“添加新项”对话框中，选择“Web 用户控件”。将新文件命名为 DisplayModeMenu.ascx。清除“将源代码放在单独的文件中”**框。
单击**“添加”**以新建控件。
切换到“源”视图。

移除新文件中的所有现有代码，然后粘贴下面的代码。此用户控件代码使用允许页更改其视图和显示模式的 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" />
    <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" />
    <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" />
    <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" />
    <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>

保存该文件。

说明：
虽然此用户控件可以使 Web 部件页的用户在共享个性化模式和用户个性化模式之间切换，但个性化功能要求用户要具有 Web.config 文件中所指定的适当权限。此演练不演示如何授予这些权限，因而并没有启用该功能。所以，在运行该页时隐藏了用户控件上的用户单选按钮和共享单选按钮。有关个性化设置的更多信息，请参见 Web 部件个性化设置。

虽然此用户控件可以使 Web 部件页的用户在共享个性化模式和用户个性化模式之间切换，但个性化功能要求用户要具有 Web.config 文件中所指定的适当权限。此演练不演示如何授予这些权限，因而并没有启用该功能。所以，在运行该页时隐藏了用户控件上的用户单选按钮和共享单选按钮。有关个性化设置的更多信息，请参见 Web 部件个性化设置。

允许用户更改布局

打开 WebPartsDemo.aspx 页。
切换到“设计”视图。
紧跟着以前添加的 WebPartManager 控件放置插入点。按 Enter 键在 WebPartManager 控件之后创建空行。
将刚创建的用户控件 (DisplayModeMenu.ascx) 拖动到 WebPartsDemo.aspx 页上，并放置在空行上。
将一个 EditorZone 控件从“工具箱”的**“WebParts”**选项卡拖动到 WebPartsDemo.aspx 页上仍然打开的表单元格中。
从“工具箱”的**“WebParts”**选项卡将一个 AppearanceEditorPart 控件和一个 LayoutEditorPart 控件拖动到 EditorZone 控件上。

切换到“源”视图。

表单元格中得到的代码将类似于下面的代码。

<td valign="top">
  <asp:EditorZone ID="EditorZone1" runat="server">
    <ZoneTemplate>
      <asp:AppearanceEditorPart ID="AppearanceEditorPart1" 
        runat="server" />
      <asp:LayoutEditorPart ID="LayoutEditorPart1" runat="server" />
    </ZoneTemplate>
  </asp:EditorZone>
</td>

说明：
本演练中使用了 AppearanceEditorPart 和 LayoutEditorPart 控件，而没有使用 BehaviorEditorPart 和 PropertyGridEditorPart 控件，因为后两种控件需要进行的安装超出了本演练的范围。

保存 WebPartsDemo.aspx 文件。

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

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

测试布局更改

在浏览器中加载页。
在**“显示模式”菜单中单击“编辑”**。

随即显示区域标题。
通过**“My Links”**控件的标题栏将该控件从 Sidebar 区域拖动到 Main 区域的底部。

该页看起来类似下面这样：

移动了包含 My Links 控件的 Web 部件演示页
单击**“显示模式”，再单击“浏览”**。

该页被刷新，区域的名称消失，**“My Links”**控件的位置保持不变。
若要演示个性化设置的运行情况，请关闭浏览器，然后重新加载该页。会保存所做的更改，以备以后的浏览器会话使用。
在**“显示模式”菜单中单击“编辑”**。

页上的每个控件的标题栏中现在均显示有一个向下的箭头，其中包含一个谓词下拉菜单。
单击箭头显示**“My Links”控件上的谓词菜单，再单击“编辑”**。

随即出现 EditorZone 控件，并显示添加的 EditorPart 控件。
在编辑控件的**“外观”区域中，将“标题”更改为“收藏夹”。在“镶边类型”列表中，选择“只有标题”，再单击“应用”**。

下面的屏幕快照显示了该页处于编辑模式时的情形。

编辑模式下的 Web 部件演示页
在**“显示模式”菜单中，单击“浏览”**以返回到浏览模式。

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

编辑过的 Web 部件演示页

在运行时添加 Web 部件

还可以使用户能够在运行时向页中添加 Web 部件控件。为此，应为该页配置 Web 部件目录，其中包含将提供给用户的 Web 部件控件的列表。

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

允许用户在运行时添加 Web 部件

打开 WebPartsDemo.aspx 页。
切换到“设计”视图。
从“工具箱”的**“WebParts”**选项卡中将一个 CatalogZone 控件拖动到表右边的列中，放在 EditorZone 控件下面。

这两个控件可放在同一个表单元格中，因为它们不会同时显示。
在“属性”窗格中，将字符串 Add Web Parts 分配给 CatalogZone 控件的 HeaderText 属性。
从“工具箱”的**“WebParts”**选项卡将一个 DeclarativeCatalogPart 控件拖动到 CatalogZone 控件的内容区域。
单击 DeclarativeCatalogPart 控件右上角中的箭头，显示其“任务”菜单，然后选择**“编辑模板”**。
从“工具箱”的**“标准”选项卡将一个 FileUpload 控件和一个 Calendar 控件拖动到 DeclarativeCatalogPart 控件的“WebPartsTemplate”**部分。

切换到“源”视图并检查 asp:catalogzone 元素的源代码。

注意，DeclarativeCatalogPart 控件包含一个 webpartstemplate 元素以及两个可从目录添加到页中的服务器控件。

说明：
如果具有自定义的控件，现在就可以使用该控件替换示例中的一个服务器控件，但所需步骤超出了本演练的范围。有关更多详细信息，请参见 WebPart 类的文档中的代码示例。

为添加到目录中的每个控件添加 Title 属性，并使用下面的代码示例中为各个标题显示的字符串值。虽然标题并非在设计时通常可在这两个服务器控件上设置的属性，但当用户在运行时将这些控件从目录添加到 WebPartZone 区域时，这些控件均包装在 GenericWebPart 控件中。这使它们可以充当 Web 部件控件，因此它们可以显示标题。

包含在 DeclarativeCatalogPart 控件中的这两个控件的代码看起来类似下面这样。
```
<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" 
  runat="server">
  <WebPartsTemplate>
    <asp:Calendar ID="Calendar1" 
      runat="server" 
      title="My Calendar" />
    <asp:FileUpload ID="FileUpload1" 
      runat="server" 
      title="Upload Files" />
  </WebPartsTemplate>
</asp:DeclarativeCatalogPart>
```
保存页。

现在可以测试该目录。

测试 Web 部件目录

在浏览器中加载页。
在**“显示模式”菜单中单击“目录”**。

即会显示标题为**“Add Web Parts”（添加 Web 部件）**的目录。
将**“收藏夹”**控件从 Main 区域拖回 Sidebar 区域的顶部。
在**“添加 Web 部件”目录中，全部选中两个复选框，然后从可用区域列表中选择“主”**。
在目录中单击**“添加”**。

控件被添加到 Main 区域中。如果愿意，可将控件的多个实例从目录添加到页中。下面的屏幕快照演示了该页，其中包括文件上载控件和 Main 区域中的日历控件：

从目录添加到 Main 区域的目录
在**“显示模式”菜单中单击“浏览”**。

目录消失，该页随即被刷新。
关闭浏览器，然后再次加载页面。

所做的更改会被保持。

后续步骤

本演练演示了在 ASP.NET 网页上使用简单的 Web 部件控件的基本原则。您可能还想尝试其他更复杂的 Web 部件功能。如需进一步探究此问题，我们建议：

创建与本演练中的静态 Web 部件相比能提供更复杂的功能的 Web 部件控件。您可以创建作为用户控件或自定义控件的 Web 部件控件。有关详细信息，请参见 WebPart 类的文档。

请参见

通过