Exemplarische Vorgehensweise: Erstellen einer Webparts-Seite in Visual Web Developer
Aktualisiert: November 2007
Diese exemplarische Vorgehensweise enthält eine praktische Demonstration der wesentlichen Komponenten und Aufgaben zum Erstellen von Webseiten, die Webparts-Steuerelemente in einem visuellen Seitenentwurfstool wie Microsoft Visual Studio 2005 verwenden.
In vielen Webanwendungen ist es sinnvoll, die Darstellung von Inhalt ändern zu können und den Benutzern die Möglichkeit zu geben, den gewünschten Inhalt auszuwählen und anzuordnen. Mithilfe von ASP.NET-Webparts können Sie Webseiten mit modularem Inhalt erstellen, die es Benutzern ermöglichen, die Darstellung und den Inhalt an ihre jeweiligen Anforderungen anzupassen. Eine allgemeine Einführung in Webparts finden Sie unter Übersicht über ASP.NET-Webparts. Eine Übersicht über den Webparts-Steuerelementsatz finden Sie unter Übersicht über die Gruppe der Webparts-Steuerelemente.
In dieser exemplarischen Vorgehensweise erstellen Sie eine Seite, auf der Webparts-Steuerelemente zum Erstellen einer Webseite verwendet werden, die Benutzer ändern oder personalisieren können. 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:
Eine Website, auf der einzelne Benutzer identifiziert werden können. Wenn Ihre Website bereits mit ASP.NET-Mitgliedschaft konfiguriert ist, können Sie sie für diese exemplarische Vorgehensweise verwenden. Andernfalls stellt Ihnen diese exemplarische Vorgehensweise Anweisungen bereit, wie Sie die Website so konfigurieren, dass Sie über den Namen Ihres Windows-Benutzerkontos identifiziert werden können.
Eine visuelle Entwurfsumgebung zum Erstellen von Webseiten. In dieser exemplarischen Vorgehensweise wird Visual Studio 2005 verwendet.
Ein konfigurierter Personalisierungsanbieter und eine Datenbank. Die Webparts-Personalisierung ist standardmäßig aktiviert und verwendet den SQL-Personalisierungsanbieter (SqlPersonalizationProvider) mit Microsoft SQL Server Express Edition zum Speichern von Personalisierungsdaten. In dieser exemplarischen Vorgehensweise werden SQL Server Express und der SQL-Standardanbieter verwendet. Wenn Sie SQL Server Express bereits installiert haben, ist keine Konfigurierung erforderlich. SQL Server Express ist in Microsoft Visual Studio 2005 als optionaler Bestandteil der Installation verfügbar oder kann kostenlos von Microsoft.com heruntergeladen werden. Zum Verwenden einer Vollversion von SQL Server müssen Sie eine ASP.NET-Datenbank für die Anwendungsdienste installieren und konfigurieren sowie den SQL-Personalisierungsanbieter zum Herstellen einer Verbindung mit dieser Datenbank konfigurieren. Ausführliche Informationen finden Sie unter Erstellen und Konfigurieren der Datenbank für die Anwendungsdienste für SQL Server.
Erstellen und Konfigurieren der Website
Für diese exemplarische Vorgehensweise müssen Sie über eine Benutzeridentität verfügen, damit Ihre Webparts-Einstellungen Ihnen zugeordnet werden können. Wenn Sie bereits eine Website zur Verwendung von Mitgliedschaft konfiguriert haben, sollten Sie diese Website verwenden. Andernfalls können Sie eine neue Website erstellen und Ihren aktuellen Windows-Benutzernamen als Benutzeridentität verwenden.
So erstellen Sie eine neue Webseite
Erstellen Sie in Visual Studio eine neue ASP.NET-Website.
Ausführliche Informationen finden Sie unter Exemplarische Vorgehensweise: Erstellen einer Website mit Mitgliedschaft und Benutzeranmeldung.
Erstellen einer einfachen Seite mit Webparts
In diesem Teil der exemplarischen Vorgehensweise erstellen Sie eine Seite, auf der Webparts-Steuerelemente zum Anzeigen von statischem Inhalt verwendet werden. Der erste Schritt bei der Verwendung von Webparts besteht darin, eine Seite mit zwei erforderlichen Elementen zu erstellen. Zunächst wird für eine Webparts-Seite ein WebPartManager-Steuerelement benötigt, um alle Webparts-Steuerelemente zu koordinieren. Außerdem sind für eine Webparts-Seite eine oder mehrere Zonen erforderlich. Dabei handelt es sich um zusammengesetzte Steuerelemente, die WebPart-Steuerelemente oder andere Serversteuerelemente enthalten und einen bestimmten Bereich einer Seite einnehmen.
.gif "Hinweis") 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. Weitere Informationen zur Personalisierung finden Sie unter Übersicht über die Webparts-Personalisierung. |
So erstellen Sie eine Seite, die Webparts-Steuerelemente enthalten soll
Schließen Sie die Standardseite, und fügen Sie eine neue Seite mit dem Namen WebPartsDemo.aspx hinzu.
Wechseln Sie zur Entwurfsansicht.
Klicken Sie im Menü Ansicht auf Visuelle Hilfen, und stellen Sie dann sicher, dass die Optionen Nicht sichtbare ASP.NET-Steuerelemente und Details ausgewählt sind.
Dies ermöglicht Ihnen, Layouttags und Steuerelemente anzuzeigen, die keine Benutzeroberfläche besitzen.
Fügen Sie direkt vor dem body-Element eine neue Zeile hinzu.
Hinweis:Wenn das nicht möglich ist, wählen Sie das div-Element aus, und drücken Sie zwei Mal die ESC-Taste, um das body-Element auszuwählen, drücken Sie die NACH-LINKS-TASTE, und drücken Sie dann die EINGABETASTE.
Positionieren Sie die Einfügemarke vor dem Zeilenumbruchzeichen.
Wählen Sie auf der Symbolleiste in der Liste Blockformat den Eintrag Überschrift 1 aus.
Fügen Sie in der Überschrift den Text Webparts-Demonstrationsseite hinzu.
Ziehen Sie von der Registerkarte WebParts der Toolbox ein WebPartManager-Steuerelement auf die Seite, und zwar zwischen dem Zeilenumbruchzeichen und dem Starttag <div>.
Da das WebPartManager-Steuerelement keine Ausgabe wiedergibt, wird es auf der Designeroberfläche als graues Feld angezeigt.
Positionieren Sie die Einfügemarke innerhalb des div-Elements.
Klicken Sie im Menü Tabelle auf Tabelle einfügen, geben Sie eine Tabelle mit einer Zeile und drei Spalten an, und klicken Sie dann auf OK.
Ziehen Sie ein WebPartZone-Steuerelement in die linke Tabellenspalte. Klicken Sie mit der rechten Maustaste auf das WebPartZone-Steuerelement, wählen Sie Eigenschaften aus, und legen Sie die folgenden Eigenschaften fest:
ID: SidebarZone
HeaderText: Sidebar
Ziehen Sie ein zweites WebPartZone-Steuerelement in die mittlere Tabellenspalte, und legen Sie die folgenden Eigenschaften fest:
ID: MainZone
HeaderText: Main
Speichern Sie die Datei, schließen Sie die Datei jedoch noch nicht.
Die Seite verfügt jetzt über zwei verschiedene Zonen, die Sie getrennt steuern können. Keine der Zonen hat jedoch Inhalt. Der nächste Schritt besteht daher darin, Inhalt zu erstellen. Für diese exemplarische Vorgehensweise arbeiten Sie mit Webparts-Steuerelementen, in denen nur statischer Inhalt angezeigt wird.
Das Layout einer Webparts-Zone wird von einem zonetemplate-Element angegeben. Innerhalb der Zonenvorlage können Sie ein beliebiges ASP.NET-Steuerelement hinzufügen, z. B. ein benutzerdefiniertes Webparts-Steuerelement, ein Benutzersteuerelement oder ein vorhandenes Serversteuerelement. Hier verwenden Sie das Label-Steuerelement und fügen nur statischen Text hinzu. Wenn Sie ein reguläres Serversteuerelement in einer WebPartZone-Zone platzieren, wird das Steuerelement zur Laufzeit von ASP.NET als Webparts-Steuerelement behandelt. Dadurch werden die Webparts-Features für das Steuerelement aktiviert.
So erstellen Sie Inhalt für die Hauptzone
Ziehen Sie in der Entwurfsansicht ein Label-Steuerelement von der Registerkarte Standard der Toolbox in den Inhaltsbereich der Zone, deren ID-Eigenschaft auf MainZone festgelegt ist.
Wechseln Sie zur Quellansicht.
Beachten Sie, dass das Label-Steuerelement hinzugefügt wurde, damit das zonetemplate-Element in MainZone eingeschlossen wird.
Fügen Sie dem asp:label-Element ein Attribut mit dem Namen title hinzu, und legen Sie dessen Wert auf "Content" fest. Entfernen Sie das Text="Label"-Attribut aus dem asp:label-Element. Fügen Sie im asp:label-Element Text hinzu, z. B. <h2>Welcome to my Home Page</h2>. Der Code sollte wie folgt aussehen:
<asp:webpartzone id="MainZone" headertext="Main"> <zonetemplate> <asp:label id="Label1" title="Content"> <h2>Welcome to My Home Page</h2> </asp:label> </zonetemplate> </asp:webpartzone>Speichern Sie die Datei.
Erstellen Sie danach ein Benutzersteuerelement, das der Seite ebenfalls als Webparts-Steuerelement hinzugefügt werden kann.
So erstellen Sie ein Benutzersteuerelement
Fügen Sie der Site ein neues Web-Benutzersteuerelement mit dem Namen SearchUserControl.ascx hinzu, das als Steuerelement für Suchvorgänge fungieren soll, und stellen Sie sicher, dass das Kontrollkästchen Code in eigener Datei platzieren deaktiviert ist.
Hinweis:Das Benutzersteuerelement für diese exemplarische Vorgehensweise implementiert keine eigentliche Suchfunktion. Es wird lediglich verwendet, um Webparts-Features zu veranschaulichen.
Wechseln Sie zur Entwurfsansicht.
Ziehen Sie von der Registerkarte Standard der Toolbox ein TextBox-Steuerelement auf die Seite.
Platzieren Sie die Einfügemarke hinter dem gerade hinzugefügten Textfeld, und drücken Sie die EINGABETASTE, um eine neue Zeile hinzuzufügen.
Ziehen Sie ein Button-Steuerelement auf die Seite, und zwar in die neue Zeile unter dem gerade hinzugefügten Textfeld.
Wechseln Sie zur Quellansicht, und stellen Sie dann sicher, dass der Quellcode für das Benutzersteuerelement wie im folgenden Beispiel aussieht:
<%@ control language="VB" classname="SearchUserControl" %> <asp:textbox id="TextBox1"></asp:textbox> <br /> <asp:button id="Button1" text="Search" /><%@ control language="C#" classname="SearchUserControl" %> <asp:textbox id=" TextBox1"></asp:textbox> <br /> <asp:button id=" Button1" text="Search" />Speichern und schließen Sie die Datei.
.gif "Sicherheitshinweis")
Sicherheitshinweis:Dieses Steuerelement verfügt über ein Textfeld, das eine Benutzereingabe akzeptiert. Diese stellt ein potenzielles Sicherheitsrisiko dar. Benutzereingaben auf einer Webseite können möglicherweise schädliche Clientskripts enthalten. Standardmäßig wird die Benutzereingabe von ASP.NET-Webseiten validiert, um sicherzustellen, dass die Eingabe keine HTML-Elemente oder Skript enthält. Solange die Validierung aktiviert ist, müssen Sie Benutzereingaben nicht explizit auf Skript- oder HTML-Elemente überprüfen. Weitere Informationen finden Sie unter Übersicht über Skriptangriffe.
Jetzt können Sie der Randleistenzone Webparts-Steuerelemente hinzufügen. Sie fügen der Randleistenzone zwei Steuerelemente hinzu. Davon enthält eines eine Liste von Verknüpfungen, und das andere ist das in der vorherigen exemplarischen Vorgehensweise erstellte Benutzersteuerelement. Die Verknüpfungen werden als Label-Standard-Serversteuerelemente hinzugefügt, ähnlich wie bei dem Verfahren, mit dem Sie statischen Text für die Hauptzone erstellt haben. Obwohl die im Benutzersteuerelement enthaltenen einzelnen Serversteuerelemente direkt in der Zone enthalten sein könnten (wie das label-Steuerelement), 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 Steuerelementen und gewünschten zusätzlichen Funktionen in einem Benutzersteuerelement, auf das dann in einer Zone als Webparts-Steuerelement verwiesen wird.
Zur Laufzeit werden durch den Webparts-Steuerelementsatz beide Steuerelemente in GenericWebPart-Steuerelemente eingeschlossen. Wenn ein GenericWebPart-Steuerelement ein Webparts-Steuerelement einschließt, ist das generische Part-Steuerelement das übergeordnete Steuerelement, und Sie können über die ChildControl-Eigenschaft des übergeordneten Steuerelements auf das Serversteuerelement zugreifen. Die Verwendung generischer Part-Steuerelemente macht es möglich, dass Standard-Webserver-Steuerelemente das gleiche grundlegende Verhalten und die gleichen Attribute aufweisen, wie Webparts-Steuerelemente, die von der WebPart-Klasse abgeleitet werden.
So fügen Sie der Randleistenzone Webparts-Steuerelemente hinzu
Öffnen Sie die Seite WebPartsDemo.aspx.
Wechseln Sie zur Entwurfsansicht.
Ziehen Sie die von Ihnen erstellte Seite SearchUserControl.ascx mit den Benutzersteuerelementen aus dem Projektmappen-Explorer in die Zone, deren ID-Eigenschaft auf SidebarZone festgelegt ist.
Speichern Sie die Seite WebPartsDemo.aspx.
Wechseln Sie zur Quellansicht.
Fügen Sie im asp:webpartzone-Element für die SidebarZone ein asp:label-Element hinzu, das Verknüpfungen enthält, und fügen Sie im Benutzersteuerelement-Tag ein Title-Attribut mit dem Wert Search hinzu, wie im folgenden Beispiel gezeigt:
<asp:WebPartZone id="SidebarZone" headertext="Sidebar"> <zonetemplate> <asp:label id="linksPart" title="My Links"> <a href="https://www.asp.net">ASP.NET site</a> <br /> <a href="https://www.gotdotnet.com">GotDotNet</a> <br /> <a href="https://www.contoso.com">Contoso.com</a> <br /> </asp:label> <uc1:SearchUserControl id="searchPart" title="Search" /> </zonetemplate> </asp:WebPartZone>Speichern und schließen Sie die Datei.
Jetzt 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. In der folgenden Bildschirmabbildung wird die Seite dargestellt.
Webparts-Demoseite mit zwei Zonen
.gif)
In der Titelleiste jedes Steuerelements wird ein Pfeil nach unten angezeigt, über den Sie auf ein Verbenmenü mit den verfügbaren Aktionen zugreifen können, die Sie für ein Steuerelement ausführen können. Klicken Sie für eines der Steuerelemente auf das Verbenmenü, und klicken Sie dann auf das Minimieren-Verb. Das Steuerelement wird minimiert. Klicken Sie im Verbenmenü auf Wiederherstellen, und das Steuerelement kehrt zu seiner normalen Größe zurück.
Aktivieren der Seitenbearbeitung und der Layoutänderung durch Benutzer
Durch Webparts haben Benutzer die Möglichkeit, das Layout von Webparts-Steuerelementen zu ändern. Dazu ziehen sie diese von einer Zone in eine andere. Benutzer können aber nicht nur WebPart-Steuerelemente von einer Zone in eine andere verschieben, Sie können Benutzern auch die Möglichkeit geben, verschiedene Eigenschaften der Steuerelemente zu ändern, z. B. ihre Darstellung, ihr Layout oder ihr Verhalten. Der Webparts-Steuerelementsatz stellt grundlegende Bearbeitungsfunktionen für WebPart-Steuerelemente bereit. Obwohl dies nicht Thema dieser exemplarischen Vorgehensweise ist, können Sie auch benutzerdefinierte Editorsteuerelemente erstellen, mit denen Benutzer die Features von WebPart-Steuerelementen ändern können. Wie die Änderung der Position eines WebPart-Steuerelements hängt auch die Bearbeitung der Eigenschaften eines Steuerelements von einer ASP.NET-Personalisierung ab, damit die vom Benutzer vorgenommenen Änderungen gespeichert werden können.
In diesem Teil der exemplarischen Vorgehensweise fügen Sie für Benutzer die Möglichkeit hinzu, die grundlegenden Eigenschaften eines beliebigen WebPart-Steuerelements auf der Seite zu ändern. Um diese Features zu aktivieren, fügen Sie der Seite ein weiteres benutzerdefiniertes Steuerelement hinzu, zusammen mit einem asp:editorzone-Element und zwei Bearbeitungssteuerelementen.
So erstellen Sie ein Benutzersteuerelement zum Ändern des Seitenlayouts
Klicken Sie in Visual Studio im Menü Datei auf Neu, und klicken Sie anschließend auf Datei.
Wählen Sie im Dialogfeld Neues Element hinzufügen die Option Web-Benutzersteuerelement aus. Nennen Sie die neue Klasse DisplayModeMenu.ascx. Deaktivieren Sie das Kontrollkästchen Code in eigener Datei platzieren.
Klicken Sie auf Hinzufügen, um das neue Steuerelement zu erstellen.
Wechseln Sie zur Quellansicht.
Entfernen Sie in der neuen Datei den vorhandenen Code, und fügen Sie den folgenden Code ein. Dieses Benutzersteuerelement verwendet Features des Webparts-Steuerelementsatzes, mit denen der Ansichts- oder Anzeigemodus der Seite geändert werden kann und mit denen Sie in bestimmten Anzeigemodi die physische Darstellung und das Layout der Seite ändern können.
<%@ 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=" Display Mode" Font-Bold="true" Font-Size="8" Width="120" /> <asp:DropDownList ID="DisplayModeDropdown" AutoPostBack="true" Width="120" OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" /> <asp:LinkButton ID="LinkButton1" Text="Reset User State" ToolTip="Reset the current user's personalization data for the page." Font-Size="8" OnClick="LinkButton1_Click" /> <asp:Panel ID="Panel2" GroupingText="Personalization Scope" Font-Bold="true" Font-Size="8" Visible="false" > <asp:RadioButton ID="RadioButton1" Text="User" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton1_CheckedChanged" /> <asp:RadioButton ID="RadioButton2" Text="Shared" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton2_CheckedChanged" /> </asp:Panel> </asp:Panel> </div><%@ control language="C#" classname="DisplayModeMenuCS"%> <script > // Use a field to reference the current WebPartManager control. WebPartManager _manager; void Page_Init(object sender, EventArgs e) { Page.InitComplete += new EventHandler(InitComplete); } void InitComplete(object sender, System.EventArgs e) { _manager = WebPartManager.GetCurrentWebPartManager(Page); String browseModeName = WebPartManager.BrowseDisplayMode.Name; // Fill the drop-down list with the names of supported display modes. foreach (WebPartDisplayMode mode in _manager.SupportedDisplayModes) { String modeName = mode.Name; // Make sure a mode is enabled before adding it. if (mode.IsEnabled(_manager)) { ListItem item = new ListItem(modeName, modeName); DisplayModeDropdown.Items.Add(item); } } // If Shared scope is allowed for this user, display the // scope-switching UI and select the appropriate radio // button for the current user scope. if (_manager.Personalization.CanEnterSharedScope) { Panel2.Visible = true; if (_manager.Personalization.Scope == PersonalizationScope.User) RadioButton1.Checked = true; else RadioButton2.Checked = true; } } // Change the page to the selected display mode. void DisplayModeDropdown_SelectedIndexChanged(object sender, EventArgs e) { String selectedMode = DisplayModeDropdown.SelectedValue; WebPartDisplayMode mode = _manager.SupportedDisplayModes[selectedMode]; if (mode != null) _manager.DisplayMode = mode; } // Set the selected item equal to the current display mode. void Page_PreRender(object sender, EventArgs e) { ListItemCollection items = DisplayModeDropdown.Items; int selectedIndex = items.IndexOf(items.FindByText(_manager.DisplayMode.Name)); DisplayModeDropdown.SelectedIndex = selectedIndex; } // Reset all of a user's personalization data for the page. protected void LinkButton1_Click(object sender, EventArgs e) { _manager.Personalization.ResetPersonalizationState(); } // If not in User personalization scope, toggle into it. protected void RadioButton1_CheckedChanged(object sender, EventArgs e) { if (_manager.Personalization.Scope == PersonalizationScope.Shared) _manager.Personalization.ToggleScope(); } // If not in Shared scope, and if user has permission, toggle // the scope. protected void RadioButton2_CheckedChanged(object sender, EventArgs e) { if (_manager.Personalization.CanEnterSharedScope && _manager.Personalization.Scope == PersonalizationScope.User) _manager.Personalization.ToggleScope(); } </script> <div> <asp:Panel ID="Panel1" Borderwidth="1" Width="230" BackColor="lightgray" Font-Names="Verdana, Arial, Sans Serif" > <asp:Label ID="Label1" Text=" Display Mode" Font-Bold="true" Font-Size="8" Width="120" /> <asp:DropDownList ID="DisplayModeDropdown" AutoPostBack="true" Width="120" OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" /> <asp:LinkButton ID="LinkButton1" Text="Reset User State" ToolTip="Reset the current user's personalization data for the page." Font-Size="8" OnClick="LinkButton1_Click" /> <asp:Panel ID="Panel2" GroupingText="Personalization Scope" Font-Bold="true" Font-Size="8" Visible="false" > <asp:RadioButton ID="RadioButton1" Text="User" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton1_CheckedChanged" /> <asp:RadioButton ID="RadioButton2" Text="Shared" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton2_CheckedChanged" /> </asp:Panel> </asp:Panel> </div>Speichern Sie die Datei.
Hinweis:Mit diesem Benutzersteuerelement können Benutzer der Webparts-Seite zwar zwischen dem Modus für gemeinsame Nutzung und dem Personalisierungsmodus wechseln, für das Personalisierungsfeature muss der Benutzer jedoch über die entsprechenden, in der Datei Web.config angegebenen Berechtigungen verfügen. Da in dieser exemplarischen Vorgehensweise nicht beschrieben wird, wie diese Berechtigungen erteilt werden, ist das Feature nicht aktiviert. Folglich sind die gemeinsamen und personalisierten Optionsfelder des Benutzersteuerelements ausgeblendet, wenn Sie die Seite ausführen. Weitere Informationen zur Personalisierung finden Sie unter Webparts-Personalisierung.
So ermöglichen Sie Benutzern das Ändern des Layouts
Öffnen Sie die Seite WebPartsDemo.aspx.
Wechseln Sie zur Entwurfsansicht.
Positionieren Sie die Einfügemarke direkt hinter dem WebPartManager-Steuerelement, das Sie zuvor hinzugefügt haben. Drücken Sie die EINGABETASTE, um nach dem WebPartManager-Steuerelement eine Leerzeile zu erstellen.
Ziehen Sie das gerade erstellte Benutzersteuerelement (DisplayModeMenu.ascx) auf die Seite WebPartsDemo.aspx, und legen Sie es in der Leerzeile ab.
Ziehen Sie ein EditorZone-Steuerelement von der Registerkarte WebParts der Toolbox in die verbliebene offene Tabellenzelle auf der Seite WebPartsDemo.aspx.
Ziehen Sie von der Registerkarte WebParts der Toolbox ein AppearanceEditorPart-Steuerelement und ein LayoutEditorPart-Steuerelement in das EditorZone-Steuerelement.
Wechseln Sie zur Quellansicht.
Der resultierende Code in der Tabellenzelle ähnelt dem folgenden Code.
<td valign="top"> <asp:EditorZone ID="EditorZone1" > <ZoneTemplate> <asp:AppearanceEditorPart ID="AppearanceEditorPart1" /> <asp:LayoutEditorPart ID="LayoutEditorPart1" /> </ZoneTemplate> </asp:EditorZone> </td>Hinweis:Obwohl in dieser exemplarischen Vorgehensweise das AppearanceEditorPart-Steuerelement und das LayoutEditorPart-Steuerelement verwendet werden, ist dies für das BehaviorEditorPart-Steuerelement und für das PropertyGridEditorPart-Steuerelement nicht der Fall, da diese Einstellungen erfordern, die über den Umfang dieser exemplarischen Vorgehensweise hinausgehen.
Speichern Sie die Datei WebPartsDemo.aspx.
Sie haben ein Benutzersteuerelement erstellt, mit dem Sie die Anzeigemodi wechseln und das Seitenlayout ändern können, und Sie haben auf der primären Webseite einen Verweis auf das Steuerelement erstellt.
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 im Menü Anzeigemodus auf Bearbeiten.
Die Zonentitel werden angezeigt.
Ziehen Sie das My Links-Steuerelement an der Titelleiste aus der Sidebar-Zone in den unteren Bereich der Main-Zone.
Die Seite sieht wie folgt aus:
Webparts-Demoseite mit verschobenem My Links-Steuerelement
.gif)
Klicken Sie auf Anzeigemodus und anschließend auf Durchsuchen.
Die Seite wird aktualisiert, die Zonennamen werden ausgeblendet, und das My Links-Steuerelement verbleibt dort, wo Sie es positioniert haben.
Um zu überprüfen, dass die Personalisierung funktioniert, schließen Sie den Browser, und laden Sie dann die Seite erneut. Die von Ihnen vorgenommenen Änderungen werden für zukünftige Browsersitzungen gespeichert.
Klicken Sie im Menü Anzeigemodus auf Bearbeiten.
Jedes Steuerelement auf der Seite wird nun mit einem Pfeil nach unten in der Titelleiste angezeigt, der das Dropdown-Verbenmenü enthält.
Klicken Sie auf den Pfeil, um das Verbenmenü im My Links-Steuerelement anzuzeigen, und klicken Sie anschließend auf Bearbeiten.
Das EditorZone-Steuerelement wird mit den von Ihnen hinzugefügten EditorPart-Steuerelementen angezeigt.
Ändern Sie im Abschnitt Darstellung des Bearbeitungssteuerelements Titel in My Favorites. Wählen Sie in der Liste Chromtyp den Eintrag Nur Titel aus, und klicken Sie dann auf Übernehmen.
In der folgenden Bildschirmabbildung wird die Seite im Bearbeitungsmodus angezeigt.
Webparts-Demoseite im Bearbeitungsmodus
.gif)
Klicken Sie im Menü Anzeigemodus auf Durchsuchen aus, um in den Durchsuchen-Modus zurückzukehren.
Das Steuerelement hat jetzt einen aktualisierten Titel und keinen Rahmen, wie in der folgenden Bildschirmabbildung dargestellt.
Bearbeitete Webparts-Demoseite
.gif)
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. Dadurch 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, Webparts zur Laufzeit hinzuzufügen
Öffnen Sie die Seite WebPartsDemo.aspx.
Wechseln Sie zur Entwurfsansicht.
Ziehen Sie aus der Registerkarte WebParts der Toolbox ein CatalogZone-Steuerelement in die rechte Spalte der Tabelle unter das EditorZone-Steuerelement.
Beide Steuerelemente können sich in derselben Tabellenzelle befinden, da sie nicht zur gleichen Zeit angezeigt werden.
Weisen Sie im Eigenschaftenbereich der HeaderText-Eigenschaft des CatalogZone-Steuerelements die Zeichenfolge Add Web Parts zu.
Ziehen Sie von der Registerkarte WebParts der Toolbox ein DeclarativeCatalogPart-Steuerelement in den Inhaltsbereich des CatalogZone-Steuerelements.
Klicken Sie auf den Pfeil in der rechten oberen Ecke des DeclarativeCatalogPart-Steuerelements. Dadurch wird dessen Aufgabenmenü verfügbar gemacht. Wählen Sie dann Vorlagen bearbeiten aus.
Ziehen Sie von der Registerkarte Standard der Toolbox ein FileUpload-Steuerelement und ein Calendar-Steuerelement in den Abschnitt WebPartsTemplate des DeclarativeCatalogPart-Steuerelements.
Wechseln Sie zur Quellenansicht, und überprüfen Sie den Quellcode des asp:catalogzone-Elements.
Beachten Sie, dass das DeclarativeCatalogPart-Steuerelement ein webpartstemplate-Element enthält, in das die beiden Serversteuerelemente eingeschlossen sind, sodass Sie Ihrer Seite Elemente aus dem Katalog hinzufügen können.
Hinweis:Für ein benutzerdefiniertes Steuerelement ist dies die geeignete Stelle, um es durch ein Serversteuerelement im Beispiel zu ersetzen, obwohl dazu Schritte notwendig sind, die außerhalb des Umfangs dieser exemplarischen Vorgehensweise liegen. Weitere Details finden Sie im Codebeispiel in der Dokumentation für die WebPart-Klasse.
Fügen Sie jedem der dem Katalog hinzugefügten Steuerelemente eine Title-Eigenschaft hinzu. Verwenden Sie dazu den Zeichenfolgenwert, der für die einzelnen Titel im folgenden Codebeispiel gezeigt wird. Selbst wenn der Titel keine Eigenschaft ist, die Sie normalerweise zur Entwurfszeit für diese beiden Serversteuerelemente festlegen können, wird jedes von ihnen von einem GenericWebPart-Steuerelement eingeschlossen, wenn ein Benutzer zur Laufzeit diese Steuerelemente einer WebPartZone-Zone aus dem Katalog hinzufügt. Dadurch können sie als Webparts-Steuerelemente fungieren, und es können in ihnen auch Titel angezeigt werden.
Der Code für die beiden im DeclarativeCatalogPart-Steuerelement enthaltenen Steuerelemente sieht wie folgt aus.
<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" > <WebPartsTemplate> <asp:Calendar ID="Calendar1" title="My Calendar" /> <asp:FileUpload ID="FileUpload1" title="Upload Files" /> </WebPartsTemplate> </asp:DeclarativeCatalogPart>Speichern Sie die Seite.
Sie können den Katalog jetzt testen.
So testen Sie den Webparts-Katalog
Laden Sie die Seite in einem Browser.
Klicken Sie im Menü Anzeigemodus auf Katalog.
Der Katalog mit dem Titel Add Web Parts wird angezeigt.
Ziehen Sie das My Favorites-Steuerelement aus der Main-Zone zurück an den Anfang der Sidebar-Zone.
Aktivieren Sie im Katalog Add Web Parts beide Kontrollkästchen, und wählen Sie aus der Liste der verfügbaren Zonen Main 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 Hochladen von Dateien und mit dem Kalendersteuerelement in der Main-Zone angezeigt:
Der Hauptzone aus dem Katalog hinzugefügte Steuerelemente
.gif)
Klicken Sie im Menü Anzeigemodus auf Durchsuchen.
Der Katalog wird ausgeblendet, und die Seite wird aktualisiert.
Schließen Sie den Browser, und laden Sie die Seite anschließend 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. Möglicherweise möchten Sie weitere, anspruchsvoller Webparts-Features testen. Hier einige Vorschläge:
- Erstellen von Webparts-Steuerelementen, die komplexere Funktionen anbieten als die statischen Webparts aus dieser exemplarischen Vorgehensweise. Sie können Webparts-Steuerelemente als Benutzersteuerelemente oder als benutzerdefinierte Steuerelemente erstellen. Weitere Informationen finden Sie in der Dokumentation zur WebPart-Klasse.
Siehe auch
Aufgaben
Exemplarische Vorgehensweise: Erstellen einer Webparts-Seite
Konzepte
Übersicht über ASP.NET-Webparts