Exemplarische Vorgehensweise: Erstellen einer Webparts-Seite

Artikel
10/22/2014

Aktualisiert: November 2007

Diese exemplarische Vorgehensweise bietet eine praktische Darstellung der grundlegenden Komponenten und Aufgaben zum Erstellen von Webseiten mit Webparts-Steuerelementen.

Für viele Webanwendungen ist es sinnvoll, wenn der anzuzeigende Inhalt vom Benutzer ausgewählt und angeordnet werden kann. Das ASP.NET-Webparts-Feature besteht aus einem Satz von Steuerelementen zum Erstellen von Webseiten, auf denen modularer Inhalt angezeigt wird und auf denen Benutzer die Darstellung und den Inhalt entsprechend ihren Vorstellungen ändern können. Eine allgemeine Einführung in Webparts finden Sie unter Übersicht über ASP.NET-Webparts. Eine Beschreibung der Hauptkomponenten in der Gruppe von Webparts-Steuerelementen, von denen einige in dieser exemplarischen Vorgehensweise verwendet werden, finden Sie unter Übersicht über die Gruppe der Webparts-Steuerelemente.

In dieser exemplarischen Vorgehensweise verwenden Sie Webparts-Steuerelemente zum Erstellen einer Webseite, die vom Benutzer geändert und personalisiert werden kann. Zu den Aufgaben in dieser exemplarischen Vorgehensweise gehören:

Hinzufügen von Webparts-Steuerelementen zu einer Seite.
Erstellen eines benutzerdefinierten Benutzersteuerelements und Verwenden dieses Steuerelements als Webparts-Steuerelement.
Zulassen, dass Benutzer das Layout der Webparts-Steuerelemente auf der Seite personalisieren können.
Zulassen, dass Benutzer die Darstellung eines Webparts-Steuerelements bearbeiten können.
Zulassen, dass Benutzer aus einem Katalog verfügbarer Webparts-Steuerelemente auswählen können.

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. Andernfalls finden Sie ausführliche Informationen zum Erstellen eines virtuellen Verzeichnisses oder einer Website unter Gewusst wie: Erstellen und Konfigurieren von virtuellen Verzeichnissen in IIS 5.0 und 6.0 oder Gewusst wie: Erstellen und Konfigurieren von lokalen ASP.NET-Websites in IIS 6.0.
Ein konfigurierter Personalisierungsanbieter und eine konfigurierte Datenbank. Die Webparts-Personalisierung ist standardmäßig aktiviert. Dabei wird der SQL-Personalisierungsanbieter (SqlPersonalizationProvider) mit Microsoft SQL Server Standard Edition zum Speichern der Personalisierungsdaten verwendet. 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. Ausführliche 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.

Erstellen einer einfachen Seite mit Webparts

In diesem Teil der exemplarischen Vorgehensweise erstellen Sie eine Seite, auf der Webparts zum Anzeigen von statischem Inhalt verwendet werden.

Hinweis:
Sie müssen nichts unternehmen, um die Webparts-Personalisierung zu aktivieren. Diese ist im Webparts-Steuerelementsatz standardmäßig aktiviert. Wenn Sie eine Webparts-Seite auf einer Website das erste Mal ausführen, wird durch ASP.NET ein Standardpersonalisierungsanbieter festgelegt, in dem die Personalisierungseinstellungen des Benutzers gespeichert werden. Der Standardanbieter verwendet eine in einem Unterverzeichnis des Verzeichnisses der Website erstellte Datenbank. Weitere Informationen zur Personalisierung finden Sie unter Übersicht über die Webparts-Personalisierung.

Sie müssen nichts unternehmen, um die Webparts-Personalisierung zu aktivieren. Diese ist im Webparts-Steuerelementsatz standardmäßig aktiviert. Wenn Sie eine Webparts-Seite auf einer Website das erste Mal ausführen, wird durch ASP.NET ein Standardpersonalisierungsanbieter festgelegt, in dem die Personalisierungseinstellungen des Benutzers gespeichert werden. Der Standardanbieter verwendet eine in einem Unterverzeichnis des Verzeichnisses der Website erstellte Datenbank. Weitere Informationen zur Personalisierung finden Sie unter Übersicht über die Webparts-Personalisierung.

So erstellen Sie eine Webseite

Erstellen Sie im Text-Editor eine neue Datei, und fügen Sie am Anfang der Datei die folgende Seitendeklaration hinzu.
```
<%@ page language="VB" %>
```
```
<%@ page language="C#" %>
```

Geben Sie unterhalb der Seitendeklaration Tags ein, um eine vollständige Seitenstruktur zu erstellen. Dies wird im folgenden Codebeispiel veranschaulicht.

Beachten Sie, dass die Seite eine leere Tabelle mit einer Zeile und drei Spalten umfasst. Die Tabelle enthält die Webparts-Steuerelemente, die Sie später hinzufügen.

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

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

Im nächsten Schritt werden Zonen eingerichtet. Zonen sind zusammengesetzte Steuerelemente, die sich in einem angegebenen Bereich einer Seite befinden und Webparts-Steuerelemente enthalten.

So fügen Sie der Seite Zonen hinzu

Fügen Sie direkt unter dem <form>-Element auf der Seite ein <asp:webpartmanager>-Element hinzu. Dies wird im folgenden Beispiel veranschaulicht.
```
<asp:webpartmanager id="WebPartManager1"  />
```
Für alle Seiten, die Webparts-Steuerelemente verwenden, ist das WebPartManager-Steuerelement erforderlich.
Fügen Sie innerhalb des ersten <td>-Elements in der Tabelle ein <asp:webpartzone>-Element hinzu, und weisen Sie dessen Eigenschaftenwerte zu. Dies wird im folgenden Codebeispiel veranschaulicht.

Beachten Sie, dass das <asp:webpartzone>-Element auch ein <zonetemplate>-Element enthält. Die Webparts-Steuerelemente werden innerhalb des <zonetemplate>-Elements platziert.
```
<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td valign="top">
      <asp:webpartzone id="SideBarZone"  
        headertext="Sidebar">
        <zonetemplate>
        </zonetemplate>
      </asp:webpartzone>
    </td>
```
Fügen Sie innerhalb des zweiten <td>-Elements in der Tabelle ein <asp:webpartzone>-Element hinzu, und weisen Sie dessen Eigenschaftenwerte zu, wie im folgenden Codebeispiel dargestellt:
```
<td valign="top">
   <asp:webpartzone id="MainZone"  headertext="Main">
     <zonetemplate>
     </zonetemplate>
   </asp:webpartzone>
</td>
```
Speichern Sie die Datei WebPartsDemo.aspx.

Die Seite enthält nun zwei Zonen, die Sie getrennt steuern können. Beide Zonen enthalten allerdings noch keinen Inhalt, dieser wird daher im nächsten Schritt erstellt. Für diese exemplarische Vorgehensweise arbeiten Sie mit Webparts-Steuerelementen, in denen nur statischer Inhalt angezeigt wird.

Das Layout der Webparts-Zone wird mit einem <zonetemplate>-Element angegeben. Innerhalb der Zonenvorlage können Sie ein beliebiges Webserver-Steuerelement hinzufügen, z. B. ein benutzerdefiniertes Webparts-Steuerelement, ein Benutzersteuerelement oder ein vorhandenes Serversteuerelement. In dieser exemplarischen Vorgehensweise verwenden Sie das Label-Serversteuerelement, in das Sie einfach statischen Text einfügen. Wenn Sie ein gewöhnliches ASP.NET-Serversteuerelement in einer WebPartZone-Zone platzieren, wird es von ASP.NET zur Laufzeit wie ein Webparts-Steuerelement behandelt. Daher können Sie die meisten Webparts-Features mit einem Standardserversteuerelement verwenden.

So erstellen Sie Inhalt für die Zonen

Fügen Sie innerhalb des <zonetemplate>-Elements für die Main-Zone ein <asp:label>-Element mit Inhalt hinzu, wie im folgenden Codebeispiel dargestellt:

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

Speichern Sie die Datei WebPartsDemo.aspx.
Erstellen Sie eine neue Datei im Text-Editor.

Diese Datei enthält ein Benutzersteuerelement, das der Seite auch als Webparts-Steuerelement hinzugefügt werden kann.

Fügen Sie am oberen Rand der neuen Datei eine Steuerelementdeklaration hinzu. Dies wird im folgenden Beispiel gezeigt:

<%@ control language="VB" classname="SearchUserControl" %>

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

Hinweis:
Das Search-Steuerelement für diese exemplarische Vorgehensweise implementiert nicht die eigentlichen Suchfunktionen. Es wird lediglich zum Veranschaulichen von Webparts-Features verwendet.

Fügen Sie unterhalb der Steuerelementdeklaration ein <script>-Tagpaar hinzu, und fügen Sie innerhalb dieser Tags Code für das Erstellen einer personalisierbaren Eigenschaft hinzu.

Beachten Sie, dass die ResultsPerPage-Eigenschaft über ein Personalizable-Attribut verfügt. Mit dieser Eigenschaft können Benutzer des Steuerelements festlegen, wie viele Suchergebnisse pro Seite angezeigt werden sollen, wenn Sie auf der Benutzeroberfläche ein Edit-Steuerelement zum Ändern der Einstellungen in der Entwurfsansicht bereitstellen.

Stellen Sie sicher, dass der Code für das Steuerelement dem folgenden Codebeispiel ähnelt:
```
<%@ 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>
```

Fügen Sie unterhalb des <script>-Elements ein Textfeld und eine Schaltfläche hinzu, um eine Benutzeroberfläche für ein Search-Steuerelement bereitzustellen, wie im folgenden Codebeispiel dargestellt:

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

Sicherheitshinweis:
Dieses Steuerelement verfügt über ein Textfeld, das Benutzereingaben akzeptiert. Diese stellt ein potenzielles 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.

Geben Sie SearchUserControlVB.ascx oder SearchUserControlCS.ascx als Dateinamen ein (je nach der von Ihnen verwendeten Sprache), und speichern Sie die Datei im gleichen Verzeichnis wie die WebPartsDemo.aspx-Seite.

Nun fügen Sie der Sidebar-Zone zwei Steuerelemente hinzu. Eines enthält eine Liste mit Verknüpfungen, bei dem anderen handelt es sich um das in der vorherigen Prozedur erstellte Benutzersteuerelement. Die Verknüpfungen werden als ein einzelnes Label-Standard-Serversteuerelement hinzugefügt, ähnlich wie bei dem Verfahren, mit dem der statische Text für die Main-Zone erstellt wurde. Obwohl die im Benutzersteuerelement enthaltenen einzelnen Serversteuerelemente direkt in der Zone enthalten sein könnten, sind sie es in diesem Fall jedoch nicht. Stattdessen sind sie Teil des Benutzersteuerelements, das Sie in der vorherigen Prozedur erstellt haben. Dies veranschaulicht ein gängiges Verfahren zum Zusammenfassen von beliebigen Steuerelementen und gewünschten zusätzlichen Funktionen in einem Benutzersteuerelement, auf das dann in einer Zone als Webparts-Steuerelement verwiesen wird.

Zur Laufzeit werden beide Steuerelemente von ASP.NET mit GenericWebPart-Steuerelementen eingebunden. Wenn ein GenericWebPart-Steuerelement ein Webserver-Steuerelement einschließt, ist das generische Webparts-Steuerelement das übergeordnete Element. Sie können über die ChildControl-Eigenschaft des übergeordneten Steuerelements auf das Serversteuerelement zugreifen. Durch generische Part-Steuerelemente können Standard-Webserversteuerelemente das gleiche grundlegende Verhalten und die gleichen Attribute wie Webparts-Steuerelemente aufweisen, die von der WebPart-Klasse abgeleitet werden.

So erstellen Sie Inhalt für die Randleistenzone

Öffnen Sie die Seite WebPartsDemo.aspx im Text-Editor.

Fügen Sie am oberen Seitenrand direkt unterhalb der Seitendeklaration die folgende Deklaration hinzu, um auf das soeben erstellte Benutzersteuerelement zu verweisen.

<%@ register tagprefix="uc1" tagname="SearchUserControl" 
  src="searchusercontrolvb.ascx" %>

<%@ register tagprefix="uc1" tagname="SearchUserControl" 
  src="searchusercontrolcs.ascx" %>

Fügen Sie innerhalb des <zonetemplate>-Elements für die Sidebar-Zone ein Label-Steuerelement hinzu, das mehrere Verknüpfungen enthält. Verweisen Sie unterhalb des Steuerelements auf das zuvor erstellte Benutzersteuerelement, wie im folgenden Codebeispiel dargestellt:

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

Speichern Sie die Datei WebPartsDemo.aspx.

Nun können Sie die Seite testen.

So testen Sie die Seite

Laden Sie die Seite in einem Browser.

Auf der Seite werden die beiden Zonen angezeigt. Jedes Steuerelement auf der Seite wird nun mit einem Pfeil nach unten in der Titelleiste angezeigt. Diese enthält ein Dropdownmenü, das als Verbenmenü bezeichnet wird. Verben sind Aktionen, die für ein Serversteuerelement ausgeführt werden können, z. B. Schließen, Minimieren oder Bearbeiten eines Steuerelements. Jedes Element im Verbenmenü ist ein Verb. In der folgenden Bildschirmabbildung wird die Seite dargestellt.
Klicken Sie in der Titelleiste eines Steuerelements auf den Pfeil nach unten, um dessen Verbenmenü anzuzeigen. Klicken Sie anschließend auf den Link Minimieren.

Das Steuerelement wird minimiert.
Klicken Sie im Verbenmenü auf Wiederherstellen.

Dies veranschaulicht die verschiedenen visuellen Anzeigezustände von Webparts-Steuerelementen.

Aktivieren der Seitenbearbeitung und der Layoutänderung durch Benutzer

Benutzer können das Layout von Webparts-Steuerelementen ändern, indem sie sie in eine andere Zone ziehen. Sie können Benutzern auch das Bearbeiten von Steuerelementeigenschaften ermöglichen, z. B. Darstellung, Layout und Verhalten. Der Webparts-Steuerelementsatz stellt grundlegende Bearbeitungsfunktionen für WebPart-Steuerelemente bereit. (Außerdem können Sie benutzerdefinierte Editor-Steuerelemente erstellen, mit denen die Features von WebPart-Steuerelementen bearbeitet werden können. Dies ist jedoch nicht Thema dieser exemplarischen Vorgehensweise.) Wie die Änderung der Position eines WebPart-Steuerelements hängt auch die Bearbeitung seiner Eigenschaften von einer ASP.NET-Personalisierung ab, damit die vom Benutzer vorgenommenen Änderungen gespeichert werden können.

In diesem Teil der exemplarischen Vorgehensweise wird es den Benutzern ermöglicht, die grundlegenden Eigenschaften eines beliebigen WebPart-Steuerelements auf der Seite zu bearbeiten.

So erstellen Sie ein Benutzersteuerelement zum Ändern des Seitenlayouts

Erstellen Sie eine neue Datei im Text-Editor, und fügen Sie den folgenden Code ein.

Von diesem Code werden Features des Webparts-Steuerelementsatzes verwendet, mit denen der Anzeigemodus einer Seite geändert werden kann. In einigen Anzeigemodi kann auch die Darstellung und das Layout der Seite geändert werden.

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

Nennen Sie die Datei Displaymodemenu.ascx, und speichern Sie sie in dem Verzeichnis, das Sie auch für die anderen Seiten verwenden.

So ermöglichen Sie Benutzern das Ändern des Layouts

Fügen Sie auf der Seite WebPartsDemo.aspx eine <register>-Direktive hinzu, um das neue Benutzersteuerelement auf der Seite zu registrieren:

<%@ register TagPrefix="uc2" 
  TagName="DisplayModeMenuVB" 
  Src="DisplayModeMenu.ascx" %>

<%@ register TagPrefix="uc2" 
  TagName="DisplayModeMenuCS" 
  Src="DisplayModeMenu.ascx" %>

Fügen Sie einen deklarativen Verweis auf das Benutzersteuerelement direkt unter dem <asp:webpartmanager>-Element hinzu:
```
<uc2:DisplayModeMenuVB ID="DisplayModeMenu1"  />
```
```
<uc2:DisplayModeMenuCS ID="DisplayModeMenu1"  />
```

Fügen Sie im dritten <td>-Element in der Tabelle ein <asp:editorzone>-Element hinzu. Fügen Sie je eines der Elemente <zonetemplate>, <asp:appearanceeditorpart> und <asp:layouteditorpart> hinzu.

Der Code sollte nun wie im folgenden Beispiel aussehen:

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

        id="AppearanceEditorPart1" />
      <asp:layouteditorpart 

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

Hinweis:
Die beiden zusätzlichen Steuerelemente BehaviorEditorPart und PropertyGridEditorPart werden hier nicht verwendet, da ihre Einrichtung den Umfang dieser exemplarischen Vorgehensweise sprengen würde.

Speichern Sie die Datei WebPartsDemo.aspx.

Sie haben ein Benutzersteuerelement erstellt, mit dem Sie den Anzeigemodus und das Seitenlayout ändern können, und Sie haben auf der primären Webseite auf das Steuerelement verwiesen.

Sie können jetzt die Funktionen zum Bearbeiten von Seiten und zum Ändern des Layouts testen.

So testen Sie Layoutänderungen

Laden Sie die Seite in einem Browser.
Klicken Sie auf das Dropdownmenü Anzeigemodus, und wählen Sie anschließend Bearbeiten.

Die Zonentitel werden angezeigt.
Ziehen Sie das Links-Steuerelement an der Titelleiste aus der Sidebar-Zone in den unteren Bereich der Main-Zone.

Ihre Seite sollte nun der folgenden Bildschirmabbildung ähneln:
Klicken Sie auf das Dropdownmenü Anzeigemodus, und wählen Sie Durchsuchen.

Die Seite wird aktualisiert, die Zonennamen werden ausgeblendet, und das Links-Steuerelement verbleibt dort, wo Sie es positioniert haben.
Schließen Sie den Browser, und laden Sie die Seite anschließend erneut.

Die vorgenommenen Änderungen werden für zukünftige Browsersitzungen gespeichert. Dies zeigt, dass die Personalisierung funktioniert.
Klicken Sie im Menü Anzeigemodus auf Bearbeiten.
Klicken Sie auf den Pfeil, um das Verbenmenü für das Links-Steuerelement anzuzeigen, und klicken Sie anschließend auf das Verb Bearbeiten.

Das EditorZone-Steuerelement wird mit den von Ihnen hinzugefügten EditorPart-Steuerelementen angezeigt.
Ändern Sie im Abschnitt Darstellung des Bearbeitungssteuerelements den Titel in "Favoriten", wählen Sie in der Dropdownliste Chromtyp den Eintrag Nur Titel aus, und klicken Sie dann auf Übernehmen.

In der folgenden Bildschirmabbildung ist die überarbeitete Seite im Bearbeitungsmodus dargestellt:
Klicken Sie auf das Menü Display Mode, und wählen Sie Browse aus, um zurück in den Durchsuchen-Modus zu wechseln.

Das Steuerelement hat jetzt einen aktualisierten Titel und keinen Rahmen, wie in der folgenden Bildschirmabbildung dargestellt:

Hinzufügen von Webparts zur Laufzeit

Sie können es Benutzern auch ermöglichen, ihrer Seite zur Laufzeit Webparts-Steuerelemente hinzuzufügen. Dazu konfigurieren Sie die Seite mit einem Webparts-Katalog, der eine Liste der Webparts-Steuerelemente enthält, die Sie für Benutzer verfügbar machen möchten.

Hinweis:
In dieser exemplarischen Vorgehensweise erstellen Sie eine Vorlage, die FileUpload-Steuerelemente und Calendar-Steuerelemente enthält. Auf diese Weise können Sie die grundlegenden Funktionen des Katalogs testen. Die resultierenden Webparts-Steuerelemente haben allerdings keine echte Funktion. Bei einem benutzerdefinierten Websteuerelement oder Benutzersteuerelement können Sie dieses durch den statischen Inhalt ersetzen.

In dieser exemplarischen Vorgehensweise erstellen Sie eine Vorlage, die FileUpload-Steuerelemente und Calendar-Steuerelemente enthält. Auf diese Weise können Sie die grundlegenden Funktionen des Katalogs testen. Die resultierenden Webparts-Steuerelemente haben allerdings keine echte Funktion. Bei einem benutzerdefinierten Websteuerelement oder Benutzersteuerelement können Sie dieses durch den statischen Inhalt ersetzen.

So ermöglichen Sie Benutzern das Hinzufügen von Webparts zur Laufzeit

Fügen Sie der WebPartsDemo.aspx-Datei Folgendes hinzu:
- Ein <asp:catalogzone>-Element in der dritten Spalte der Tabelle, direkt unter dem <asp:editorzone>-Element.
- Ein <zonetemplate>-Element, das ein <asp:declarativecatalogpart>-Element und ein <webpartstemplate>-Element umfasst.
- Ein <asp:fileupload>-Element sowie ein <asp:calendar>-Element.
Ihr Code sollte dem folgenden Codebeispiel ähneln:
```
<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>
```
Hinweis:

Das EditorZone-Steuerelement und das CatalogZone-Steuerelement können sich beide in der gleichen Tabellenzelle befinden, da sie nicht zur gleichen Zeit angezeigt werden.
Speichern Sie die Datei WebPartsDemo.aspx.

Hinweis:
Das EditorZone-Steuerelement und das CatalogZone-Steuerelement können sich beide in der gleichen Tabellenzelle befinden, da sie nicht zur gleichen Zeit angezeigt werden.

Sie können den Katalog jetzt testen.

So testen Sie den Webparts-Katalog

Laden Sie die Seite in einem Browser.
Klicken Sie auf das Dropdownmenü Anzeigemodus, und wählen Sie anschließend Katalog.

Der Katalog mit dem Namen Add Web Parts wird angezeigt.
Ziehen Sie das Steuerelement Favoriten aus der Main-Zone an den oberen Rand der Sidebar-Zone.
Aktivieren Sie im Katalog Add Web Parts beide Kontrollkästchen, und wählen Sie Main in der Dropdownliste Add to aus.
Klicken Sie im Katalog auf Hinzufügen.

Die Steuerelemente werden der Main-Zone hinzugefügt. Wenn Sie möchten, können Sie der Seite mehrere Instanzen von Steuerelementen aus dem Katalog hinzufügen.

In der folgenden Bildschirmabbildung wird die Seite mit dem Steuerelement zum Uploaden von Dateien und mit dem Kalendersteuerelement in der Main-Zone angezeigt:
Klicken Sie auf das Dropdownmenü Anzeigemodus, und wählen Sie anschließend Durchsuchen.

Der Katalog wird ausgeblendet, und die Seite wird aktualisiert.
Schließen Sie den Browser. Laden Sie die Seite erneut.

Die von Ihnen vorgenommenen Änderungen bleiben erhalten.

Nächste Schritte

In dieser exemplarischen Vorgehensweise wurden die Grundprinzipien der Verwendung einfacher Webparts-Steuerelemente auf einer ASP.NET-Webseite veranschaulicht. Sie können auch komplexere Webparts-Features kennenlernen. Beispielsweise können Sie Webparts-Steuerelemente als Benutzersteuerelemente oder als benutzerdefinierte Steuerelemente erstellen. Weitere Informationen finden Sie in der Dokumentation zur WebPart-Klasse.

Siehe auch

Freigeben über