共用方式為

逐步解說：在 Web 組件頁面中變更顯示模式

  • 發行項

更新：2007 年 11 月

這個逐步解說說明在 ASP.NET 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 中建立和設定虛擬目錄。

  • 設定的個人化提供者和資料庫。 Web 組件個人化依預設會啟用，而且這項功能會搭配使用 SQL 個人化提供者 (SqlPersonalizationProvider)，並搭配 SQL Server Express (SSE) 版本以儲存個人化資料。本逐步解說會使用 SSE 和預設的 SQL 提供者。如果您已經安裝 SSE，則不需要進行任何組態設定。SSE 是 Microsoft Visual Studio 2005 的選擇性安裝部分，也可以免費下載。如需詳細資訊，請參閱 Microsoft SQL Server 2005 Express Edition 網頁 (英文)。若要使用其中一個 SQL Server 完整版本，您必須安裝和設定 ASP.NET 應用程式服務資料庫，並設定 SQL 個人化提供者以連接到該資料庫。如需詳細資訊，請參閱建立及設定 SQL Server 的應用程式服務資料庫。您也可以建立和設定自訂的提供者，以便使用其他非 SQL 資料庫或儲存方案。如需詳細資訊和程式碼範例，請參閱實作成員資格提供者。

  • 衍生自 WebPart 類別的自訂 Web 組件控制項，您可將其加入 Web 組件頁面中的目錄。如需自訂 WebPart 控制項和如何在網頁中參考它的範例，請參閱 WebPartDisplayMode 類別之文件中 TextDisplayWebPart 控制項的程式碼範例。

建立變更顯示模式的使用者控制項

在本節中，您要建立可加入包含 Web 組件控制項之網頁的使用者控制項，以便使用者可以輕鬆地在各種網頁顯示模式間切換。

若要建立變更顯示模式的使用者控制項

  1. 在文字編輯器中，建立新的檔案。

  2. 在檔案的頂端，加入控制項宣告，如下列程式碼範例所示：

    <%@ control language="vb" classname="DisplayModeMenuVB"%>

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

  3. 在控制項宣告的下方，將下列標記內容加入網頁。

    這個標記會建立控制項的使用者介面 (UI)，其由三個主要部分組成：

    • 下拉式清單 (Drop-Down List) 控制項 (<asp:dropdownlist> 項目)，可讓使用者變更顯示模式。

    • 超連結 (Hyperlink) (<asp:linkbutton> 項目)，可讓使用者重設網頁中的使用者專屬個人化資料，將網頁變更回使用者修改之前的預設外觀和配置。

    • 一對選項按鈕控制項 (兩個 <asp:radiobutton> 項目)，可讓使用者在使用者與共用的個人化範圍 (預設為使用者範圍) 間切換。當目前的使用者個人化網頁時，個人化範圍會決定可以看到個人化效果的使用者範圍。

    您的程式碼應該看起來與下列程式碼區塊相同：

    <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" 
      AssociatedControlID="DisplayModeDropdown"/>
    <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>

    <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" 
      AssociatedControlID="DisplayModeDropdown"/>
    <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>

  4. 將檔案命名為 DisplaymodemenuCS.ascx 或 DisplaymodemenuVB.ascx (視您對該範例所使用的語言而定)，並將其儲存在您正用於這個逐步解說之虛擬目錄或網站的資料夾中。

若要將顯示模式功能加入使用者控制項

  1. 在使用者控制項的原始程式檔 (Source File) 中，就在網頁中開頭 <div> 標記之上，加入一對 <script> 標記，並在開頭 <script> 標記內加入 屬性 (Attribute)。

  2. 在 <script> 區段中加入下列程式碼，讓使用者可以在網頁上變更顯示模式、重設網頁上的個人化資料，並在使用者與共用個人化範圍之間切換。

    <script >
  ' Use a field to reference the current WebPartManager.
  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 dropdown 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 is allowed, 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>

    <script >

 // Use a field to reference the current WebPartManager.
  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 dropdown 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 is allowed, toggle the scope.
  protected void RadioButton2_CheckedChanged(object sender, EventArgs e)
  {
    if (_manager.Personalization.CanEnterSharedScope && 
        _manager.Personalization.Scope == PersonalizationScope.User)
      _manager.Personalization.ToggleScope();
  }
</script>

    在程式碼中，需要注意幾個事項：

    • 在 InitComplete 方法中，程式碼會決定目前網頁中可用的顯示模式，並在下拉式清單控制項中填入顯示模式。而且，程式碼也會決定目前使用者是否可以進入網頁上的共用個人化範圍，並選取適當的選項按鈕控制項。

    • DisplayModeDropdown_SelectedIndexChanged 方法會使用 WebPartManager 控制項和使用者選取的模式，實際上變更網頁的顯示模式。

    • LinkButton1_Click 方法會重設網頁上的個人化狀態，這表示將從個人化資料存放區排除網頁的所有使用者個人化資料，且將網頁還原為其預設狀態。

    • RadioButton1_CheckChanged 和 RadioButton2_CheckChanged 方法會將個人化範圍切換至使用者或共用範圍。

  3. 儲存並關閉檔案。

建立裝載顯示模式控制項的 Web 網頁

既然您已建立了可變更顯示模式的使用者控制項，就可以建立裝載該使用者控制項並同時包含 Web 組件區域和其他伺服器控制項的 Web 網頁，以提供 Web 組件功能。

若要建立可變更顯示模式的 Web 網頁

  1. 把自訂控制項之已編譯的組件 (Assembly) 放到網站的 Bin 資料夾。

    做為這個逐步解說情況的必要條件，您需要一個已編譯的自訂 WebPart 控制項。這個逐步解說會使用稱為 TextDisplayWebPart 的自訂控制項，您可以在 WebPartDisplayMode 類別的類別概觀主題中找到相關資訊。已編譯的組件 (Assembly) 應命名為 TextDisplayWebPartCS.dll 或 TextDisplayWebPartVB.dll，視您所使用的語言而定。

    安全性注意事項：

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

  2. 在文字編輯器中，建立新的檔案。

  3. 在檔案的頂端，加入網頁宣告和兩個 register 指示詞。一個 register 指示詞用於使用者控制項，另一個用於您為這個逐步解說所使用之已編譯的自訂 WebPart 控制項。指示詞的 Assembly 屬性必須參考自訂控制項的組件檔案名稱，但不包括副檔名。

    <%@ page language="VB" %>
<%@ register TagPrefix="uc1" 
  TagName="DisplayModeMenuVB" 
  Src="DisplayModeMenuVB.ascx" %>
<%@ register tagprefix="aspSample" 
  Namespace="Samples.AspNet.VB.Controls" 
  Assembly="TextDisplayWebPartVB"%>

    <%@ page language="C#" %>
<%@ register TagPrefix="uc1" 
  TagName="DisplayModeMenuCS" 
  Src="DisplayModeMenuCS.ascx" %>
<%@ register tagprefix="aspSample" 
  Namespace="Samples.AspNet.CS.Controls" 
  Assembly="TextDisplayWebPartCS"%>

  4. 在 register 指示詞的下方，加入下列程式碼區塊，這樣可讓您以手動方式將網頁切換至目錄模式：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
Sub Button1_Click(Byval sender As Object, _
                  ByVal e As EventArgs)
  WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode
End Sub
</script>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
void Button1_Click(object sender, EventArgs e)
{
  WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;
}
</script>

  5. 在程式碼區塊的之後，將下列標記加入檔案。

    這個程式碼範例中的許多功能對 Web 組件頁面來說都十分必要，包括 <asp:webpartmanager> 項目、對應至網頁可能顯示模式的 Web 組件區域和數個控制項。如需這些功能的詳細資訊，請參閱逐步解說：建立 Web 組件頁面。

    該網頁其餘部分的程式碼應該看起來與下列程式碼區塊相同。

    <html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
  <title>Web Parts Display Modes</title>
</head>
<body>
  <form id="Form2" >
    <asp:webpartmanager id="WebPartManager1"  />
    <uc1:DisplayModeMenuVB ID="DisplayModeMenu1"  />
    <asp:webpartzone
      id="WebPartZone1"
       BackImageUrl="~/MyImage.gif">
        <zonetemplate>
          <asp:Calendar 
            ID="Calendar1" 
            Runat="server" 
            Title="My Calendar" />
        </zonetemplate>
    </asp:webpartzone>
    <asp:WebPartZone ID="WebPartZone2" Runat="server">
    </asp:WebPartZone>
    <asp:EditorZone ID="editzone1" Runat="server">
      <ZoneTemplate>
        <asp:AppearanceEditorPart 
          ID="appearanceeditor1" 
          Runat="server" />
        <asp:LayoutEditorPart 
          ID="LayoutEditorPart1" 
          Runat="server" />
      </ZoneTemplate>
    </asp:EditorZone>
    <asp:CatalogZone ID="catalogzone1" Runat="server">
      <ZoneTemplate>
        <asp:DeclarativeCatalogPart 
          ID="declarativepart1" 
          Runat="server">
          <WebPartsTemplate>
          <aspSample:TextDisplayWebPart 

            id="textwebpart" 
            title = "Text Content WebPart"/>  
          </WebPartsTemplate>
        </asp:DeclarativeCatalogPart>
      </ZoneTemplate>
    </asp:CatalogZone>
    <br />
    <asp:button
      id="button1"

      text="Catalog Mode"
      OnClick="Button1_Click"
    />
  </form>
</body>
</html>

    <html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
  <title>Web Parts Display Modes</title>
</head>
<body>
  <form id="Form2" >
    <asp:webpartmanager id="WebPartManager1"  />
    <uc1:DisplayModeMenuCS ID="DisplayModeMenu1"  />
    <asp:webpartzone
      id="WebPartZone1"
       BackImageUrl="~/MyImage.gif">
        <zonetemplate>
          <asp:Calendar 
            ID="Calendar1" 
            Runat="server" 
            Title="My Calendar" />
        </zonetemplate>
    </asp:webpartzone>
    <asp:WebPartZone ID="WebPartZone2" Runat="server">
    </asp:WebPartZone>
    <asp:EditorZone ID="editzone1" Runat="server">
      <ZoneTemplate>
        <asp:AppearanceEditorPart 
          ID="appearanceeditor1" 
          Runat="server" />
        <asp:LayoutEditorPart 
          ID="LayoutEditorPart1" 
          Runat="server" />
      </ZoneTemplate>
    </asp:EditorZone>
    <asp:CatalogZone ID="catalogzone1" Runat="server">
      <ZoneTemplate>
        <asp:DeclarativeCatalogPart 
          ID="declarativepart1" 
          Runat="server">
          <WebPartsTemplate>
          <aspSample:TextDisplayWebPart 

            id="textwebpart" 
            title = "Text Content WebPart" AllowClose="true"/>  
          </WebPartsTemplate>
        </asp:DeclarativeCatalogPart>
      </ZoneTemplate>
    </asp:CatalogZone>
    <br />
    <asp:button
      id="button1"

      text="Catalog Mode"
      OnClick="Button1_Click"
    />
  </form>
</body>
</html>

  6. 將檔案命名為 Displaymodes.aspx，並將其儲存在網站的目錄中。

測試 Web 網頁來變更顯示模式

既然已經建立執行包含 Web 組件控制項且可在各種網頁顯示模式間切換之 Web 網頁所需的一切。

若要測試網頁並變更顯示模式

  1. 將網頁載入瀏覽器。

    網頁將會看起來和下列螢幕擷取畫面相似：

    具有用於變更顯示模式之控制項的網頁

  2. 按一下 [Display Mode] 下拉式清單控制項。

    請注意，在網頁上有多種顯示模式。因為網頁包含 WebPartZone 控制項、EditorZone 控制項和 CatalogZone 控制項，所以除了預設的 [瀏覽] 顯示模式外，上述每一個區域類型對應的顯示模式也會顯示在下拉式清單中。

    注意事項：

    這個網頁也能包含 ConnectionsZone 控制項，它可讓您建立控制項之間的連接，並把連接顯示模式加入至下拉式清單。不過，連接並不在本逐步解說的討論範圍內。

  3. 請從下拉式清單中選取 [目錄] 模式。

    目錄模式 UI 隨即出現，而在目錄中有顯示 TextDisplayWebPart 控制項，可供加入網頁。

  4. 按一下 [關閉] 按鈕，將網頁返回至瀏覽模式。

  5. 還有一種無需使用者控制項即可切換顯示模式的方法，只要按一下網頁底部附近的 [Catalog Mode] 按鈕。這個切換的程式碼會顯示在 Web 網頁的 Button1_Click 方法中。

    網頁會切換至目錄模式。

  6. 選取目錄中自訂控制項旁邊的核取方塊，並按一下 [加入] 將其加入網頁。

  7. 按一下 [關閉]，將網頁返回至瀏覽模式。

    加入的控制項現在會在網頁上顯示。

  8. 在 [Display Mode] 下拉式清單中，選取 [編輯]。

    網頁會切換至編輯模式。區域的標題變得可見，看起來類似小三角形的動詞命令功能表會顯示在位於 WebPartZone 內之每一個伺服器控制項的標題列上。動詞命令功能表會提供各種動作，使用者可將這些動作套用至控制項。

  9. 按一下 TextDisplayWebPart 控制項上的動詞命令功能表。

    下拉式功能表隨即出現。

  10. 在動詞命令功能表中，按一下 [編輯] 選項。

    在 <asp:editorzone> 項目中宣告的特殊編輯 UI 隨即出現。使用這些控制項，可以變更自訂控制項的配置和外觀。

  11. 使用編輯 UI，變更自訂控制項的標題。按一下 [套用] 套用變更。

  12. 將您的滑鼠指標置於自訂控制項的標題列。按一下標題列，並將控制項從 WebPartZone1 拖曳至 WebPartZone2。

  13. 使用 [Display Mode] 下拉式清單控制項，將網頁變更回瀏覽模式。

    網頁將會看起來和下列螢幕擷取畫面相似。

    以各種顯示模式進行變更後的網頁

請參閱

工作

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

概念

Web 組件頁面顯示模式

參考

Web 組件控制項集合概觀

WebPartDisplayMode