逐步解說：建立 Web 組件頁面

發行項
10/22/2014

更新：2007 年 11 月

這個逐步解說會實際示範用於建立使用 Web 組件控制項之 Web 網頁的基本元件和工作。

在許多 Web 應用程式中，這有助於讓使用者選取並排列想要看到的內容。「ASP.NET Web 組件」功能由一組控制項組成，這些控制項用於建立呈現模組內容並能讓使用者變更外觀和內容來滿足其喜好的 Web 網頁。如需 Web 組件的一般簡介，請參閱 ASP.NET Web 組件概觀。如需 Web 組件控制項集合中主要元件的描述 (其中數個元件會在這個逐步解說中使用)，請參閱 Web 組件控制項集合概觀。

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

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

必要條件

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

在要裝載 (Host) 站台之電腦上安裝並設定的網際網路資訊服務 (IIS)。如需安裝及設定 IIS 的詳細資訊，請參閱安裝作業中所附的 IIS 說明文件，或是 Microsoft TechNet 網站上的線上 IIS 文件 (Internet Information Services 6.0 技術資源) (英文)。
可以識別個別使用者的 ASP.NET 網站。如果您已經設定了這類的站台，即可使用該站台做為此逐步解說的起點。否則，如需建立虛擬目錄或站台的詳細資訊，請參閱 HOW TO：在 IIS 5.0 和 6.0 中建立和設定虛擬目錄或 HOW TO：在 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 組件顯示靜態 (Static) 內容的網頁。

注意事項：
您無需執行任何動作來啟用 Web 組件個人化，Web 組件控制項集合預設會啟用它。第一次執行站台上的 Web 組件頁面時，ASP.NET 會設定預設的個人化提供者，以儲存使用者個人化設定。預設提供者會使用站台目錄之子目錄中建立的資料庫。如需個人化的詳細資訊，請參閱 Web 組件個人化概觀。

若要建立 Web 網頁

在文字編輯器中，建立新檔案，並將下列網頁宣告加入檔案開始處。
```
<%@ page language="VB" %>
```
```
<%@ page language="C#" %>
```

在網頁宣告下方輸入標記，以建立完整的網頁結構，如下列程式碼範例所示。

請注意，該網頁包含具有一列三行的空白表格。該表格將包含會在稍後加入的 Web 組件控制項。

<html>
<head >
  <title>Web Parts Page</title>
</head>
<body>
  <h1>Web Parts Demonstration Page</h1>
  <form  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 組件控制項的複合控制項 (Composite Control)。

若要將區域加入網頁

就在網頁中的 <form> 項目之下，加入 <asp:webpartmanager> 項目，如下列範例所示。
```
<asp:webpartmanager id="WebPartManager1"  />
```
使用 Web 組件控制項的每個網頁上都需要有 WebPartManager 控制項。
將 <asp:webpartzone> 項目加入表格的第一個 <td> 項目內，並指定其屬性值，如下列程式碼範例所示。

請注意，<asp:webpartzone> 項目也包含 <zonetemplate> 項目。Web 組件控制項都是放在 <zonetemplate> 項目內。
```
<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td valign="top">
      <asp:webpartzone id="SideBarZone"  
        headertext="Sidebar">
        <zonetemplate>
        </zonetemplate>
      </asp:webpartzone>
    </td>
```

將 <asp:webpartzone> 項目加入表格的第二個 <td> 項目內，並指定其屬性值，如下列程式碼範例所示：

<td valign="top">
   <asp:webpartzone id="MainZone"  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"  headertext="Main">
  <zonetemplate>
    <asp:label id="contentPart"  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 >
  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 >
  private int results;

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

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

在 <script> 項目下方加入文字方塊和按鈕，提供搜尋控制項的 UI，如下列程式碼範例所示：

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

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

將檔案命名為 SearchUserControlVB.ascx 或 SearchUserControlCS.ascx (視您所使用的語言而定)，並將其儲存在與 WebPartsDemo.aspx 網頁相同的目錄中。

現在，您會把兩個控制項加入 Sidebar 區域，一個包含連結的清單，另一個則是前面程序中所建立的使用者控制項。連結會做為單一標準 Label 伺服器控制項加入，方式與您為 Main 區域建立靜態文字相同。不過，雖然使用者控制項中包含的個別伺服器控制項可以直接包含在區域中，但在這種情況下並非如此。而是您在先前程序中建立之使用者控制項的一部分。這示範了一種常見方式，用於封裝使用者控制項中需要的所有控制項和額外功能，然後在區域中將該使用者控制項做為 Web 組件控制項參考。

在執行階段，ASP.NET 會將這兩個控制項與 GenericWebPart 控制項包裝在一起。當 GenericWebPart 控制項包裝 Web 伺服器控制項時，一般組件控制項是父控制項，您可以透過父控制項的 ChildControl 屬性存取伺服器控制項。泛型組件控制項能使標準 Web 伺服器控制項具有與衍生自 WebPart 類別 (Class) 的 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"  
  headertext="Sidebar">
  <zonetemplate>
    <asp:label  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" 
      title="Search" />
  </zonetemplate>
</asp:WebPartZone>

儲存 WebPartsDemo.aspx 檔案。

現在您可以測試網頁。

若要測試網頁

將網頁載入瀏覽器。

網頁會顯示兩個區域。而在網頁上每個控制項的標題列中都會顯示一個向下箭頭，其中包含稱為動詞命令功能表的下拉式功能表 (Drop-Down Menu)。動詞命令是使用者可以對伺服器控制項執行的動作，例如關閉，最小化或編輯控制項。動詞命令功能表中的每個項目都是一個動詞命令。下圖會顯示該網頁。
按一下控制項標題列中的向下箭頭，顯示其動詞命令功能表，然後按一下 [最小化] 連結。

控制項隨即最小化顯示。
在動詞命令功能表中，按一下 [還原]。

這示範了 Web 組件控制項的不同視覺顯示狀態。

讓使用者可以編輯網頁和變更配置

使用者可以將 Web 組件控制項從一個區域拖曳到另一個區域來變更其配置。您也可以讓使用者編輯控制項特性，例如外觀、配置和行為。Web 組件控制項集合會提供 WebPart 控制項的基本編輯功能。(雖然在本逐步解說中您不會這麼做，但還是可以建立自訂編輯器控制項，讓使用者編輯 WebPart 控制項的功能)。與變更 WebPart 控制項的位置相同，編輯它的屬性也要依賴 ASP.NET 個人化以儲存使用者所做的變更。

在這一部分的逐步解說中，您會讓使用者編輯網頁上任何 WebPart 控制項的基本特性。

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

在文字編輯器中建立新的檔案，並複製為下列程式碼。

這個程式碼會使用 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" />
    <div>
    <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" />
    </div>
    <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" />
    <div>
    <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" />
    </div>
    <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>

將檔案命名為 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"  />

<uc2:DisplayModeMenuCS ID="DisplayModeMenu1"  />

將 <asp:editorzone> 項目加入表格的第三個 <td> 項目內。加入 <zonetemplate> 項目、<asp:appearanceeditorpart> 項目和 <asp:layouteditorpart> 項目。

當您完成之後，程式碼會看起來與下列程式碼範例相同：

<td valign="top">
  <asp:editorzone id="EditorZone1" >
    <zonetemplate>
      <asp:appearanceeditorpart 

        id="AppearanceEditorPart1" />
      <asp:layouteditorpart 

        id="LayoutEditorPart1" />
    </zonetemplate>
  </asp:editorzone>
</td>

注意事項：
因為 BehaviorEditorPart 和 PropertyGridEditorPart 控制項需要安裝，但這已超出本逐步解說的討論範圍，所以並沒有使用這兩個額外的控制項。

儲存 WebPartsDemo.aspx 檔案。

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

您現在可以測試編輯網頁和變更配置的能力。

若要測試配置變更

將網頁載入瀏覽器。
按一下 [Display Mode] 下拉式功能表，然後選取 [Edit]。

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

您的網頁將會看起來和下列螢幕擷取畫面相似：
按一下 [Display Mode] 下拉式功能表，然後選取 [Browse]。

會重新整理網頁，區域名稱會消失，而 [連結] 控制項仍會保留在您所放置的位置。
關閉瀏覽器，然後再次載入網頁。

您所做的變更是保留給未來的瀏覽器工作階段 (Session)，這證明了個人化有在運作。
在 [顯示模式] 功能表中，按一下 [編輯]。
按一下箭頭顯示 [Links] 控制項上的動詞命令功能表，然後按一下 [Edit] 動詞命令。

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

下列螢幕擷取畫面顯示的是仍處於編輯模式下已修改過的網頁：
按一下 [Display Mode] 功能表，然後選取 [瀏覽] 返回瀏覽模式。

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

在執行階段加入 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"  
  headertext="Add Web Parts">
  <zonetemplate>
    <asp:declarativecatalogpart id="catalogpart1" 
       Title="My Catalog">
      <webPartsTemplate>
         <asp:fileupload  id="upload1" 
           title="Upload Files" />
         <asp:calendar  id="cal1" 
            Title="Team Calendar" />
      </webPartsTemplate>
    </asp:declarativecatalogpart>
  </zonetemplate>
</asp:catalogzone>
```
注意事項：

EditorZone 和 CatalogZone 控制項可位於同一個表格儲存格中，因為它們不會同時顯示。
儲存 WebPartsDemo.aspx 檔案。

注意事項：
EditorZone 和 CatalogZone 控制項可位於同一個表格儲存格中，因為它們不會同時顯示。

您現在可以測試目錄。

若要測試 Web 組件目錄

將網頁載入瀏覽器。
按一下 [Display Mode] 下拉式功能表，然後選取 [Catalog]。

名為 [Add Web Parts] 的目錄隨即顯示。
將 [My Favorites] 控制項從 Main 區域拖曳至 Sidebar 區域最上方。
在 [Add Web Parts] 目錄中，選取兩個核取方塊，然後從 [加入至] 下拉式清單中選取 [Main]。
按一下目錄中的 [加入]。

控制項會加入至 Main 區域。如果需要，可以將目錄中的多個控制項執行個體加入網頁。

以下螢幕擷取畫面顯示在 Main 區域中具有檔案上載控制項和日曆的頁面：
按一下 [Display Mode] 下拉式功能表，然後選取 [Browse]。

目錄會消失，並會重新整理網頁。
關閉瀏覽器。重新載入網頁。

您所做的變更會保留。

後續步驟

此逐步解說說明了使用 ASP.NET Web 網頁之簡單 Web 組件控制項的基本原則。您可能想要試驗更加複雜的 Web 組件功能，例如您可以建立 Web 組件控制項做為使用者控制項或自訂控制項。如需詳細資訊，請參閱 WebPart 類別的文件。

請參閱

共用方式為