Profile, Themen und Webparts

von Microsoft

In ASP.NET 2.0 gibt es wesentliche Änderungen an konfiguration und Instrumentierung. Mit der neuen ASP.NET-Konfigurations-API können Konfigurationsänderungen programmgesteuert vorgenommen werden. Darüber hinaus lassen viele neue Konfigurationseinstellungen neue Konfigurationen und Instrumentierungen zu.

ASP.NET 2.0 stellt eine erhebliche Verbesserung des Bereichs personalisierter Websites dar. Zusätzlich zu den bereits behandelten Mitgliedschaftsfeatures verbessern ASP.NET Profile, Designs und Webparts die Personalisierung auf Websites erheblich.

ASP.NET Profile

ASP.NET Profile ähneln Sitzungen. Der Unterschied besteht darin, dass ein Profil persistent ist, während eine Sitzung verloren geht, wenn der Browser geschlossen wird. Ein weiterer großer Unterschied zwischen Sitzungen und Profilen besteht darin, dass Profile stark typisiert sind und Ihnen dadurch IntelliSense während des Entwicklungsprozesses zur Verfügung steht.

Ein Profil wird entweder in der Computerkonfigurationsdatei oder in der web.config Datei für die Anwendung definiert. (Sie können ein Profil nicht in der web.config-Datei eines Unterordners definieren.) Der folgende Code definiert ein Profil zum Speichern des Vor- und Nachnamens der Website-Besucher.

<profile>
    <properties>
        <add name="FirstName" />
        <add name="LastName" />
    </properties>
</profile>

Der Standarddatentyp für eine Profileigenschaft ist "System.String". Im obigen Beispiel wurde kein Datentyp angegeben. Daher sind die Eigenschaften "FirstName" und "LastName" beide vom Typ "String". Wie bereits erwähnt, sind Profileigenschaften stark typisiert. Der folgende Code fügt eine neue Eigenschaft für das Alter hinzu, die vom Typ "Int32" ist.

<profile>
    <properties>
        <add name="FirstName" />
        <add name="LastName" />
        <add name="Age" type="Int32"/>
    </properties>
</profile>

Profile werden in der Regel mit ASP.NET Formularauthentifizierung verwendet. Bei Verwendung in Kombination mit der Formularauthentifizierung verfügt jeder Benutzer über ein separates Profil, das seiner Benutzer-ID zugeordnet ist. Es ist jedoch auch möglich, die Verwendung von Profilen in einer anonymen Anwendung mit dem <anonymousIdentification-Element> in der Konfigurationsdatei zusammen mit dem allowAnonymous-Attribut wie unten dargestellt zuzulassen:

<anonymousIdentification enabled="true" />
<profile>
    <properties>
        <add name="FirstName" allowAnonymous="true" />
        <add name="LastName" allowAnonymous="true" />
    </properties>
</profile>

Wenn ein anonymer Benutzer die Website durchsucht, erstellt ASP.NET eine Instanz von ProfileCommon für den Benutzer. Dieses Profil verwendet eine eindeutige ID, die in einem Cookie im Browser gespeichert ist, um den Benutzer als eindeutigen Besucher zu identifizieren. Auf diese Weise können Sie Profilinformationen für Benutzer speichern, die anonym surfen.

Profilgruppen

Es ist möglich, Eigenschaften von Profilen zu gruppieren. Durch gruppieren von Eigenschaften ist es möglich, mehrere Profile für eine bestimmte Anwendung zu simulieren.

Die folgende Konfiguration konfiguriert eine FirstName- und LastName-Eigenschaft für zwei Gruppen. Käufer und Interessenten.

<profile>
    <properties>
        <group name="Buyers">
            <add name="FirstName" />
            <add name="Lastname" />
            <add name="NumberOfPurchases" type="Int32" />
        </group>
        <group name="Prospects">
            <add name="FirstName" />
            <add name="Lastname" />
        </group>
    </properties>
</profile>

Es ist dann möglich, Eigenschaften für eine bestimmte Gruppe wie folgt festzulegen:

Profile.Buyers.NumberOfPurchases += 1;

Speichern komplexer Objekte

Bisher haben die von uns behandelten Beispiele einfache Datentypen in einem Profil gespeichert. Es ist auch möglich, komplexe Datentypen in einem Profil zu speichern, indem sie die Serialisierungsmethode mithilfe des serializeAs-Attributs wie folgt angeben:

<add name="PurchaseInvoice"
     type="PurchaseInvoice"
     serializeAs="Binary"
/>

In diesem Fall ist der Typ PurchaseInvoice. Die PurchaseInvoice-Klasse muss als serialisierbar gekennzeichnet werden und kann eine beliebige Anzahl von Eigenschaften enthalten. Wenn "PurchaseInvoice" beispielsweise eine Eigenschaft namens "NumItemsPurchased" aufweist, können Sie wie folgt auf diese Eigenschaft im Code verweisen:

Profile.PurchaseInvoice.NumItemsPurchased

Profilvererbung

Es ist möglich, ein Profil für die Verwendung in mehreren Anwendungen zu erstellen. Indem Sie eine Profilklasse erstellen, die von ProfileBase abgeleitet wird, können Sie ein Profil in mehreren Anwendungen wiederverwenden, indem Sie das Attribut "vererbt" wie unten gezeigt nutzen.

<profile inherits="PurchasingProfile" />

In diesem Fall würde die Klasse "PurchasingProfile " wie folgt aussehen:

using System;
using System.Web.Profile;
public class PurchasingProfile : ProfileBase {
    private string _ProductName;
    private Int32 _ProductID;
    public string ProductName {
        get { return _ProductName; }
        set { _ProductName = value; }
    }
    public Int32 ProductID {
        get { return _ProductID; }
        set { _ProductID = value; }
    }
}

Profilanbieter

ASP.NET Profile verwenden das Anbietermodell. Der Standardanbieter speichert die Informationen in einer SQL Server Express-Datenbank im ordner App_Data der Webanwendung mit dem SqlProfileProvider-Anbieter. Wenn die Datenbank nicht vorhanden ist, erstellt ASP.NET sie automatisch, wenn das Profil versucht, Informationen zu speichern.

In einigen Fällen möchten Sie jedoch möglicherweise Ihren eigenen Profil-Provider entwickeln. Mit der ASP.NET Profilfunktion können Sie ganz einfach unterschiedliche Anbieter verwenden.

Sie erstellen einen benutzerdefinierten Profilanbieter, wenn:

• Sie müssen Profilinformationen in einer Datenquelle speichern, z. B. in einer FoxPro-Datenbank oder in einer Oracle-Datenbank, die von den profilanbietern, die im .NET Framework enthalten sind, nicht unterstützt wird.
• Sie müssen Profilinformationen mithilfe eines Datenbankschemas verwalten, das sich von dem Datenbankschema unterscheidet, das von den in .NET Framework enthaltenen Anbietern verwendet wird. Ein gängiges Beispiel hierfür ist, dass Sie Profilinformationen in Benutzerdaten in eine vorhandene SQL Server-Datenbank integrieren möchten.

Erforderliche Klassen

Um einen Profilanbieter zu implementieren, erstellen Sie eine Klasse, die die abstrakte Klasse System.Web.Profile.ProfileProvider erbt. Die abstrakte ProfileProvider-Klasse erbt wiederum die abstrakte System.Configuration.SettingsProvider-Klasse, die die abstrakte Klasse System.Configuration.Provider.ProviderBase erbt. Aufgrund dieser Vererbungskette müssen Sie zusätzlich zu den erforderlichen Membern der ProfileProvider-Klasse die erforderlichen Member der SettingsProvider - und ProviderBase-Klassen implementieren.

In den folgenden Tabellen werden die Eigenschaften und Methoden beschrieben, die Sie aus den abstrakten Klassen ProviderBase, SettingsProvider und ProfileProvider implementieren müssen.

ProviderBase-Mitglieder

SettingsProvider-Mitglieder

ProfileProvider-Mitglieder

ApplicationName

Da Profilanbieter Profilinformationen für jede Anwendung separat speichern, müssen Sie sicherstellen, dass Ihr Datenschema den Anwendungsnamen enthält und dass Abfragen und Updates auch den Anwendungsnamen enthalten. Der folgende Befehl wird z. B. verwendet, um einen Eigenschaftswert aus einer Datenbank basierend auf dem Benutzernamen und der Anonymität des Profils abzurufen, und stellt sicher, dass der ApplicationName-Wert in der Abfrage enthalten ist.

SELECT Property
FROM PropertyTable
WHERE Username = 'user1'
AND IsAnonymous = False
AND ApplicationName = 'MyApplication'

ASP.NET-Themen

Was sind ASP.NET 2.0 Themen?

Einer der wichtigsten Aspekte einer Webanwendung ist ein einheitliches Aussehen und Verhalten auf der gesamten Website. ASP.NET 1.x-Entwickler verwenden in der Regel Cascading Stylesheets (CSS), um ein einheitliches Aussehen und Verhalten zu implementieren. ASP.NET 2.0-Designs verbessern sich bei CSS erheblich, da sie dem ASP.NET Entwickler die Möglichkeit geben, die Darstellung von ASP.NET Serversteuerelementen sowie HTML-Elementen zu definieren. ASP.NET-Themen können auf ein einzelnes Steuerelement, eine bestimmte Webseite oder eine gesamte Webanwendung angewendet werden. Themen verwenden eine Kombination aus CSS-Dateien, einer optionalen Skin-Datei und einem optionalen Images-Verzeichnis, wenn Bilder erforderlich sind. Die Skindatei steuert das visuelle Erscheinungsbild von ASP.NET Serversteuerelementen.

Wo werden Themen gespeichert?

Der Speicherort, an dem Designs gespeichert werden, unterscheidet sich je nach Umfang. Themen, die auf jede Anwendung angewendet werden können, werden im folgenden Ordner gespeichert:

C:\WINDOWS\Microsoft.NET\Framework\v2.x.xxxxx\ASP.NETClientFiles\Themes\<Theme_Name>

Ein Thema, das für eine bestimmte Anwendung spezifisch ist, wird in einem App\_Themes\<Theme\_Name> Verzeichnis im Stammverzeichnis der Webseite gespeichert.

Ein globales Design ist ein Design, das auf eine beliebige Anwendung oder Website angewendet werden kann, die auf dem Webserver ausgeführt wird. Diese Themes werden standardmäßig im Verzeichnis ASP.NETClientfiles\Themes gespeichert, das sich innerhalb des v2.x.xxxxx Verzeichnisses befindet. Alternativ können Sie die Designdateien in den Ordner aspnet_client/system_web/[version]/Themes/[theme_name] im Stammverzeichnis Ihrer Website verschieben.

Anwendungsspezifische Designs können nur auf die Anwendung angewendet werden, in der sich die Dateien befinden. Diese Dateien werden im App\_Themes/<theme\_name> Verzeichnis im Stammverzeichnis der Website gespeichert.

Die Komponenten eines Themas

Ein Design besteht aus einer oder mehreren CSS-Dateien, einer optionalen Skin-Datei und einem optionalen Images-Ordner. Die CSS-Dateien können beliebige Namen haben (z. B. default.css oder theme.css usw.) und müssen sich im Stammverzeichnis des Themenordners befinden. Die CSS-Dateien werden verwendet, um normale CSS-Klassen und Attribute für bestimmte Selektoren zu definieren. Um eine der CSS-Klassen auf ein Seitenelement anzuwenden, wird die CSSClass-Eigenschaft verwendet.

Die Skindatei ist eine XML-Datei, die Eigenschaftsdefinitionen für ASP.NET Serversteuerelemente enthält. Der unten aufgeführte Code ist eine Beispiel-Skindatei.

<asp:TextBox runat="server"
    BackColor="#FFC080"
    BorderColor="Black"
    BorderStyle="Solid"
    BorderWidth="1px"
    Font-Names="Tahoma, Verdana, Arial"
    Font-Size="Smaller" />

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0" />

Abbildung 1 unten zeigt eine kleine ASP.NET Seite, die ohne Design durchsucht wurde. Abbildung 2 zeigt dieselbe Datei mit einem angewendeten Design. Die Hintergrundfarbe und Textfarbe werden über eine CSS-Datei konfiguriert. Die Darstellung der Schaltfläche und des Textfelds wird mithilfe der oben aufgeführten Skin-Datei konfiguriert.

Abbildung 1: Kein Design

Abbildung 2: Angewandtes Thema

Die oben aufgeführte Skindatei definiert eine Standardoberfläche für alle TextBox-Steuerelemente und Schaltflächen-Steuerelemente. Dies bedeutet, dass jedes TextBox-Steuerelement und Button-Steuerelement, das auf einer Seite eingefügt wird, diese Darstellung übernimmt. Sie können auch eine Haut definieren, die mithilfe der SkinID-Eigenschaft des Steuerelements auf bestimmte Instanzen dieser Steuerelemente angewendet werden kann.

Der folgende Code definiert eine Skin für ein Schaltflächen-Steuerelement. Nur Schaltflächen-Steuerelemente mit einer SkinID-Eigenschaft von goButton nehmen das Aussehen der Haut auf.

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0"
    Text=go
    SkinID=goButton
    Width="95px" />

Sie können nur eine Standard-Skin pro Serversteuerelementtyp haben. Wenn Sie zusätzliche Skins benötigen, sollten Sie die SkinID-Eigenschaft verwenden.

Anwenden von Themen auf Seiten

Ein Design kann mit einer der folgenden Methoden angewendet werden:

• Im <pages>-Element der Datei web.config
• In der @Page Direktive einer Seite
• Programmgesteuert

Anwenden eines Designs in der Konfigurationsdatei

Verwenden Sie die folgende Syntax, um ein Thema in der Anwendungskonfigurationsdatei anzuwenden.

<system.web>
    <pages theme="CoolTheme" />
    ...
</system.web>

Der hier angegebene Designname muss mit dem Namen des Designordners übereinstimmen. Dieser Ordner kann entweder an einem der oben in diesem Kurs erwähnten Speicherorte vorhanden sein. Wenn Sie versuchen, ein Design anzuwenden, das nicht vorhanden ist, tritt ein Konfigurationsfehler auf.

Anwenden eines Themas in der Seiten-Direktive

Sie können auch ein Thema in der @Page-Direktive anwenden. Mit dieser Methode können Sie ein Design für eine bestimmte Seite verwenden.

Verwenden Sie die folgende Syntax, um ein Thema in der @Page-Direktive anzuwenden:

<%@ Page Language="C#" Theme=CoolTheme CodeFile="Default.aspx.cs" ... %>

Erneut muss das hier angegebene Design mit dem Designordner übereinstimmen, wie zuvor erwähnt. Wenn Sie versuchen, ein Design anzuwenden, das nicht vorhanden ist, tritt ein Buildfehler auf. Visual Studio hebt auch das Attribut hervor und benachrichtigt Sie, dass kein solches Thema vorhanden ist.

Programmgesteuertes Anwenden eines Themas

Um ein Design programmgesteuert anzuwenden, müssen Sie die Theme-Eigenschaft für die Seite in der Page_PreInit-Methode angeben.

Verwenden Sie die folgende Syntax, um ein Thema programmgesteuert anzuwenden:

Page.Theme = CoolTheme;

Das Thema muss aufgrund des Lebenszyklus der Seite in der PreInit-Methode angewendet werden. Wenn Sie es nach diesem Punkt anwenden, wurde das Seitendesign bereits zur Laufzeit angewendet, und zu diesem Zeitpunkt kommt eine Änderung im Lebenszyklus zu spät. Wenn Sie ein Design anwenden, das nicht vorhanden ist, tritt eine HttpException auf. Wenn ein Design programmgesteuert angewendet wird, tritt eine Buildwarnung auf, wenn die Serversteuerelemente eine SkinID-Eigenschaft angegeben haben. Diese Warnung soll Sie darüber informieren, dass kein Theme deklarativ angewendet wird und ignoriert werden kann.

Übung 1: Anwenden eines Themas

In dieser Übung wenden Sie ein ASP.NET Design auf eine Website an.

1. Erstellen Sie eine neue ASP.NET-Website.

2. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie "Neues Element hinzufügen" aus.

3. Wählen Sie in der Liste der Dateien die Webkonfigurationsdatei aus, und klicken Sie auf "Hinzufügen".

4. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie "Neues Element hinzufügen" aus.

5. Wählen Sie "Skin File" aus, und klicken Sie auf "Hinzufügen".

6. Klicken Sie auf "Ja", wenn Sie gefragt werden, ob Sie die Datei in den ordner "App_Themes" einfügen möchten.

7. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den SkinFile-Ordner im Ordner App_Themes, und wählen Sie "Neues Element hinzufügen" aus.

8. Wählen Sie in der Liste der Dateien Stylesheet aus, und klicken Sie auf "Hinzufügen". Sie verfügen jetzt über alle Dateien, die zum Implementieren ihres neuen Designs erforderlich sind. Visual Studio hat jedoch Ihren Themen-Ordner "SkinFile" benannt. Klicken Sie mit der rechten Maustaste auf diesen Ordner, und ändern Sie den Namen in CoolTheme.

9. Öffnen Sie die SkinFile.skin-Datei, und fügen Sie den folgenden Code am Ende der Datei hinzu:

   <asp:TextBox runat="server"
       BackColor="#FFC080"
       BorderColor="Black"
       BorderStyle="Solid"
       BorderWidth="1px"
       Font-Names="Tahoma, Verdana, Arial"
       Font-Size="Smaller"
   />
   
   <asp:Button runat="server"
       BackColor="#C04000"
       BorderColor="Maroon"
       BorderStyle="Solid"
       BorderWidth="2px"
       Font-Names="Tahoma,Verdana,Arial"
       Font-Size="Smaller"
       ForeColor="#FFFFC0"
   />
   
   <asp:Button runat="server"
       BackColor="#C04000"
       BorderColor="Maroon"
       BorderStyle="Solid"
       BorderWidth="2px"
       Font-Names="Tahoma,Verdana,Arial"
       Font-Size="Smaller"
       ForeColor="#FFFFC0"
       Text="go"
       SkinID="goButton"
       Width="95px"
   />
   

10. Speichern Sie die SkinFile.skin-Datei.

11. Öffnen Sie die StyleSheet.css.

12. Ersetzen Sie den gesamten Darin enthaltenen Text durch Folgendes:

    body {
        background-color: #FFDEAD;
    }
    

13. Speichern Sie die StyleSheet.css Datei.

14. Öffnen Sie die Default.aspx Seite.

15. Fügen Sie ein TextBox-Steuerelement und ein Schaltflächen-Steuerelement hinzu.

16. Speichern Sie die Seite. Durchsuchen Sie nun die Default.aspx Seite. Es sollte als normales Webformular angezeigt werden.

17. Öffnen Sie die Datei web.config.

18. Fügen Sie Folgendes direkt unter dem öffnenden <system.web> Tag hinzu:

    <pages theme="CoolTheme" />
    

19. Speichern Sie die Datei web.config. Durchsuchen Sie nun die Default.aspx Seite. Es sollte mit dem angewendeten Theme angezeigt werden.

20. Wenn sie noch nicht geöffnet ist, öffnen Sie die Default.aspx Seite in Visual Studio.

21. Wählen Sie die Schaltfläche aus.

22. Ändern Sie die SkinID-Eigenschaft in goButton. Beachten Sie, dass Visual Studio eine Dropdownliste mit gültigen SkinID-Werten für ein Button-Steuerelement bereitstellt.

23. Speichern Sie die Seite. Zeigen Sie nun erneut eine Vorschau der Seite in Ihrem Browser an. Die Schaltfläche sollte jetzt "Los" sagen und sollte breiter aussehen.

Mithilfe der SkinID-Eigenschaft können Sie ganz einfach unterschiedliche Skins für verschiedene Instanzen eines bestimmten Serversteuerelements konfigurieren.

Die StyleSheetTheme-Eigenschaft

Bisher haben wir nur über das Anwenden von Designs mit der Theme-Eigenschaft gesprochen. Bei Verwendung der Theme-Eigenschaft überschreibt die Skindatei alle deklarativen Einstellungen für Serversteuerelemente. In Übung 1 haben Sie beispielsweise eine SkinID von "goButton" für das Schaltflächen-Steuerelement angegeben und den Text der Schaltfläche in "go" geändert. Möglicherweise haben Sie bemerkt, dass die Texteigenschaft der Schaltfläche im Designer auf "Schaltfläche" festgelegt wurde, aber das Design überrodet dies. Das Thema überschreibt immer alle Eigenschaftseinstellungen im Designer.

Wenn Sie in der Lage sein möchten, die in der Skindatei des Designs definierten Eigenschaften mit eigenschaften zu überschreiben, die im Designer angegeben sind, können Sie die StyleSheetTheme-Eigenschaft anstelle der Theme-Eigenschaft verwenden. Die StyleSheetTheme-Eigenschaft ist identisch mit der Theme-Eigenschaft, außer dass sie nicht alle expliziten Eigenschaftseinstellungen außer Kraft setzt wie die Theme-Eigenschaft.

Um dies in Aktion zu sehen, öffnen Sie die web.config Datei aus dem Projekt in Übung 1, und ändern Sie das <pages> Element wie folgt:

<pages styleSheetTheme="CoolTheme" />

Durchsuchen Sie nun die Default.aspx Seite, und Sie werden sehen, dass das Schaltflächen-Steuerelement erneut eine Texteigenschaft von "Button" aufweist. Der Grund dafür ist, dass die explizite Eigenschaftseinstellung im Designer die text-Eigenschaft überschreibt, die von der goButton SkinID festgelegt wird.

Übergeordnete Themen

Ein globales Design kann überschrieben werden, indem ein Design mit demselben Namen im Ordner App_Themes der Anwendung angewendet wird. Das Thema wird jedoch nicht in einem echten Außerkraftsetzungsszenario angewendet. Wenn die Laufzeit auf Designdateien im Ordner App_Themes trifft, wird das Design mithilfe dieser Dateien angewendet und das globale Design ignoriert.

Die StyleSheetTheme-Eigenschaft kann überschrieben werden und kann wie folgt im Code überschrieben werden:

const String THEME_NAME = "CoolTheme";
public override string StyleSheetTheme {
    get { return THEME_NAME; }
    set { Page.StyleSheetTheme = THEME_NAME; }
}

Web Parts

ASP.NET Webparts ist ein integrierter Satz von Steuerelementen zum Erstellen von Websites, mit denen Endbenutzer inhalte, Darstellung und Verhalten von Webseiten direkt über einen Browser ändern können. Die Änderungen können auf alle Benutzer auf der Website oder auf einzelne Benutzer angewendet werden. Wenn Benutzer Seiten und Steuerelemente ändern, können die Einstellungen gespeichert werden, um die persönlichen Einstellungen eines Benutzers in zukünftigen Browsersitzungen, einem Feature namens Personalisierung, beizubehalten. Diese Web-Parts-Funktionen ermöglichen es Entwicklern, Endbenutzern die Möglichkeit zu geben, eine Webanwendung dynamisch zu personalisieren, ohne dass Eingriffe von Entwicklern oder Administratoren notwendig sind.

Mit dem Steuerelementsatz "Webparts" können Sie als Entwickler Endbenutzern folgendes ermöglichen:

• Personalisieren von Seiteninhalten. Benutzer können einer Seite neue Webparts-Steuerelemente hinzufügen, sie entfernen, ausblenden oder wie normale Fenster minimieren.
• Personalisieren des Seitenlayouts. Benutzer können ein Webpart-Steuerelement in eine andere Zone auf einer Seite ziehen oder dessen Darstellung, Eigenschaften und Verhalten ändern.
• Export- und Importkontrollen. Benutzer können Webpart-Steuerelementeinstellungen für die Verwendung auf anderen Seiten oder Websites importieren oder exportieren, die Eigenschaften, das Erscheinungsbild und sogar die Daten in den Steuerelementen beibehalten. Dies reduziert die Dateneingabe- und Konfigurationsanforderungen für Endbenutzer.
• Erstellen Sie Verbindungen. Benutzer können Verbindungen zwischen Steuerelementen herstellen, sodass beispielsweise ein Diagrammsteuerelement ein Diagramm für die Daten in einem Aktienticker-Steuerelement anzeigen kann. Benutzer konnten nicht nur die Verbindung selbst personalisieren, sondern auch die Darstellung und Details dazu, wie das Diagrammsteuerelement die Daten anzeigt.
• Verwalten und Personalisieren von Einstellungen auf Websiteebene. Autorisierte Benutzer können Einstellungen auf Websiteebene konfigurieren, bestimmen, wer auf eine Website oder Seite zugreifen kann, rollenbasierten Zugriff auf Steuerelemente festlegen usw. Beispielsweise könnte ein Benutzer in einer Administrativen Rolle ein Webpart-Steuerelement so festlegen, dass es von allen Benutzern freigegeben wird, und Benutzer, die keine Administratoren sind, daran hindern, das freigegebene Steuerelement zu personalisieren.

In der Regel arbeiten Sie mit Webparts auf eine von drei Arten: Erstellen von Seiten, die Webpartsteuerelemente verwenden, erstellen einzelne Webparts-Steuerelemente oder erstellen vollständige, personalisierbare Webanwendungen, z. B. ein Portal.

Seitenentwicklung

Seitenentwickler können visuelle Designtools wie Microsoft Visual Studio 2005 verwenden, um Seiten zu erstellen, die Webparts verwenden. Ein Vorteil bei der Verwendung eines Tools wie Visual Studio besteht darin, dass der Webparts-Steuerelementsatz Funktionen für die Drag-and-Drop-Erstellung und -Konfiguration von Webparts in einem visuellen Designer bereitstellt. Sie können beispielsweise den Designer verwenden, um eine Webpartzone oder ein Webpart-Editor-Steuerelement auf die Entwurfsoberfläche zu ziehen und dann das Steuerelement direkt im Designer mithilfe der benutzeroberfläche zu konfigurieren, die vom Webpart-Steuerelementsatz bereitgestellt wird. Dies kann die Entwicklung von Webparts-Anwendungen beschleunigen und die Menge an Code verringern, den Sie schreiben müssen.

Steuerungsentwicklung

Sie können jedes vorhandene ASP.NET-Steuerelement als Webpart-Steuerelement verwenden, einschließlich standardwebserversteuerelemente, benutzerdefinierte Serversteuerelemente und Benutzersteuerelemente. Für die maximale programmgesteuerte Steuerung Ihrer Umgebung können Sie auch benutzerdefinierte Webpart-Steuerelemente erstellen, die von der WebPart-Klasse abgeleitet werden. Bei der Entwicklung einzelner Webparts-Steuerelemente erstellen Sie in der Regel entweder ein Benutzersteuerelement und verwenden es als Webpart-Steuerelement oder entwickeln ein benutzerdefiniertes Webpart-Steuerelement.

Als Beispiel für die Entwicklung eines benutzerdefinierten Webparts-Steuerelements können Sie ein Steuerelement erstellen, um eines der Features bereitzustellen, die von anderen ASP.NET Serversteuerelementen bereitgestellt werden, die zum Packen als personalisiertes Webpart-Steuerelement nützlich sein können: Kalender, Listen, Finanzinformationen, Nachrichten, Rechner, Rich-Text-Steuerelemente zum Aktualisieren von Inhalten, bearbeitbare Raster, die eine Verbindung mit Datenbanken herstellen, Diagramme, die ihre Anzeige oder Wetter- und Reiseinformationen dynamisch aktualisieren. Wenn Sie einen visuellen Designer mit Ihrem Steuerelement bereitstellen, kann jeder Seitenentwickler, der Visual Studio verwendet, das Steuerelement einfach in eine Webpartzone ziehen und zur Entwurfszeit konfigurieren, ohne zusätzlichen Code schreiben zu müssen.

Die Personalisierung ist die Grundlage des Webparts-Features. Sie ermöglicht Es Benutzern, das Layout, die Darstellung und das Verhalten von Webpart-Steuerelementen auf einer Seite zu ändern – oder zu personalisieren. Die personalisierten Einstellungen sind langlebig: Sie werden nicht nur während der aktuellen Browsersitzung (wie beim Ansichtszustand) beibehalten, sondern auch im langfristigen Speicher, sodass auch die Einstellungen eines Benutzers für zukünftige Browsersitzungen gespeichert werden. Die Personalisierung ist standardmäßig für Webpartseiten aktiviert.

Die Strukturkomponenten der Benutzeroberfläche basieren auf der Personalisierung und stellen die Kernstruktur und Dienste bereit, die von allen Webparts-Steuerelementen benötigt werden. Eine auf jeder Webpartseite erforderliche Ui-Strukturkomponente ist das WebPartManager-Steuerelement. Obwohl nie sichtbar, hat dieses Steuerelement die wichtige Aufgabe, alle Webparts-Steuerelemente auf einer Seite zu koordinieren. Beispielsweise werden alle einzelnen Web Parts-Steuerelemente überwacht. Sie verwaltet Webpartzonen (Regionen, die Webpart-Steuerelemente auf einer Seite enthalten) und welche Steuerelemente sich in welchen Zonen befinden. Außerdem werden die verschiedenen Anzeigemodi nachverfolgt und gesteuert, in dem sich eine Seite befinden kann, z. B. "Durchsuchen", "Verbinden", "Bearbeiten" oder "Katalogmodus", und ob Personalisierungsänderungen für alle Benutzer oder für einzelne Benutzer gelten. Schließlich werden Verbindungen und die Kommunikation zwischen Web Parts-Steuerelementen initiiert und nachverfolgt.

Die zweite Art von UI-Strukturkomponente ist die Zone. Zonen fungieren als Layoutmanager auf einer Webparts-Seite. Sie enthalten und organisieren Steuerelemente, die von der Part-Klasse (Teilsteuerelemente) abgeleitet sind, und bieten die Möglichkeit, ein modulares Seitenlayout in horizontaler oder vertikaler Ausrichtung zu erledigen. Zonen bieten auch allgemeine und konsistente UI-Elemente (z. B. Kopf- und Fußzeilenformat, Titel, Rahmenformat, Interaktive Schaltflächen usw.) für jedes enthaltene Steuerelement; Diese allgemeinen Elemente werden als Chrom eines Steuerelements bezeichnet. Verschiedene spezielle Zonentypen werden in den verschiedenen Anzeigemodi und mit verschiedenen Steuerelementen verwendet. Die verschiedenen Zonentypen werden unten im Abschnitt "Grundlegende Steuerelemente für Webparts" beschrieben.

Die Webpart-UI-Steuerelemente, die alle von der Part-Klasse abgeleitet sind, umfassen die primäre Benutzeroberfläche auf einer Webpartseite. Der Webpart-Steuerelementsatz ist flexibel und inklusiv in den Optionen, die Ihnen zum Erstellen von Webpartsteuerelementen zur Auswahl stehen. Zusätzlich zum Erstellen eigener benutzerdefinierter Webparts-Steuerelemente können Sie auch vorhandene ASP.NET Serversteuerelemente, Benutzersteuerelemente oder benutzerdefinierte Serversteuerelemente als Webpart-Steuerelemente verwenden. Die wichtigsten Steuerelemente, die am häufigsten zum Erstellen von Webpartseiten verwendet werden, werden im nächsten Abschnitt beschrieben.

Grundlegende Steuerelemente für Webparts

Der Steuerelementsatz für Webparts ist umfangreich, aber einige Steuerelemente sind unerlässlich, weil sie erforderlich sind, damit Webparts funktionieren, oder weil sie die Steuerelemente sind, die am häufigsten auf Webparts-Seiten verwendet werden. Wenn Sie mit der Verwendung von Webparts und dem Erstellen grundlegender Webpartseiten beginnen, ist es hilfreich, sich mit den wesentlichen Webparts-Steuerelementen vertraut zu machen, die in der folgenden Tabelle beschrieben sind.

Labor: Erstellen einer Webpartseite

In dieser Übung erstellen Sie eine Webpartseite, die Informationen über ASP.NET Profile speichert.

Erstellen einer einfachen Seite mit Webparts

In diesem Teil der exemplarischen Vorgehensweise erstellen Sie eine Seite, die Webpart-Steuerelemente verwendet, um statische Inhalte anzuzeigen. Der erste Schritt beim Arbeiten mit Webparts besteht darin, eine Seite mit zwei erforderlichen Strukturelementen zu erstellen. Zunächst benötigt eine Webpartseite ein WebPartManager-Steuerelement, um alle Webparts-Steuerelemente nachzuverfolgen und zu koordinieren. Zweitens benötigt eine Webpartseite eine oder mehrere Zonen, die zusammengesetzte Steuerelemente enthalten, die WebPart- oder andere Serversteuerelemente enthalten und einen bestimmten Bereich einer Seite belegen.

So erstellen Sie eine Seite zum Enthalten von Webparts-Steuerelementen

1. Schließen Sie die Standardseite, und fügen Sie der Website mit dem Namen WebPartsDemo.aspx eine neue Seite hinzu.

2. Wechseln zur Entwurfsansicht .

3. Stellen Sie im Menü "Ansicht " sicher, dass die Optionen für nicht visuelle Steuerelemente und Details ausgewählt sind, damit Sie Layouttags und Steuerelemente anzeigen können, die keine Benutzeroberfläche aufweisen.

4. Platzieren Sie die Einfügemarke vor den <div> Tags auf der Entwurfsoberfläche, und drücken Sie die EINGABETASTE, um eine neue Zeile hinzuzufügen. Positionieren Sie die Einfügemarke vor dem neuen Zeilenzeichen, klicken Sie im Menü auf das Dropdown-Listensteuerelement " Blockformat ", und wählen Sie die Option "Überschrift 1 " aus. Fügen Sie den Text Webparts-Demonstrationsseite in die Überschrift ein.

5. Ziehen Sie auf der Registerkarte "WebParts" der Toolbox ein WebPartManager-Steuerelement auf die Seite, positionieren Sie es direkt hinter dem neuen Zeilenzeichen und vor den <div>Tags.

   Das WebPartManager-Steuerelement rendert keine Ausgabe, sodass es als graues Feld auf der Designeroberfläche angezeigt wird.

6. Positionieren Sie die Einfügemarke innerhalb der <div>-Tags.

7. Klicken Sie im Menü "Layout " auf "Tabelle einfügen", und erstellen Sie eine neue Tabelle mit einer Zeile und drei Spalten. Klicken Sie auf die Schaltfläche " Zelleneigenschaften ", wählen Sie oben in der Dropdownliste " Vertikale Ausrichtung " aus, klicken Sie auf "OK", und klicken Sie erneut auf "OK ", um die Tabelle zu erstellen.

8. 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: Randleiste

9. Ziehen Sie ein zweites WebPartZone-Steuerelement in die mittlere Tabellenspalte, und legen Sie die folgenden Eigenschaften fest:

   ID: MainZone

   HeaderText: Main

10. Speichern Sie die Datei.

Ihre Seite verfügt jetzt über zwei unterschiedliche Zonen, die Sie separat steuern können. Beide Zonen haben jedoch keinen Inhalt, sodass das Erstellen von Inhalten der nächste Schritt ist. In dieser exemplarischen Vorgehensweise arbeiten Sie mit Webpart-Steuerelementen, die nur statischen Inhalt anzeigen.

Das Layout einer Webparts-Zone wird durch ein <Zone-Template-Element> angegeben. Innerhalb der Zonenvorlage können Sie ein beliebiges ASP.NET-Steuerelement hinzufügen, ganz gleich, ob es sich um ein benutzerdefiniertes Webpart-Steuerelement, ein Benutzersteuerelement oder ein vorhandenes Serversteuerelement handelt. Beachten Sie, dass Sie hier das Label-Steuerelement verwenden und einfach statischen Text hinzufügen. Wenn Sie ein normales Serversteuerelement in einer WebPartZone-Zone platzieren, behandelt ASP.NET das Steuerelement zur Laufzeit als Webpart-Steuerelement, das Webpartfeatures für das Steuerelement ermöglicht.

So erstellen Sie Inhalte für die Hauptzone

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

2. Wechseln zur Quellansicht . Beachten Sie, dass ein <Zonetemplate-Element> hinzugefügt wurde, um das Label-Steuerelement in der MainZone zu umgeben.

3. Fügen Sie dem asp:label-Element< ein Attribut mit dem >" hinzu, und legen Sie dessen Wert auf "Content" fest. Entfernen Sie das Text="Label"-Attribut aus dem <asp:label-Element> . Fügen Sie zwischen den öffnenden und schließenden Tags des <asp:label>-Elements Text wie "Willkommen bei meiner Startseite" innerhalb eines Paars von <h2>-Elementtags hinzu. Ihr Code sollte wie folgt aussehen.

   <asp:webpartzone id="MainZone" runat="server" headertext="Main">
       <zonetemplate>
           <asp:label id="Label1" runat="server" title="Content">
               <h2>Welcome to My Home Page</h2>
           </asp:label>
       </zonetemplate>
   </asp:webpartzone>
   

4. Speichern Sie die Datei.

Erstellen Sie als Nächstes ein Benutzersteuerelement, das der Seite auch als Webpart-Steuerelement hinzugefügt werden kann.

So erstellen Sie ein Benutzersteuerelement

1. Fügen Sie Ihrer Website ein neues Webbenutzersteuerelement hinzu, das als Suchsteuerelement dienen soll. Deaktivieren Sie die Option zum Platzieren von Quellcode in einer separaten Datei. Fügen Sie es im selben Verzeichnis wie die WebPartsDemo.aspx-Seite hinzu, und nennen Sie es SearchUserControl.ascx.

   Hinweis

   Das Benutzersteuerelement für diese Schritt-für-Schritt-Anleitung implementiert keine tatsächliche Suchfunktion; es wird nur verwendet, um Webpart-Features zu veranschaulichen.

2. Wechseln zur Entwurfsansicht . Ziehen Sie auf der Registerkarte "Standard" der Toolbox ein TextBox-Kontrollkästchen auf die Seite.

3. Platzieren Sie die Einfügemarke nach dem soeben hinzugefügten Textfeld, und drücken Sie die EINGABETASTE, um eine neue Zeile hinzuzufügen.

4. Ziehen Sie einen Button auf die Seite in der neuen Zeile unterhalb des soeben hinzugefügten Textfelds.

5. Wechseln zur Quellansicht . Stellen Sie sicher, dass der Quellcode für das Benutzersteuerelement wie im folgenden Beispiel aussieht.

   <%@ control language="C#"
       classname="SearchUserControl" %>
   <asp:textbox runat="server"
     id=" TextBox1"></asp:textbox>
   <br />
   <asp:button runat="server"
     id=" Button1" text="Search" />
   

6. Speichern und schließen Sie die Datei.

Jetzt können Sie der Seitenleiste Web-Parts-Steuerelemente hinzufügen. Sie fügen der Randleistenzone zwei Steuerelemente hinzu, eine, die eine Liste von Links und eine andere enthält, die das Benutzersteuerelement ist, das Sie im vorherigen Verfahren erstellt haben. Die Links werden als Standard-Label-Serversteuerung hinzugefügt, ähnlich wie Sie den statischen Text für den Hauptbereich erstellt haben. Obwohl die einzelnen Serversteuerelemente, die das Benutzersteuerelement enthält, theoretisch direkt in der Zone enthalten sein könnten (wie z. B. das Bezeichnungssteuerelement), sind sie es in diesem Fall nicht. Stattdessen sind sie Teil des Benutzersteuerelements, das Sie im vorherigen Verfahren erstellt haben. Dies veranschaulicht eine gängige Methode zum Packen von Steuerelementen und zusätzlichen Funktionen in einem Benutzersteuerelement und anschließendem Verweisen auf dieses Steuerelement in einer Zone als Webpart-Steuerelement.

Zur Laufzeit umschließt das Webparts-Steuerelementsatz beide Steuerelemente mit GenericWebPart-Steuerelementen. Wenn ein GenericWebPart-Steuerelement ein Webserversteuerelement umschließt, ist das generische Webpart-Steuerelement das übergeordnete Steuerelement, und Sie können über die ChildControl-Eigenschaft des übergeordneten Steuerelements auf das Serversteuerelement zugreifen. Diese Verwendung generischer Webpartsteuerelemente ermöglicht standardmäßigen Webserversteuerelementen dasselbe grundlegende Verhalten und Attribute wie Webpart-Steuerelemente, die von der WebPart-Klasse abgeleitet werden.

So fügen Sie Webparts-Steuerelemente zur Seitenleiste hinzu

1. Öffnen Sie die WebPartsDemo.aspx Seite.

2. Wechseln zur Entwurfsansicht .

3. Ziehen Sie die von Ihnen erstellte Benutzersteuerelementseite SearchUserControl.ascx aus dem Projektmappen-Explorer in die Zone, deren ID-Eigenschaft auf SidebarZone festgelegt ist, und legen Sie sie dort ab.

4. Speichern Sie die WebPartsDemo.aspx Seite.

5. Wechseln zur Quellansicht .

6. Fügen Sie innerhalb des asp:webpartzone-Elements für die <SidebarZone direkt über dem Verweis auf Ihr Benutzersteuerelement ein >asp:label-Element< mit enthaltenen Links hinzu, wie im folgenden Beispiel> gezeigt. Fügen Sie dem Benutzersteuerelementtag außerdem ein Title-Attribut mit dem Wert "Suchen" hinzu, wie gezeigt.

   <asp:WebPartZone id="SidebarZone" runat="server"
                    headertext="Sidebar">
       <zonetemplate>
           <asp:label runat="server" id="linksPart" title="My Links">
               <a href="http://www.asp.net">ASP.NET site</a>
               <br />
               <a href="http://www.gotdotnet.com">GotDotNet</a>
               <br />
               <a href="http://www.contoso.com">Contoso.com</a>
               <br />
           </asp:label>
           <uc1:SearchUserControl id="searchPart"
             runat="server" title="Search" />
       </zonetemplate>
   </asp:WebPartZone>
   

7. Speichern und schließen Sie die Datei.

Jetzt können Sie Ihre Seite testen, indem Sie in Ihrem Browser darauf navigieren. Auf der Seite werden die beiden Zonen angezeigt. Der folgende Screenshot zeigt die Seite.

Webpart-Demoseite mit zwei Zonen

Abbildung 3: Screenshot von Web Parts VS-Durchgang 1

In der Titelleiste jedes Steuerelements handelt es sich um einen Pfeil nach unten, der Zugriff auf ein Verbenmenü mit verfügbaren Aktionen ermöglicht, die Sie für ein Steuerelement ausführen können. Klicken Sie auf das Menü "Verben" für eines der Steuerelemente, und klicken Sie dann auf das Verb " Minimieren ", und beachten Sie, dass das Steuerelement minimiert ist. Klicken Sie im Menü "Verben" auf "Wiederherstellen", und das Steuerelement kehrt zur normalen Größe zurück.

Ermöglichen von Benutzern zum Bearbeiten von Seiten und Ändern des Layouts

Webparts bieten Benutzern die Möglichkeit, das Layout von Webpart-Steuerelementen zu ändern, indem sie von einer Zone in eine andere gezogen werden. Zusätzlich dazu, dass Benutzer WebPart-Steuerelemente von einer Zone in eine andere verschieben können, können Sie es Benutzern ermöglichen, verschiedene Merkmale der Steuerelemente zu bearbeiten, einschließlich ihrer Darstellung, ihres Layouts und verhaltens. Der Webpart-Steuerelementsatz bietet grundlegende Bearbeitungsfunktionen für WebPart-Steuerelemente . Obwohl dies in dieser exemplarischen Vorgehensweise nicht der Fall ist, können Sie auch benutzerdefinierte Editor-Steuerelemente erstellen, mit denen Benutzer die Features von WebPart-Steuerelementen bearbeiten können. Wie beim Ändern des Speicherorts eines WebPart-Steuerelements basiert die Bearbeitung der Eigenschaften eines Steuerelements auf ASP.NET Personalisierung, um die änderungen zu speichern, die Benutzer vornehmen.

In diesem Teil der exemplarischen Vorgehensweise fügen Sie benutzern die Möglichkeit hinzu, die grundlegenden Merkmale eines WebPart-Steuerelements auf der Seite zu bearbeiten. Um diese Features zu aktivieren, fügen Sie der Seite ein weiteres benutzerdefiniertes Benutzersteuerelement zusammen mit einem <asp:editorzone-Element> und zwei Bearbeitungssteuerelementen hinzu.

So erstellen Sie ein Benutzersteuerelement, das das Ändern des Seitenlayouts ermöglicht

1. Wählen Sie in Visual Studio im Menü "Datei " das Untermenü "Neu " aus, und klicken Sie auf die Option "Datei ".

2. Wählen Sie im Dialogfeld " Neues Element hinzufügen " die Option "Webbenutzersteuerelement" aus. Nennen Sie die neue Datei DisplayModeMenu.ascx. Deaktivieren Sie die Option zum Platzieren von Quellcode in einer separaten Datei.

3. Klicken Sie auf "Hinzufügen", um das neue Steuerelement zu erstellen.

4. Wechseln zur Quellansicht .

5. Entfernen Sie den gesamten vorhandenen Code in der neuen Datei, und fügen Sie den folgenden Code ein. Dieser Benutzersteuerelementcode verwendet Features des Webpart-Steuerelementsatzes, mit denen eine Seite den Ansichts- oder Anzeigemodus ändern kann. Außerdem können Sie die physische Darstellung und das Layout der Seite ändern, während Sie sich in bestimmten Anzeigemodi befinden.

   <%@ Control Language="C#" ClassName="DisplayModeMenuCS" %>
   
   <script runat="server">
   
       // 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" runat="server"
         BorderWidth="1" Width="230" BackColor="lightgray"
           Font-Names="Verdana, Arial, Sans Serif">
           <asp:Label ID="Label1" runat="server"
             Text=" Display Mode" Font-Bold="true"
               Font-Size="8" Width="120" />
           <asp:DropDownList ID="DisplayModeDropdown"
             runat="server" AutoPostBack="true" Width="120"
               OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
           <asp:LinkButton ID="LinkButton1" runat="server"
                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" runat="server"
               GroupingText="Personalization Scope" Font-Bold="true"
               Font-Size="8" Visible="false">
               <asp:RadioButton ID="RadioButton1" runat="server"
                   Text="User" AutoPostBack="true"
                   GroupName="Scope"
                   OnCheckedChanged="RadioButton1_CheckedChanged" />
               <asp:RadioButton ID="RadioButton2" runat="server"
                   Text="Shared" AutoPostBack="true"
                   GroupName="Scope"
                   OnCheckedChanged="RadioButton2_CheckedChanged" />
           </asp:Panel>
       </asp:Panel>
   </div>
   

6. Speichern Sie die Datei, indem Sie auf das Symbol "Speichern" auf der Symbolleiste klicken oder im Menü "Datei" die Option "Speichern" auswählen.

So können Benutzer das Layout ändern

1. Öffnen Sie die WebPartsDemo.aspx Seite, und wechseln Sie zur Entwurfsansicht .

2. Positionieren Sie die Einfügemarke in der Entwurfsansicht direkt nach dem zuvor hinzugefügten WebPartManager-Steuerelement . Fügen Sie nach dem Text eine harte Rückgabe hinzu, sodass nach dem WebPartManager-Steuerelement eine leere Zeile vorhanden ist. Platzieren Sie die Einfügemarke in der leeren Zeile.

3. Ziehen Sie das soeben erstellte Benutzersteuerelement (die Datei heißt DisplayModeMenu.ascx) in die WebPartsDemo.aspx Seite, und legen Sie es in der leeren Zeile ab.

4. Ziehen Sie ein EditorZone-Steuerelement aus dem WebParts-Abschnitt der Toolbox in die verbleibende geöffnete Tabellenzelle auf der WebPartsDemo.aspx Seite.

5. Ziehen Sie im Abschnitt "WebParts" der Toolbox ein AppearanceEditorPart-Steuerelement und ein LayoutEditorPart-Steuerelement in das EditorZone-Steuerelement .

6. Wechseln zur Quellansicht . Der resultierende Code in der Tabellenzelle sollte dem folgenden Code ähneln.

   <td valign="top">
       <asp:EditorZone ID="EditorZone1" runat="server">
           <ZoneTemplate>
               <asp:AppearanceEditorPart ID="AppearanceEditorPart1"
                 runat="server" />
               <asp:LayoutEditorPart ID="LayoutEditorPart1"
                 runat="server" />
           </ZoneTemplate>
       </asp:EditorZone>
   </td>
   

7. Speichern Sie die WebPartsDemo.aspx Datei. Sie haben ein Benutzersteuerelement erstellt, mit dem Sie Anzeigemodi ändern und das Seitenlayout ändern können, und Sie haben auf das Steuerelement auf der primären Webseite verwiesen.

Sie können nun die Funktion testen, um Seiten zu bearbeiten und das Layout zu ändern.

So testen Sie Layoutänderungen

1. Laden Sie die Seite in einem Browser.
2. Klicken Sie auf das Dropdownmenü "Anzeigemodus ", und wählen Sie "Bearbeiten" aus. Die Zonentitel werden angezeigt.
3. Ziehen Sie das Steuerelement "Meine Links" über die Titelleiste aus der Randleiste bis zum unteren Rand der Hauptzone. Ihre Seite sollte wie der folgende Screenshot aussehen.

Webpart-Demoseite mit verschobenen Steuerelement "Meine Links"

Abbildung 4: Screenshot von Web Parts VS Walkthrough 2

1. Klicken Sie auf das Dropdownmenü " Anzeigemodus ", und wählen Sie "Durchsuchen" aus. Die Seite wird aktualisiert, die Zonennamen verschwinden, und das Steuerelement "Meine Verknüpfungen" bleibt dort, wo Sie sie positioniert haben.

2. Um zu veranschaulichen, dass die Personalisierung funktioniert, schließen Sie den Browser, und laden Sie die Seite erneut. Die von Ihnen vorgenommenen Änderungen werden für zukünftige Browsersitzungen gespeichert.

3. Wählen Sie im Menü "Anzeigemodus" die Option "Bearbeiten" aus.

   Jedes Steuerelement auf der Seite wird jetzt mit einem Abwärtspfeil in der Titelleiste angezeigt, das das Dropdownmenü "Verben" enthält.

4. Klicken Sie auf den Pfeil, um das Menü "Verben" im Steuerelement "Meine Links" anzuzeigen. Klicken Sie auf das Verb "Bearbeiten" .

   Das EditorZone-Steuerelement wird angezeigt, wobei die von Ihnen hinzugefügten EditorPart-Steuerelemente angezeigt werden.

5. Ändern Sie im Abschnitt "Darstellung " des Bearbeitungssteuerelements den Titel in "Meine Favoriten", verwenden Sie die Dropdownliste "Chrome-Typ ", um "Nur Titel" auszuwählen, und klicken Sie dann auf "Übernehmen". Der folgende Screenshot zeigt die Seite im Bearbeitungsmodus.

Webparts-Demoseite im Bearbeitungsmodus

Abbildung 5: Web Parts gegenüber Anleitung 3 Bildschirmfoto

1. Klicken Sie auf das Menü "Anzeigemodus ", und wählen Sie " Durchsuchen" aus, um zum Suchmodus zurückzukehren.
2. Das Steuerelement verfügt jetzt über einen aktualisierten Titel und keinen Rahmen, wie im folgenden Screenshot dargestellt.

Demoseite für bearbeitete Webparts

Abbildung 4: Webparts VS Exemplarische Vorgehensweise 4 Screenshot

Hinzufügen von Webparts zur Laufzeit

Sie können es Benutzern auch ermöglichen, ihrer Seite zur Laufzeit Webparts-Steuerelemente hinzuzufügen. Konfigurieren Sie dazu die Seite mit einem Webpartkatalog, der eine Liste der Webpart-Steuerelemente enthält, die Sie Benutzern zur Verfügung stellen möchten.

Um Benutzern das Hinzufügen von Webparts zur Laufzeit zu ermöglichen

1. Öffnen Sie die WebPartsDemo.aspx Seite, und wechseln Sie zur Entwurfsansicht .

2. Ziehen Sie auf der Registerkarte "WebParts" der Toolbox ein CatalogZone-Steuerelement in die rechte Spalte der Tabelle unter den EditorZone-Steuerelementen.

   Beide Steuerelemente können sich in derselben Tabellenzelle befinden, da sie nicht gleichzeitig angezeigt werden.

3. Weisen Sie im Eigenschaftenbereich der HeaderText-Eigenschaft des CatalogZone-Steuerelements die Zeichenfolge Webparts hinzufügen zu.

4. Ziehen Sie im Abschnitt "WebParts" der Toolbox ein DeclarativeCatalogPart-Steuerelement in den Inhaltsbereich des CatalogZone-Steuerelements.

5. Klicken Sie in der oberen rechten Ecke des DeclarativeCatalogPart-Steuerelements auf den Pfeil, um das Menü "Aufgaben" verfügbar zu machen, und wählen Sie dann " Vorlagen bearbeiten" aus.

6. Ziehen Sie im Abschnitt "Standard " der Toolbox ein FileUpload-Steuerelement und ein Kalendersteuerelement in den Abschnitt "WebPartsTemplate " des DeclarativeCatalogPart-Steuerelements .

7. Wechseln zur Quellansicht . Überprüfen Sie den Quellcode des <asp:catalogzone-Elements> . Beachten Sie, dass das DeclarativeCatalogPart-Steuerelement ein <Webpartstemplate-Element> mit den beiden eingeschlossenen Serversteuerelementen enthält, die Sie ihrer Seite aus dem Katalog hinzufügen können.

8. Fügen Sie jeder der Steuerelemente, die Sie dem Katalog hinzugefügt haben, eine Title-Eigenschaft hinzu, indem Sie den Zeichenfolgenwert verwenden, der für jeden Titel im folgenden Codebeispiel angezeigt wird. Obwohl der Titel keine Eigenschaft ist, die Sie normalerweise zur Entwurfszeit für diese beiden Serversteuerelemente festlegen können, werden diese Steuerelemente, wenn ein Benutzer sie zur Laufzeit aus dem Katalog einer WebPartZone hinzufügt, jeweils mit einem GenericWebPart-Steuerelement umschlossen. Dadurch können sie als Webpart-Steuerelemente fungieren, sodass sie Titel anzeigen können.

   Der Code für die beiden Steuerelemente, die im DeclarativeCatalogPart-Steuerelement enthalten sind, sollte wie folgt aussehen.

   <asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server">
       <WebPartsTemplate>
           <asp:Calendar ID="Calendar1" runat="server" title="My Calendar" />
           <asp:FileUpload ID="FileUpload1" runat="server" title="Upload Files" />
       </WebPartsTemplate>
   </asp:DeclarativeCatalogPart>
   

9. Speichern Sie die Seite.

Sie können den Katalog jetzt testen.

So testen Sie den Webpartkatalog

1. Laden Sie die Seite in einem Browser.

2. Klicken Sie auf das Dropdownmenü " Anzeigemodus ", und wählen Sie "Katalog" aus.

   Der Katalog mit dem Titel "Webparts hinzufügen " wird angezeigt.

3. Ziehen Sie das Steuerelement "Meine Favoriten" aus der Hauptzone zurück zum oberen Rand der Randleistenzone, und legen Sie es dort ab.

4. Aktivieren Sie im Katalog " Webparts hinzufügen " beide Kontrollkästchen, und wählen Sie dann " Main " aus der Dropdownliste aus, die die verfügbaren Zonen enthält.

5. Klicken Sie im Katalog auf "Hinzufügen" . Die Steuerelemente werden der Hauptzone hinzugefügt. Wenn Sie möchten, können Sie ihrer Seite mehrere Instanzen von Steuerelementen aus dem Katalog hinzufügen.

   Der folgende Screenshot zeigt die Seite mit dem Dateiupload-Steuerelement und dem Kalender in der Hauptzone.

Abbildung 5: Steuerelemente, die der Hauptzone aus dem Katalog 6 hinzugefügt wurden. Klicken Sie auf das Dropdownmenü " Anzeigemodus ", und wählen Sie "Durchsuchen" aus. Der Katalog wird ausgeblendet, und die Seite wird aktualisiert. 7. Schließen Sie den Browser. Laden Sie die Seite erneut. Die von Ihnen vorgenommenen Änderungen bleiben erhalten.