逐步解說：在 Visual Web Developer 中建立 Web 組件頁面

發行項
10/22/2014

更新：2007 年 11 月

此逐步解說是建立 Web 網頁 (使用如 Microsoft Visual Studio 2005 之視覺化頁面設計工具中的 Web 組件控制項) 之基本元件和工作的操作型示範。

在許多 Web 應用程式中，可以變更內容的外觀及讓使用者選取和排列他們想要查看的內容相當有用。ASP.NET Web 組件可以讓您建立展示模組化內容的 Web 網頁，這些網頁可以讓使用者改變外觀及內容以符合其偏好。如需 Web 組件的一般簡介，請參閱 ASP.NET Web 組件概觀。如需 Web 組件控制項集合的概觀，請參閱Web 組件控制項集合概觀。

在此逐步解說過程中，您將建立一個頁面，以使用 Web 組件控制項來建立使用者可以修改或個人化的 Web 網頁。逐步解說將說明的工作包括：

將 Web 組件控制項加入至網頁。
建立自訂使用者控制項並使用它做為 Web 組件控制項。
允許使用者將頁面中 Web 組件控制項的配置個人化。
允許使用者編輯 Web 組件控制項的外觀。
允許使用者從可用的 Web 組件控制項的目錄進行選取。

必要條件

若要完成這個逐步解說，您必須要有：

可以識別個別使用者的網站。如果您已經用 ASP.NET 成員資格設定網站，則可以在此逐步解說中使用該網站。否則，逐步解說會提供有關如何設定您的網站，按照您的 Windows 使用者帳戶名稱來對您進行識別的指示。
用於建立 Web 網頁的視覺化設計環境。此逐步解說使用的是 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 的應用程式服務資料庫。

建立並設定網站

此逐步說明需要您具有使用者識別 (Identity)，這樣您才可以鎖定自己的 Web 組件設定。如果您已將網站設定為使用成員資格，則建議您使用該網站。否則，您可以建立新的網站，並將您目前的 Windows 使用者名稱用做您的使用者識別。

若要建立新的網站

在 Visual Studio 中，建立新的 ASP.NET 網站。

如需詳細資訊，請參閱逐步解說：建立具有成員資格和使用者登入的網站。

建立具有 Web 組件的簡單網頁

在這部分的逐步解說中，您可以建立使用 Web 組件控制項顯示靜態內容的頁面。使用 Web 組件的第一個步驟是使用兩個必要的項目建立頁面。首先，Web 組件頁面需要 WebPartManager 控制項以協調所有 Web 組件控制項。其次，Web 組件頁面需要一個或多個區域，它們是包含 WebPart 或其他伺服器控制項並佔用頁面之指定區域的複合控制項 (Composite Control)。

注意事項：
您不必執行任何作業來啟用 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 組件功能。

若要建立主要區域的內容

在 [設計] 檢視，將 Label 控制項從 [工具箱] 的 [標準] 索引標籤拖曳至其 ID 屬性設定為 MainZone 之區域 (Zone) 的內容區域 (Area)。
切換至原始碼檢視。

請注意，已加入 zonetemplate 項目，使 Label 控制項在 MainZone 中換行。
將名為 title 的屬性 (Attribute) 加入至 asp:label 項目，並將其值設定為 "Content"。請移除 asp:label 項目中的 Text="Label" 屬性。在 asp:label 項目內，加入像 [<h2>Welcome to my Home Page</h2>] 之類的部分文字。您的程式碼應如下所示：
```
<asp:webpartzone id="MainZone"  headertext="Main">
   <zonetemplate>
      <asp:label id="Label1"  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  id="TextBox1"></asp:textbox>
<br />
<asp:button  id="Button1" text="Search" />

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

儲存並關閉檔案。

安全性注意事項：
此控制項具有接受使用者輸入的文字方塊，而這是一項可能的安全性威脅。在 Web 網頁中的使用者輸入可能會含有惡意的用戶端指令碼。ASP.NET Web 網頁預設會驗證使用者輸入，以確保輸入中未包含 HTML 項目或指令碼。一旦啟用了驗證，就不需要明確檢查使用者輸入中的指令碼或 HTML 項目。如需詳細資訊，請參閱指令碼攻擊概觀。

此控制項具有接受使用者輸入的文字方塊，而這是一項可能的安全性威脅。在 Web 網頁中的使用者輸入可能會含有惡意的用戶端指令碼。ASP.NET Web 網頁預設會驗證使用者輸入，以確保輸入中未包含 HTML 項目或指令碼。一旦啟用了驗證，就不需要明確檢查使用者輸入中的指令碼或 HTML 項目。如需詳細資訊，請參閱指令碼攻擊概觀。

現在您可以將 Web 組件控制項加入至「提要欄位」區域。您要將兩個控制項加入至「提要欄位」區域，一個包含連結清單，另一個是您先前在逐步解說中建立的使用者控制項。將此連結做為標準 Label 伺服器控制項加入，使用的方法與為「主要」區域建立靜態文字的方法相似。不過，雖然使用者控制項中所包含的個別伺服器控制項可以直接包含在此區域 (例如標籤控制項) 中，但是在這種情形下它們不會那樣，而是您在先前程序中建立之使用者控制項的一部分。它會示範一個常見方法：在使用者控制項中封裝您想要的控制項和額外功能，然後參考區域中的控制項做為 Web 組件控制項。

在執行階段，Web 組件控制項集合會將這兩個控制項與 GenericWebPart 控制項包裝在一起。當 GenericWebPart 控制項包裝 Web 伺服器控制項時，泛型組件控制項為父控制項，您可以透過父控制項的 ChildControl 屬性存取伺服器控制項。使用泛型組件控制項能使標準 Web 伺服器控制項具有與從 WebPart 類別衍生之 Web 組件控制項一樣的基本行為和屬性。

若要將 Web 組件控制項加入至提要欄位區域

開啟 WebPartsDemo.aspx 頁面。
切換至 [設計] 檢視。
將您建立的使用者控制項頁面 SearchUserControl.ascx 從 [方案總管] 拖曳至其 ID 屬性設定為 SidebarZone 的區域。
儲存 WebPartsDemo.aspx 頁面。
切換至原始碼檢視。

在 SidebarZone 的 asp:webpartzone 項目內，加入其中包含連結的 asp:label 項目，並在使用者控制項中，加入具有 Search 值的 Title 屬性，如下列範例所示：

<asp:WebPartZone id="SidebarZone"  
   headertext="Sidebar">
   <zonetemplate>
      <asp:label  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" 
          title="Search" />
   </zonetemplate>
</asp:WebPartZone>

儲存並關閉檔案。

您現在可以測試您的網頁。

若要測試網頁

將網頁載入瀏覽器。

此頁面顯示兩個區域。以下螢幕擷取畫面顯示此頁面。

具有兩個區域的 Web 組件示範頁面

每個控制項的標題列中為向下箭頭，其會提供對可在控制項上執行的可用動作 (Action) 之動詞命令 (Verb) 功能表的存取。按一下其中一個控制項的動詞命令功能表，然後再按 [最小化] 動作，注意此控制項最小化了。在動詞命令功能表中按一下 [還原]，控制項就會返回至它的正常大小。

讓使用者編輯頁面和變更配置

Web 組件會為使用者提供透過將 Web 組件控制項從一個區域拖曳至另一個區域來變更其配置的功能。除讓使用者將 WebPart 控制項從一個區域移至另一個區域外，您還可以讓使用者編輯控制項的各種特性，包括它們的外觀、配置和行為。 Web 組件控制項集合會提供 WebPart 控制項的基本編輯功能。雖然您在這個逐步解說中不會執行這項動作，但也可以建立自訂編輯器控制項，以允許使用者編輯 WebPart 控制項的功能。與變更 WebPart 控制項位置一樣，編輯控制項的屬性依賴 ASP.NET 個人化來儲存使用者進行的變更。

在這部分的逐步解說中，您會加入能讓使用者編輯頁面中所有 WebPart 控制項之基本特性的功能。若要啟用這些功能，請將其他自訂使用者控制項與 asp:editorzone 項目和兩個編輯控制項一起加入至頁面。

若要建立能變更頁面配置的使用者控制項

在 Visual Studio 的 [檔案] 功能表上按一下 [新增]，然後按一下 [檔案]。
在 [加入新項目] 對話方塊中，選取 [Web 使用者控制項]。將新檔案命名為 DisplayModeMenu.ascx。清除 [將程式碼置於個別檔案中] 方塊。
按一下 [加入] 以建立新控制項。
切換至原始碼檢視。

移除新檔案中所有的現有程式碼，然後貼上下列程式碼。這個使用者控制項程式碼會使用允許頁面變更其檢視或顯示模式之 Web 組件控制項集合的功能，還可允許您在處於特定顯示模式的時候變更頁面的實體外觀和配置。

<%@ control language="vb" classname="DisplayModeMenuVB"%>
<script >
  ' 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"  
    Borderwidth="1" 
    Width="230" 
    BackColor="lightgray"
    Font-Names="Verdana, Arial, Sans Serif" >
    <asp:Label ID="Label1"  
      Text="&nbsp;Display Mode" 
      Font-Bold="true"
      Font-Size="8"
      Width="120" />
    <asp:DropDownList ID="DisplayModeDropdown"   
      AutoPostBack="true" 
      Width="120"
      OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
    <asp:LinkButton ID="LinkButton1" 
      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"  
      GroupingText="Personalization Scope"
      Font-Bold="true"
      Font-Size="8" 
      Visible="false" >
      <asp:RadioButton ID="RadioButton1"  
        Text="User" 
        AutoPostBack="true"
        GroupName="Scope" 
        OnCheckedChanged="RadioButton1_CheckedChanged" />
      <asp:RadioButton ID="RadioButton2"  
        Text="Shared" 
        AutoPostBack="true"
        GroupName="Scope" 
        OnCheckedChanged="RadioButton2_CheckedChanged" />
    </asp:Panel>
  </asp:Panel>
</div>

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

 // 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"  
    Borderwidth="1" 
    Width="230" 
    BackColor="lightgray"
    Font-Names="Verdana, Arial, Sans Serif" >
    <asp:Label ID="Label1"  
      Text="&nbsp;Display Mode" 
      Font-Bold="true"
      Font-Size="8"
      Width="120" />
    <asp:DropDownList ID="DisplayModeDropdown"   
      AutoPostBack="true" 
      Width="120"
      OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
    <asp:LinkButton ID="LinkButton1" 
      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"  
      GroupingText="Personalization Scope"
      Font-Bold="true"
      Font-Size="8" 
      Visible="false" >
      <asp:RadioButton ID="RadioButton1"  
        Text="User" 
        AutoPostBack="true"
        GroupName="Scope" 
        OnCheckedChanged="RadioButton1_CheckedChanged" />
      <asp:RadioButton ID="RadioButton2"  
        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" >
    <ZoneTemplate>
      <asp:AppearanceEditorPart ID="AppearanceEditorPart1" 
         />
      <asp:LayoutEditorPart ID="LayoutEditorPart1"  />
    </ZoneTemplate>
  </asp:EditorZone>
</td>

注意事項：
雖然 AppearanceEditorPart 和 LayoutEditorPart 控制項用於此逐步解說，但 BehaviorEditorPart 和 PropertyGridEditorPart 控制項不用於此逐步解說，因為它們需要在此逐步解說範圍之外的安裝。

儲存 WebPartsDemo.aspx 檔案。

您已建立允許您變更顯示模式和變更頁面配置的使用者控制項，並且您已參考主要 Web 網頁上的控制項。

您現在可以測試功能，以編輯頁面並變更配置。

若要測試配置變更

將網頁載入瀏覽器。
在 [顯示模式] 功能表中，按一下 [編輯]。

區域標題隨即顯示。
將 [我的連結] 控制項沿著標題列從 Sidebar 區域拖曳至 Main 區域的底部。

頁面可能如下所示：

具有我的連結控制項的 Web 組件示範頁已移動
按一下 [顯示模式]，然後按一下 [瀏覽]。

頁面會重新整理，區域名稱會消失，而 [我的連結] 控制項則仍在您所放的位置。
若要示範個人化可以使用，則關閉瀏覽器，然後重新載入頁面。儲存您所做的變更，以便將來用於瀏覽器工作階段。
在 [顯示模式] 功能表中，按一下 [編輯]。

現在，此頁面的每個控制項都會顯示，而且在其標題列中都有包含動詞命令下拉式功能表的向下箭頭。
按一下箭頭顯示 [我的連結] 控制項上的動詞命令功能表，然後按一下 [編輯]。

EditorZone 控制項隨即出現，顯示您加入的 EditorPart 控制項。
在編輯控制項的 [外觀] 區段中，將 [標題] 變更為 [我的最愛]。在 [色彩類型] 清單中，選取 [僅顯示標題]，然後按一下 [套用]。

以下螢幕擷取畫面顯示處於編輯模式的頁面。

處於編輯模式的 Web 組件示範頁面
在 [顯示模式] 功能表中，按一下 [瀏覽] 返回至瀏覽模式。

控制項現在有更新的標題而且沒有框線，如以下螢幕擷取畫面所示。

編輯的 Web 組件示範頁面

在執行階段加入 Web 組件

您還可以讓使用者在執行階段將 Web 組件控制項加入其網頁。若要這樣做，則用 Web 組件目錄設定頁面，其包含您要讓使用者能夠使用的 Web 組件控制項清單。

注意事項：
在此逐步解說中，您會建立包含 FileUpload 和 Calendar 控制項的範本。這將允許您測試目錄的基本功能，但結果 Web 組件控制項不具有任何實際功能。如果您具有自訂 Web 或使用者控制項，則您可以用它取代靜態內容。

若要允許使用者在執行階段加入 Web 組件

開啟 WebPartsDemo.aspx 頁面。
切換至 [設計] 檢視。
從 [工具箱] 的 [WebParts] 索引標籤，將 CatalogZone 控制項拖曳至表格右行，置放在 EditorZone 控制項下。

兩個控制項可以在相同的表格儲存格中，因為它們不會同時顯示。
在 [屬性] 窗格中，將字串加入 Web 組件指派至 CatalogZone 控制項的 HeaderText 屬性。
從 [工具箱] 的 [WebParts] 索引標籤，將 DeclarativeCatalogPart 控制項拖曳至 CatalogZone 控制項的內容區域。
按一下 DeclarativeCatalogPart 控制項右上角的箭頭公開 (Expose) 其 [工作] 功能表，然後選取 [編輯樣板]。
從 [工具箱] 的 [標準] 索引標籤，將 FileUpload 控制項和 Calendar 控制項拖曳至 DeclarativeCatalogPart 控制項的 [WebPartsTemplate] 區段。

切換至 [原始碼] 檢視，並檢查 asp:catalogzone 項目的原始程式碼。

請注意，DeclarativeCatalogPart 控制項包含帶有兩個封入之伺服器控制項的 webpartstemplate 項目，您將可以將這兩個伺服器控制項從目錄中加入至您的網頁。

注意事項：
如果您具有自訂控制項，則這是用它取代範例中其中一個伺服器控制項的位置，雖然這需要此逐步解說範圍以外的步驟。如需詳細資訊，請參閱 WebPart 類別之文件中的程式碼範例。

使用以下程式碼範例中每個標題顯示的字串值，將 Title 屬性加入至您已加入至目錄的每個控制項。雖然標題不是您在設計階段可以在這兩個伺服器控制項上正常設定的屬性，但是當使用者在執行階段將這些控制項加入至目錄的 WebPartZone 區域時，它們都會包裝在 GenericWebPart 控制項。這會使它們充當 Web 組件控制項，因此它們將可以顯示標題。

包含在 DeclarativeCatalogPart 控制項中之兩個控制項的程式碼看起來如下。
```
<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" 
  >
  <WebPartsTemplate>
    <asp:Calendar ID="Calendar1" 

      title="My Calendar" />
    <asp:FileUpload ID="FileUpload1" 

      title="Upload Files" />
  </WebPartsTemplate>
</asp:DeclarativeCatalogPart>
```
儲存 Web 網頁。

您現在可以測試目錄。

若要測試 Web 組件目錄

將網頁載入瀏覽器。
在 [顯示模式] 功能表中按一下 [目錄]。

標題為 [加入 Web 組件] 的目錄隨即顯示。
將 [我的最愛] 控制項從 Main 區域拖曳回 Sidebar 區域的頂端。
在 [加入 Web 組件] 目錄中，選取兩個核取方塊，然後從可用區域清單中選取 [Main]。
按一下目錄中的 [加入]。

控制項會加入至 Main 區域。如果您需要，則可以將此目錄之控制項的多個執行個體加入至您的頁面。以下螢幕擷取畫面顯示在 Main 區域中具有檔案上載控制項和日曆的頁面：

加入至目錄之主要區域的控制項
在 [顯示模式] 功能表中按一下 [瀏覽]。

目錄會消失，頁面會重新整理。
關閉瀏覽器，然後再載入一次頁面。

您所做的變更會保存。

後續步驟

此逐步解說說明了使用 ASP.NET Web 網頁之簡單 Web 組件控制項的基本原則。您可能會想要實驗其他更複雜的 Web 組件功能。另外，建議您再深入研究的重點包括：

建立 Web 組件控制項，其所提供的功能比此逐步解說之靜態 Web 組件所提供的功能更複雜。您可以建立 Web 組件控制項做為使用者控制項或自訂控制項。如需詳細資訊，請參閱 WebPart 類別的文件。

請參閱

共用方式為