Exemplarische Vorgehensweise: Wechseln des Anzeigemodus auf einer Webparts-Seite

Artikel
10/22/2014

Aktualisiert: November 2007

In dieser exemplarischen Vorgehensweise werden zwei Methoden zum Wechseln des Anzeigemodus auf einer ASP.NET-Webparts-Seite dargestellt. Außerdem wird veranschaulicht, wie Benutzer zwischen Seitenanzeigemodi wechseln. In dieser exemplarischen Vorgehensweise werden die folgenden Themen behandelt:

Erstellen eines benutzerdefinierten Benutzersteuerelements, mit dem zwischen Anzeigemodi auf einer Webseite gewechselt werden kann, die Webparts-Steuerelemente enthält.
Wechseln zwischen den verschiedenen Anzeigemodi auf einer Webparts-Seite.

Weitere Informationen zu Anzeigemodi und ihrer Verwendung finden Sie unter Anzeigemodi für Webparts-Seiten.

Vorbereitungsmaßnahmen

Für die Durchführung dieser exemplarischen Vorgehensweise benötigen Sie Folgendes:

Internetinformationsdienste (IIS) müssen auf dem Computer installiert und konfiguriert sein, der die Website hostet. Ausführliche Informationen zur Installation und Konfiguration von IIS finden Sie in der IIS-Hilfe, die in der Installation enthalten ist, oder in der IIS-Onlinedokumentation auf der Microsoft TechNet-Site (Internet Information Services 6.0 Technical Resources).
Eine ASP.NET-Website, die einzelne Benutzer identifizieren kann. Wenn Sie bereits eine solche Website konfiguriert haben, können Sie sie als Ausgangspunkt für diese exemplarische Vorgehensweise verwenden. Ansonsten finden Sie ausführliche Informationen zum Erstellen eines virtuellen Verzeichnisses oder einer virtuellen Site unter Gewusst wie: Erstellen und Konfigurieren von virtuellen Verzeichnissen in IIS 5.0 und 6.0.
Ein konfigurierter Personalisierungsanbieter und eine konfigurierte Datenbank. Die Webparts-Personalisierung ist in der Standardeinstellung aktiviert und verwendet den SQL-Personalisierungsanbieter (SqlPersonalizationProvider) mit der SQL Server Express Edition (SSE) zum Speichern von Personalisierungsdaten. In dieser exemplarischen Vorgehensweise werden SSE und der SQL-Standardanbieter verwendet. Wenn Sie SSE installiert haben, wird keine Konfiguration benötigt. SSE ist mit Microsoft Visual Studio 2005 als optionaler Teil der Installation oder als kostenloser Download verfügbar. Ausführliche Informationen finden Sie auf der Webseite Microsoft SQL Server 2005 Express Edition. Um eine Vollversion von SQL Server verwenden zu können, müssen Sie eine Datenbank für ASP.NET-Anwendungsdienste installieren und konfigurieren sowie den SQL-Personalisierungsanbieter für eine Verbindung mit dieser Datenbank konfigurieren. Weitere Informationen finden Sie unter Erstellen und Konfigurieren der Datenbank für die Anwendungsdienste für SQL Server. Sie können auch einen benutzerdefinierten Anbieter erstellen und konfigurieren, der mit anderen, Nicht-SQL-Datenbanken oder Speicherlösungen verwendet wird. Ausführliche Informationen und eine Codebeispiel finden Sie unter Implementieren eines Mitgliedschaftsanbieters.
Ein benutzerdefiniertes Webparts-Steuerelement, das von der WebPart-Klasse abgeleitet ist und dem Katalog auf der Webparts-Seite hinzugefügt werden kann. Ein Beispiel für ein benutzerdefiniertes WebPart-Steuerelement und dafür, wie auf einer Seite darauf verwiesen wird, finden Sie im Codebeispiel für das TextDisplayWebPart-Steuerelement in der Dokumentation zur WebPartDisplayMode-Klasse.

Erstellen eines Benutzersteuerelements zum Wechseln des Anzeigemodus

In diesem Abschnitt erstellen Sie ein Benutzersteuerelement, das einer beliebigen Seite hinzugefügt werden kann, die Webparts-Steuerelemente enthält, damit Benutzer auf einfache Weise zwischen den verschiedenen Seitenanzeigemodi wechseln können.

So erstellen Sie ein Benutzersteuerelement zum Wechseln des Anzeigemodus

Erstellen Sie in einem Text-Editor eine neue Datei.

Fügen Sie am Anfang der Datei eine Steuerelementdeklaration hinzu, wie im folgenden Codebeispiel dargestellt:

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

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

Fügen Sie der Seite unterhalb der Steuerelementdeklaration folgendes Markup hinzu.

Mithilfe dieses Markups wird die Benutzeroberfläche des Steuerelements erstellt, das aus drei Hauptteilen besteht:

Ein Dropdownlisten-Steuerelement (ein <asp:dropdownlist>-Element), mit dem Benutzer den Anzeigemodus wechseln können.
Ein Hyperlink (ein <asp:linkbutton>-Element), mit dem ein Benutzer die benutzerspezifischen Personalisierungsdaten auf der Seite zurücksetzten kann, wodurch die Seite wieder das Standarderscheinungsbild und -layout vor den Benutzeränderungen annimmt.
Ein Paar Schaltflächen-Steuerelemente (zwei <asp:radiobutton>-Elemente), mit denen Benutzer zwischen dem Benutzerpersonalisierungsbereich (Standardeinstellung) und dem freigegebenen Personalisierungsbereich wechseln können. Wenn der aktuelle Benutzer die Seite personalisiert, bestimmt der Personalisierungsbereich, welchen Benutzern die Auswirkungen der Personalisierung angezeigt werden.

Der Code sollte folgendem Codeblock entsprechen:

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

Benennen Sie die Datei mit DisplaymodemenuCS.ascx oder mit DisplaymodemenuVB.ascx (entsprechend der im Beispiel verwendeten Programmiersprache), und speichern Sie die Datei im Ordner für das virtuelle Verzeichnis oder für die Website, die Sie in dieser exemplarischen Vorgehensweise verwenden.

So fügen Sie dem Benutzersteuerelement Anzeigemodusfunktionen hinzu

Fügen Sie der Quelldatei des Benutzersteuerelements ein <script>-Tagpaar direkt über dem öffnenden <div>-Tag auf der Seite hinzu, und fügen Sie innerhalb des öffnenden <script>-Tags ein -Attribut hinzu.

Fügen Sie dem <script>-Abschnitt folgenden Code hinzu, damit Benutzer den Anzeigemodus der Seite ändern, die Personalisierungsdaten auf der Seite zurücksetzen und zwischen dem Benutzer- und dem freigegebenen Personalisierungsbereich umschalten können.

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

Beachten Sie im Code Folgendes:

Bei der InitComplete-Methode bestimmt der Code, welche Anzeigemodi aktuell auf der Seite verfügbar sind, und füllt das Dropdownlisten-Steuerelement mit Anzeigemodi. Der Code legt auch fest, ob der aktuelle Benutzer über Zugang zum freigegebenen Personalisierungsbereich der Seite verfügt, und wählt das entsprechende Optionsfeld-Steuerelement aus.
Die DisplayModeDropdown_SelectedIndexChanged-Methode ändert dann den Anzeigemodus der Seite mithilfe des WebPartManager-Steuerelements und des vom Benutzer ausgewählten Modus.
Die LinkButton1_Click-Methode setzt den Personalisierungszustand auf der Seite zurück, sodass alle Benutzerpersonalisierungsdaten für die Seite aus dem Personalisierungsdatenspeicher gelöscht werden und die Seite in ihren Standardzustand zurückgesetzt wird.
Die RadioButton1_CheckChanged-Methode und die RadioButton2_CheckChanged-Methode schalten den Personalisierungsbereich entweder auf den Benutzerbereich oder den freigegebenen Bereich um.

Speichern und schließen Sie die Datei.

Erstellen einer Webseite, die als Host für das Anzeigemodi-Steuerelement fungieren soll

Nachdem Sie ein Benutzersteuerelement zum Ändern der Anzeigemodi erstellt haben, können Sie eine Webseite erstellen, die das Benutzersteuerelement hostet und Webparts-Zonen und weitere Serversteuerelemente enthält, die die Webparts-Funktionen zur Verfügung stellen.

So erstellen Sie eine Webseite, deren Anzeigemodus gewechselt werden kann

Fügen Sie die kompilierte Assembly für das benutzerdefinierte Steuerelement dem Ordner Bin der Website hinzu.

Als Voraussetzung für diesen Schritt der exemplarischen Vorgehensweise benötigen Sie ein kompiliertes benutzerdefiniertes WebPart-Steuerelement. In dieser exemplarischen Vorgehensweise wird das benutzerdefinierte Steuerelement TextDisplayWebPart verwendet, das im Übersichtsthema zur WebPartDisplayMode-Klasse verfügbar ist. Die kompilierte Assembly sollte je nach verwendeter Programmiersprache mit TextDisplayWebPartCS.dll oder TextDisplayWebPartVB.dll benannt werden.

Sicherheitshinweis:
Dieses Steuerelement verfügt über ein Textfeld für Benutzereingaben. Dies stellt ein potentielles Sicherheitsrisiko dar. Standardmäßig werden die Benutzereingaben von ASP.NET-Webseiten validiert, um sicherzustellen, dass die Eingabe keine Skript- oder HTML-Elemente enthält. Weitere Informationen finden Sie unter Übersicht über Skriptangriffe.

Erstellen Sie in einem Text-Editor eine neue Datei.
Fügen Sie am oberen Rand der Datei eine Seitendeklaration und zwei register-Direktiven hinzu. Die eine register-Direktive ist für das Benutzersteuerelement bestimmt, die andere ist für das kompilierte benutzerdefinierte WebPart-Steuerelement bestimmt, das in dieser exemplarischen Vorgehensweise verwendet wird. Das Assembly-Attribut der Direktive muss auf den Namen der Assemblydatei des benutzerdefinierten Steuerelements (allerdings ohne Dateinamenerweiterung) verweisen.
```
<%@ 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"%>
```

Fügen Sie unterhalb der register-Direktive folgenden Codeblock hinzu, mit dem Sie die Seite manuell in den Katalogmodus umschalten können:

<!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>

Fügen Sie der Datei nach dem Codeblock das folgende Markup hinzu.

Dieses Codebeispiel enthält mehrere Features, die auf einer Webparts-Seite erforderlich sind, unter anderem ein <asp:webpartmanager>-Element, Webparts-Zonen, die den möglichen Anzeigemodi der Seite entsprechen, sowie einige Steuerelemente. Weitere Informationen dazu finden Sie unter Exemplarische Vorgehensweise: Erstellen einer Webparts-Seite.

Der Code für den Rest der Seite sollte dem folgenden Codeblock entsprechen.

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

Benennen Sie die Datei mit Displaymodes.aspx, und speichern Sie sie im Verzeichnis der Website.

Testen der Webseite zum Ändern der Anzeigemodi

Nun haben Sie alle Elemente erstellt, die für das Ausführen einer Webseite erforderlich sind, die Webparts-Steuerelemente enthält und einen Wechsel zwischen verschiedenen Seitenanzeigemodi ermöglicht.

So testen Sie die Seite und wechseln den Anzeigemodus

Laden Sie die Seite in einem Browser.

Die Seite sollte nun der folgenden Bildschirmabbildung ähneln:

Seite mit Steuerelement zum Wechseln des Anzeigemodus

Klicken Sie auf das Dropdownlisten-Steuerelement Anzeigemodus.

Beachten Sie die verschiedenen Anzeigemodi, die auf der Seite verfügbar sind. Da die Seite die Steuerelemente WebPartZone, EditorZone und CatalogZone enthält, werden in der Dropdownliste zusätzlich zum Standardanzeigemodus Durchsuchen auch entsprechende Anzeigemodi für jeden der Zonentypen angezeigt.

Hinweis:
Die Seite kann außerdem ein ConnectionsZone-Steuerelement enthalten, mit dem Sie Verbindungen zwischen Steuerelementen herstellen können. Durch dieses Steuerelement wird ein Anzeigemodus für die Verbindung zur Dropdownliste hinzugefügt. Verbindungen werden im Rahmen dieser exemplarischen Vorgehensweise jedoch nicht erläutert.

Wählen Sie in der Dropdownliste den Modus Katalog aus.

Die Benutzeroberfläche des Katalogmodus wird angezeigt. Weiterhin wird das TextDisplayWebPart-Steuerelement im Katalog angezeigt und kann zur Seite hinzugefügt werden.
Klicken Sie auf die Schaltfläche Schließen, um die Seite wieder im Durchsuchen-Modus anzuzeigen.
Alternativ können Sie den Anzeigemodus auch ohne Verwendung des Benutzersteuerelements wechseln, indem Sie im unteren Bereich der Seite auf die Schaltfläche Katalogmodus klicken. Der Code für diesen Wechsel wird in der Button1_Click-Methode der Webseite angezeigt.

Die Seite wechselt in den Katalogmodus.
Aktivieren Sie das Kontrollkästchen neben dem benutzerdefinierten Steuerelement im Katalog, und klicken Sie auf Hinzufügen, um es der Seite hinzuzufügen.
Klicken Sie auf Schließen, um die Seite wieder im Durchsuchen-Modus anzuzeigen.

Das hinzugefügte Steuerelement wird jetzt auf der Seite angezeigt.
Wählen Sie im Dropdownlisten-Steuerelement Anzeigemodus die Option Bearbeiten aus.

Die Seite wechselt in den Bearbeitungsmodus. Die Titel der Zonen werden angezeigt, und auf der Titelleiste jedes Serversteuerelements, das sich in einer WebPartZone befindet, wird eine Verbenmenü-Schaltfläche in Form eines kleinen Dreiecks angezeigt. Im Verbenmenü sind verschiedene Aktionen verfügbar, die Benutzer auf ein Steuerelement anwenden können.
Klicken Sie auf das Verbenmenü des TextDisplayWebPart-Steuerelements.

Ein Dropdownmenü wird angezeigt.
Klicken Sie im Verbenmenü auf die Option Bearbeiten.

Es wird die Benutzeroberfläche zum Bearbeiten angezeigt, die innerhalb des <asp:editorzone>-Elements deklariert ist. Mit diesen Steuerelementen können Sie das Layout und das Erscheinungsbild des benutzerdefinierten Steuerelements ändern.
Verwenden Sie die Benutzeroberfläche zum Bearbeiten, um den Titel des benutzerdefinierten Steuerelements zu ändern. Klicken Sie dann auf Übernehmen, um die Änderungen zu übernehmen.
Positionieren Sie den Mauszeiger auf der Titelleiste des benutzerdefinierten Steuerelements. Klicken Sie auf die Titelleiste, und ziehen Sie das Steuerelement von WebPartZone1 in WebPartZone2.
Wechseln Sie mithilfe des Dropdownlisten-Steuerelements Anzeigemodus wieder in den Durchsuchen-Modus der Seite.

Die Seite sollte nun der folgenden Bildschirmabbildung ähneln.

Seite nach dem Vornehmen von Änderungen in verschiedenen Anzeigemodi

Siehe auch

Freigeben über