Profils, thèmes et composants WebPart

Article
07/13/2023

Des changements majeurs ont été apportés à la configuration et à l’instrumentation dans ASP.NET 2.0. La nouvelle API de configuration ASP.NET permet d’effectuer des modifications de configuration par programmation. En outre, de nombreux nouveaux paramètres de configuration permettent de nouvelles configurations et de nouvelles instrumentations.

ASP.NET 2.0 représente une amélioration substantielle dans le domaine des sites Web personnalisés. Outre les fonctionnalités d’appartenance que nous avons déjà couvertes, ASP.NET profils, thèmes et composants WebPart améliorent considérablement la personnalisation dans les sites Web.

profils ASP.NET

ASP.NET profils sont similaires aux sessions. La différence est qu’un profil est persistant alors qu’une session est perdue lorsque le navigateur est fermé. Une autre grande différence entre les sessions et les profils est que les profils sont fortement typés, ce qui vous fournit IntelliSense pendant le processus de développement.

Un profil est défini dans le fichier de configuration des machines ou dans le fichier web.config de l’application. (Vous ne pouvez pas définir de profil dans un fichier de sous-dossiers web.config.) Le code ci-dessous définit un profil pour stocker le prénom et le nom des visiteurs du site Web.

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

Le type de données par défaut d’une propriété de profil est System.String. Dans l’exemple ci-dessus, aucun type de données n’a été spécifié. Par conséquent, les propriétés FirstName et LastName sont toutes deux de type String. Comme mentionné précédemment, les propriétés de profil sont fortement typées. Le code ci-dessous ajoute une nouvelle propriété pour l’âge de type Int32.

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

Les profils sont généralement utilisés avec l’authentification par formulaire ASP.NET. Lorsqu’il est utilisé en combinaison avec l’authentification par formulaire, chaque utilisateur a un profil distinct associé à son ID d’utilisateur. Toutefois, il est également possible d’autoriser l’utilisation de profils dans une application anonyme à l’aide de l’élément <anonymousIdentification> dans le fichier de configuration avec l’attribut allowAnonymous , comme indiqué ci-dessous :

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

Lorsqu’un utilisateur anonyme navigue sur le site, ASP.NET crée un instance de ProfileCommon pour l’utilisateur. Ce profil utilise un ID unique stocké dans un cookie sur le navigateur pour identifier l’utilisateur en tant que visiteur unique. De cette façon, vous pouvez stocker des informations de profil pour les utilisateurs qui naviguent de manière anonyme.

Groupes de profils

Il est possible de regrouper les propriétés des profils. En regroupant des propriétés, il est possible de simuler plusieurs profils pour une application spécifique.

La configuration suivante configure une propriété FirstName et LastName pour deux groupes : Acheteurs et prospects.

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

Il est ensuite possible de définir des propriétés sur un groupe particulier comme suit :

Profile.Buyers.NumberOfPurchases += 1;

Stockage d’objets complexes

Jusqu’à présent, les exemples que nous avons abordés stockent des types de données simples dans un profil. Il est également possible de stocker des types de données complexes dans un profil en spécifiant la méthode de sérialisation à l’aide de l’attribut serializeAs comme suit :

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

Dans ce cas, le type est PurchaseInvoice. La classe PurchaseInvoice doit être marquée comme sérialisable et peut contenir n’importe quel nombre de propriétés. Par exemple, si PurchaseInvoice a une propriété appelée NumItemsPurchased, vous pouvez faire référence à cette propriété dans le code comme suit :

Profile.PurchaseInvoice.NumItemsPurchased

Héritage de profil

Il est possible de créer un profil à utiliser dans plusieurs applications. En créant une classe de profil qui dérive de ProfileBase, vous pouvez réutiliser un profil dans plusieurs applications à l’aide de l’attribut inherits , comme indiqué ci-dessous :

<profile inherits="PurchasingProfile" />

Dans ce cas, la classe PurchasingProfile ressemble à ceci :

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

Fournisseurs de profils

ASP.NET profils utilisent le modèle de fournisseur. Le fournisseur par défaut stocke les informations dans une base de données SQL Server Express dans le dossier App_Data de l’application web à l’aide du fournisseur SqlProfileProvider. Si la base de données n’existe pas, ASP.NET la crée automatiquement lorsque le profil tente de stocker des informations.

Toutefois, dans certains cas, vous pouvez développer votre propre fournisseur de profil. La fonctionnalité de profil ASP.NET vous permet d’utiliser facilement différents fournisseurs.

Vous créez un fournisseur de profil personnalisé dans les cas suivants :

Vous devez stocker les informations de profil dans une source de données, telle que dans une base de données FoxPro ou dans une base de données Oracle, qui n’est pas prise en charge par les fournisseurs de profils inclus dans le .NET Framework.
Vous devez gérer les informations de profil à l’aide d’un schéma de base de données différent du schéma de base de données utilisé par les fournisseurs inclus dans le .NET Framework. Un exemple courant est que vous souhaitez intégrer des informations de profil avec des données utilisateur dans une base de données SQL Server existante.

Classes requises

Pour implémenter un fournisseur de profils, vous créez une classe qui hérite de la classe abstraite System.Web.Profile.ProfileProvider. La classe abstraite ProfileProvider hérite à son tour de la classe abstraite System.Configuration.SettingsProvider, qui hérite de la classe abstraite System.Configuration.Provider.ProviderBase. En raison de cette chaîne d’héritage, en plus des membres requis de la classe ProfileProvider , vous devez implémenter les membres requis des classes SettingsProvider et ProviderBase .

Les tableaux suivants décrivent les propriétés et méthodes que vous devez implémenter à partir des classes abstraites ProviderBase, SettingsProvider et ProfileProvider .

Membres ProviderBase

Membre	Description
Initialize (méthode)	Prend comme entrée le nom du fournisseur instance et un NameValueCollection des paramètres de configuration. Permet de définir des options et des valeurs de propriété pour le fournisseur instance, y compris les valeurs et options spécifiques à l’implémentation spécifiées dans le fichier de configuration de l’ordinateur ou de Web.config.

SettingsProvider, membres

Membre	Description
Propriété ApplicationName	Nom de l’application stocké avec chaque profil. Le fournisseur de profils utilise le nom de l’application pour stocker les informations de profil séparément pour chaque application. Cela permet à plusieurs applications ASP.NET d’utiliser la même source de données sans conflit si le même nom d’utilisateur est créé dans différentes applications. Plusieurs applications ASP.NET peuvent également partager une source de données de profil en spécifiant le même nom d’application.
Méthode GetPropertyValues	Prend comme entrée un objet SettingsContext et un objet SettingsPropertyCollection. Le SettingsContext fournit des informations sur l’utilisateur. Vous pouvez utiliser les informations comme clé primaire pour récupérer les informations de propriété de profil pour l’utilisateur. Utilisez l’objet SettingsContext pour obtenir le nom d’utilisateur et si l’utilisateur est authentifié ou anonyme. SettingsPropertyCollection contient une collection d’objets SettingsProperty. Chaque objet SettingsProperty fournit le nom et le type de la propriété, ainsi que des informations supplémentaires telles que la valeur par défaut de la propriété et si la propriété est en lecture seule. La méthode GetPropertyValues remplit un SettingsPropertyValueCollection avec des objets SettingsPropertyValue en fonction des objets SettingsProperty fournis en entrée. Les valeurs de la source de données de l’utilisateur spécifié sont affectées aux propriétés PropertyValue pour chaque objet SettingsPropertyValue et la collection entière est retournée. L’appel de la méthode met également à jour la valeur LastActivityDate pour le profil utilisateur spécifié sur la date et l’heure actuelles.
Méthode SetPropertyValues	Prend comme entrée un objet SettingsContext et SettingsPropertyValueCollection . Le SettingsContext fournit des informations sur l’utilisateur. Vous pouvez utiliser les informations comme clé primaire pour récupérer les informations de propriété de profil pour l’utilisateur. Utilisez l’objet SettingsContext pour obtenir le nom d’utilisateur et si l’utilisateur est authentifié ou anonyme. SettingsPropertyValueCollection contient une collection d’objets SettingsPropertyValue. Chaque objet SettingsPropertyValue fournit le nom, le type et la valeur de la propriété, ainsi que des informations supplémentaires telles que la valeur par défaut de la propriété et indique si la propriété est en lecture seule. La méthode SetPropertyValues met à jour les valeurs des propriétés de profil dans la source de données pour l’utilisateur spécifié. L’appel de la méthode met également à jour les valeurs LastActivityDate et LastUpdatedDate pour le profil utilisateur spécifié à la date et à l’heure actuelles.

ProfileProvider, membres

Membre	Description
DeleteProfiles, méthode	Prend comme entrée un tableau de chaînes de noms d’utilisateur et supprime de la source de données toutes les informations de profil et les valeurs de propriété pour les noms spécifiés où le nom de l’application correspond à la valeur de la propriété ApplicationName . Si votre source de données prend en charge les transactions, il est recommandé d’inclure toutes les opérations de suppression dans une transaction et de restaurer la transaction et de lever une exception en cas d’échec d’une opération de suppression.
DeleteProfiles, méthode	Prend comme entrée une collection d’objets ProfileInfo et supprime de la source de données toutes les informations de profil et les valeurs de propriété pour chaque profil où le nom de l’application correspond à la valeur de propriété ApplicationName . Si votre source de données prend en charge les transactions, il est recommandé d’inclure toutes les opérations de suppression dans une transaction, de restaurer la transaction et de lever une exception en cas d’échec d’une opération de suppression.
DeleteInactiveProfiles, méthode	Prend comme entrée une valeur ProfileAuthenticationOption et un objet DateTime et supprime de la source de données toutes les informations de profil et les valeurs de propriété où la date de la dernière activité est inférieure ou égale à la date et l’heure spécifiées et où le nom de l’application correspond à la valeur de la propriété ApplicationName . Le paramètre ProfileAuthenticationOption spécifie si seuls les profils anonymes, seuls les profils authentifiés ou tous les profils doivent être supprimés. Si votre source de données prend en charge les transactions, il est recommandé d’inclure toutes les opérations de suppression dans une transaction, de restaurer la transaction et de lever une exception en cas d’échec d’une opération de suppression.
GetAllProfiles, méthode	Prend comme entrée une valeur ProfileAuthenticationOption , un entier qui spécifie l’index de page, un entier qui spécifie la taille de page et une référence à un entier qui sera défini sur le nombre total de profils. Renvoie un Objet ProfileInfoCollection qui contient des objets ProfileInfo pour tous les profils de la source de données où le nom de l’application correspond à la valeur de la propriété ApplicationName . Le paramètre ProfileAuthenticationOption spécifie si seuls les profils anonymes, seuls les profils authentifiés ou tous les profils doivent être retournés. Les résultats retournés par la méthode GetAllProfiles sont limités par les valeurs d’index de page et de taille de page. La valeur de taille de page spécifie le nombre maximal d’objets ProfileInfo à retourner dans profileInfoCollection. La valeur d’index de la page spécifie la page de résultats à retourner, où 1 identifie la première page. Le paramètre pour le nombre total d’enregistrements est un paramètre out (vous pouvez utiliser ByRef en Visual Basic) qui est défini sur le nombre total de profils. Par exemple, si le magasin de données contient 13 profils pour l’application et que la valeur d’index de page est 2 avec une taille de page de 5, le ProfileInfoCollection retourné contient les sixième à dixième profils. La valeur totale des enregistrements est définie sur 13 lorsque la méthode retourne.
Méthode GetAllInactiveProfiles	Prend comme entrée une valeur ProfileAuthenticationOption , un objet DateTime , un entier qui spécifie l’index de page, un entier qui spécifie la taille de page et une référence à un entier qui sera défini sur le nombre total de profils. Renvoie un Objet ProfileInfoCollection qui contient des objets ProfileInfo pour tous les profils de la source de données où la date de la dernière activité est inférieure ou égale au DateTime spécifié et où le nom de l’application correspond à la valeur de la propriété ApplicationName . Le paramètre ProfileAuthenticationOption spécifie si seuls les profils anonymes, seuls les profils authentifiés ou tous les profils doivent être retournés. Les résultats retournés par la méthode GetAllInactiveProfiles sont limités par les valeurs d’index de page et de taille de page. La valeur de taille de page spécifie le nombre maximal d’objets ProfileInfo à retourner dans profileInfoCollection. La valeur d’index de la page spécifie la page de résultats à retourner, où 1 identifie la première page. Le paramètre pour le nombre total d’enregistrements est un paramètre out (vous pouvez utiliser ByRef en Visual Basic) qui est défini sur le nombre total de profils. Par exemple, si le magasin de données contient 13 profils pour l’application et que la valeur d’index de page est 2 avec une taille de page de 5, le ProfileInfoCollection retourné contient les sixième à dixième profils. La valeur totale des enregistrements est définie sur 13 lorsque la méthode retourne.
Méthode FindProfilesByUserName	Prend comme entrée une valeur ProfileAuthenticationOption , une chaîne contenant un nom d’utilisateur, un entier qui spécifie l’index de page, un entier qui spécifie la taille de page et une référence à un entier qui sera défini sur le nombre total de profils. Renvoie un Objet ProfileInfoCollection qui contient des objets ProfileInfo pour tous les profils de la source de données où le nom d’utilisateur correspond au nom d’utilisateur spécifié et où le nom de l’application correspond à la valeur de la propriété ApplicationName . Le paramètre ProfileAuthenticationOption spécifie si seuls les profils anonymes, seuls les profils authentifiés ou tous les profils doivent être retournés. Si votre source de données prend en charge des fonctionnalités de recherche supplémentaires, telles que des caractères génériques, vous pouvez fournir des fonctionnalités de recherche plus étendues pour les noms d’utilisateur. Les résultats retournés par la méthode FindProfilesByUserName sont limités par les valeurs d’index de page et de taille de page. La valeur de taille de page spécifie le nombre maximal d’objets ProfileInfo à retourner dans profileInfoCollection. La valeur d’index de la page spécifie la page de résultats à retourner, où 1 identifie la première page. Le paramètre pour le nombre total d’enregistrements est un paramètre out (vous pouvez utiliser ByRef en Visual Basic) qui est défini sur le nombre total de profils. Par exemple, si le magasin de données contient 13 profils pour l’application et que la valeur d’index de page est 2 avec une taille de page de 5, le ProfileInfoCollection retourné contient les sixième à dixième profils. La valeur totale des enregistrements est définie sur 13 lorsque la méthode retourne.
Méthode FindInactiveProfilesByUserName	Prend comme entrée une valeur ProfileAuthenticationOption , une chaîne contenant un nom d’utilisateur, un objet DateTime , un entier qui spécifie l’index de page, un entier qui spécifie la taille de la page et une référence à un entier qui sera défini sur le nombre total de profils. Renvoie un Objet ProfileInfoCollection qui contient des objets ProfileInfo pour tous les profils de la source de données où le nom d’utilisateur correspond au nom d’utilisateur spécifié, où la date de la dernière activité est inférieure ou égale au DateTime spécifié, et où le nom de l’application correspond à la valeur de la propriété ApplicationName . Le paramètre ProfileAuthenticationOption spécifie si seuls les profils anonymes, seuls les profils authentifiés ou tous les profils doivent être retournés. Si votre source de données prend en charge des fonctionnalités de recherche supplémentaires, telles que des caractères génériques, vous pouvez fournir des fonctionnalités de recherche plus étendues pour les noms d’utilisateur. Les résultats retournés par la méthode FindInactiveProfilesByUserName sont limités par les valeurs d’index de page et de taille de page. La valeur de taille de page spécifie le nombre maximal d’objets ProfileInfo à retourner dans profileInfoCollection. La valeur d’index de la page spécifie la page de résultats à retourner, où 1 identifie la première page. Le paramètre pour le nombre total d’enregistrements est un paramètre out (vous pouvez utiliser ByRef en Visual Basic) qui est défini sur le nombre total de profils. Par exemple, si le magasin de données contient 13 profils pour l’application et que la valeur d’index de page est 2 avec une taille de page de 5, le ProfileInfoCollection retourné contient les sixième à dixième profils. La valeur totale des enregistrements est définie sur 13 lorsque la méthode retourne.
Méthode GetNumberOfInActiveProfiles	Prend comme entrée une valeur ProfileAuthenticationOption et un objet DateTime et retourne un nombre de tous les profils dans la source de données où la date de la dernière activité est inférieure ou égale au DateTime spécifié et où le nom de l’application correspond à la valeur de la propriété ApplicationName . Le paramètre ProfileAuthenticationOption spécifie si seuls les profils anonymes, seuls les profils authentifiés ou tous les profils doivent être comptés.

ApplicationName

Étant donné que les fournisseurs de profils stockent les informations de profil séparément pour chaque application, vous devez vous assurer que votre schéma de données inclut le nom de l’application et que les requêtes et les mises à jour incluent également le nom de l’application. Par exemple, la commande suivante est utilisée pour récupérer une valeur de propriété à partir d’une base de données en fonction du nom d’utilisateur et du fait que le profil est anonyme, et garantit que la valeur ApplicationName est incluse dans la requête.

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

thèmes ASP.NET

Que sont les thèmes ASP.NET 2.0 ?

L’un des aspects les plus importants d’une application web est une apparence cohérente sur le site. ASP.NET 1.x, les développeurs utilisent généralement des feuilles de style en cascade (CSS) pour implémenter une apparence cohérente. ASP.NET thèmes 2.0 améliorent sensiblement css, car ils donnent au développeur ASP.NET la possibilité de définir l’apparence des contrôles serveur ASP.NET ainsi que des éléments HTML. ASP.NET thèmes peuvent être appliqués à des contrôles individuels, à une page Web spécifique ou à une application web entière. Les thèmes utilisent une combinaison de fichiers CSS, d’un fichier d’apparence facultatif et d’un répertoire Images facultatif si des images sont nécessaires. Le fichier d’apparence contrôle l’apparence visuelle de ASP.NET contrôles serveur.

Où les thèmes sont-ils stockés ?

L’emplacement où les thèmes sont stockés diffère en fonction de leur étendue. Les thèmes qui peuvent être appliqués à n’importe quelle application sont stockés dans le dossier suivant :

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

Un thème spécifique à une application particulière est stocké dans un App\_Themes\<Theme\_Name> répertoire à la racine du site Web.

Notes

Un fichier d’apparence doit uniquement modifier les propriétés de contrôle serveur qui affectent l’apparence.

Un thème global est un thème qui peut être appliqué à n’importe quelle application ou site Web s’exécutant sur le serveur Web. Ces thèmes sont stockés par défaut dans asp. Répertoire NETClientfiles\Themes qui se trouve à l’intérieur du répertoire v2.x.xxxxx. Vous pouvez également déplacer les fichiers de thème dans le dossier aspnet_client/system_web/[version]/Themes/[theme_name] à la racine de votre site Web.

Les thèmes spécifiques à l’application ne peuvent être appliqués qu’à l’application dans laquelle résident les fichiers. Ces fichiers sont stockés dans le App\_Themes/<theme\_name> répertoire à la racine du site Web.

Composants d’un thème

Un thème est constitué d’un ou plusieurs fichiers CSS, d’un fichier d’apparence facultatif et d’un dossier Images facultatif. Les fichiers CSS peuvent être n’importe quel nom de votre choix (par exemple default.css ou theme.css, etc.) et doivent se trouver à la racine du dossier themes. Les fichiers CSS sont utilisés pour définir des classes css ordinaires et des attributs pour des sélecteurs spécifiques. Pour appliquer l’une des classes CSS à un élément page, la propriété CSSClass est utilisée.

Le fichier d’apparence est un fichier XML qui contient des définitions de propriétés pour ASP.NET contrôles serveur. Le code ci-dessous est un exemple de fichier d’apparence.

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

La figure 1 ci-dessous montre une petite page ASP.NET parcourue sans thème appliqué. La figure 2 montre le même fichier avec un thème appliqué. La couleur d’arrière-plan et la couleur du texte sont configurées via un fichier CSS. L’apparence du bouton et de la zone de texte est configurée à l’aide du fichier d’apparence répertorié ci-dessus.

Aucun thème

Figure 1 : Aucun thème

Thème appliqué

Figure 2 : Thème appliqué

Le fichier d’apparence répertorié ci-dessus définit une apparence par défaut pour tous les contrôles TextBox et Button. Cela signifie que tous les contrôles TextBox et Button insérés sur une page prennent cette apparence. Vous pouvez également définir une apparence qui peut être appliquée à des instances spécifiques de ces contrôles à l’aide de la propriété SkinID du contrôle.

Le code ci-dessous définit une apparence pour un contrôle Button. Seuls les contrôles Button avec une propriété SkinIDde goButton prennent l’apparence de l’apparence.

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

Vous ne pouvez avoir qu’une seule apparence par défaut par type de contrôle serveur. Si vous avez besoin d’apparences supplémentaires, vous devez utiliser la propriété SkinID.

Application de thèmes à des pages

Un thème peut être appliqué à l’aide de l’une des méthodes suivantes :

Dans l’élément <pages> du fichier web.config
Dans la @Page directive d’une page
Par programmation

Application d’un thème dans le fichier de configuration

Pour appliquer un thème dans le fichier de configuration des applications, utilisez la syntaxe suivante :

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

Le nom du thème spécifié ici doit correspondre au nom du dossier thèmes. Ce dossier peut exister à l’un des emplacements mentionnés précédemment dans ce cours. Si vous tentez d’appliquer un thème qui n’existe pas, une erreur de configuration se produit.

Application d’un thème dans la directive page

Vous pouvez également appliquer un thème dans la directive @ Page. Cette méthode vous permet d’utiliser un thème pour une page spécifique.

Pour appliquer un thème dans la @Page directive, utilisez la syntaxe suivante :

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

Là encore, le thème spécifié ici doit correspondre au dossier de thème, comme mentionné précédemment. Si vous tentez d’appliquer un thème qui n’existe pas, une défaillance de build se produit. Visual Studio met également en évidence l’attribut et vous informe qu’il n’existe aucun thème de ce type.

Application d’un thème par programmation

Pour appliquer un thème par programmation, vous devez spécifier la propriété Theme de la page dans la méthode Page_PreInit .

Pour appliquer un thème par programmation, utilisez la syntaxe suivante :

Page.Theme = CoolTheme;

Il est nécessaire d’appliquer le thème dans la méthode PreInit en raison du cycle de vie de la page. Si vous l’appliquez après ce point, le thème des pages aura déjà été appliqué par le runtime et une modification à ce stade est trop tard dans le cycle de vie. Si vous appliquez un thème qui n’existe pas, une exception HttpException se produit. Lorsqu’un thème est appliqué par programmation, un avertissement de build se produit si des contrôles serveur ont une propriété SkinID spécifiée. Cet avertissement est destiné à vous informer qu’aucun thème n’est appliqué de manière déclarative et qu’il peut être ignoré.

Exercice 1 : Application d’un thème

Dans cet exercice, vous allez appliquer un thème ASP.NET à un site Web.

Important

Si vous utilisez Microsoft Word pour entrer des informations dans un fichier d’apparence, assurez-vous que vous ne remplacez pas les guillemets standard par des guillemets intelligents. Les guillemets intelligents entraînent des problèmes avec les fichiers d’apparence.

Créez un site web ASP.NET.
Cliquez avec le bouton droit sur le projet dans Explorateur de solutions et choisissez Ajouter un nouvel élément.
Choisissez Fichier de configuration web dans la liste des fichiers, puis cliquez sur Ajouter.
Cliquez avec le bouton droit sur le projet dans Explorateur de solutions et choisissez Ajouter un nouvel élément.
Choisissez Fichier d’apparence, puis cliquez sur Ajouter.
Cliquez sur Oui lorsque vous êtes invité à placer le fichier à l’intérieur du dossier App_Themes.
Cliquez avec le bouton droit sur le dossier SkinFile à l’intérieur du dossier App_Themes dans Explorateur de solutions et choisissez Ajouter un nouvel élément.
Choisissez Feuille de style dans la liste des fichiers, puis cliquez sur Ajouter. Vous disposez maintenant de tous les fichiers nécessaires pour implémenter votre nouveau thème. Toutefois, Visual Studio a nommé votre dossier thèmes SkinFile. Cliquez avec le bouton droit sur ce dossier et remplacez le nom par CoolTheme.

Ouvrez le fichier SkinFile.skin et ajoutez le code suivant à la fin du fichier :

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

Enregistrez le fichier SkinFile.skin.
Ouvrez styleSheet.css.
Remplacez tout le texte qu’il contient par ce qui suit :
```
body {
    background-color: #FFDEAD;
}
```
Enregistrez le fichier StyleSheet.css.
Ouvrez la page Default.aspx.
Ajoutez un contrôle TextBox et un contrôle Button.
Enregistrez la page. Maintenant, parcourez la page Default.aspx. Il doit s’afficher sous la forme d’un formulaire Web normal.
Ouvrez le fichier web.config.
Ajoutez ce qui suit directement sous la balise d’ouverture <system.web> :
```
<pages theme="CoolTheme" />
```
Enregistrez le fichier web.config. Maintenant, parcourez la page Default.aspx. Il doit s’afficher avec le thème appliqué.
S’il n’est pas déjà ouvert, ouvrez la page Default.aspx dans Visual Studio.
Sélectionnez le bouton .
Remplacez la propriété SkinID par goButton. Notez que Visual Studio fournit une liste déroulante avec des valeurs SkinID valides pour un contrôle Button.
Enregistrez la page. Maintenant, affichez à nouveau un aperçu de la page dans votre navigateur. Le bouton doit maintenant dire « go » et doit être plus large en apparence.

À l’aide de la propriété SkinID , vous pouvez facilement configurer différentes apparences pour différentes instances d’un type particulier de contrôle de serveur.

Propriété StyleSheetTheme

Jusqu’à présent, nous avons parlé uniquement de l’application de thèmes à l’aide de la propriété Theme. Lors de l’utilisation de la propriété Theme, le fichier d’apparence remplace tous les paramètres déclaratifs pour les contrôles serveur. Par exemple, dans l’exercice 1, vous avez spécifié un SkinID de « goButton » pour le contrôle Button et qui a changé le texte du bouton en « go ». Vous avez peut-être remarqué que la propriété Text du bouton dans le concepteur a été définie sur « Button », mais que le thème l’a dépassé. Le thème remplace toujours tous les paramètres de propriété dans le concepteur.

Si vous souhaitez pouvoir remplacer les propriétés définies dans le fichier d’apparence du thème par des propriétés spécifiées dans le concepteur, vous pouvez utiliser la propriété StyleSheetTheme au lieu de la propriété Theme. La propriété StyleSheetTheme est identique à la propriété Theme, sauf qu’elle ne remplace pas tous les paramètres de propriété explicites comme la propriété Theme.

Pour voir cela en action, ouvrez le fichier web.config du projet dans l’exercice 1 et remplacez l’élément <pages> comme suit :

<pages styleSheetTheme="CoolTheme" />

Maintenant, parcourez la page Default.aspx et vous verrez que le contrôle Button a à nouveau la propriété Text « Button ». En effet, le paramètre de propriété explicite dans le concepteur substitue la propriété Text définie par le skinID goButton.

Substitution de thèmes

Un thème global peut être remplacé en appliquant un thème du même nom dans le dossier App_Themes de l’application. Toutefois, le thème n’est pas appliqué dans un scénario de remplacement true. Si le runtime rencontre des fichiers de thème dans le dossier App_Themes, il applique le thème à l’aide de ces fichiers et ignore le thème global.

La propriété StyleSheetTheme est substituable et peut être remplacée dans le code comme suit :

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

composants WebPart

ASP.NET composants WebPart est un ensemble intégré de contrôles permettant de créer des sites Web qui permettent aux utilisateurs finaux de modifier le contenu, l’apparence et le comportement des pages Web directement à partir d’un navigateur. Les modifications peuvent être appliquées à tous les utilisateurs du site ou à des utilisateurs individuels. Lorsque les utilisateurs modifient des pages et des contrôles, les paramètres peuvent être enregistrés pour conserver les préférences personnelles d’un utilisateur dans les prochaines sessions de navigateur, une fonctionnalité appelée personnalisation. Ces fonctionnalités de composants WebPart signifient que les développeurs peuvent permettre aux utilisateurs finaux de personnaliser une application web dynamiquement, sans intervention du développeur ou de l’administrateur.

À l’aide de l’ensemble de contrôles WebPart, en tant que développeur, vous pouvez permettre aux utilisateurs finaux de :

Personnaliser le contenu de la page. Les utilisateurs peuvent ajouter de nouveaux contrôles WebPart à une page, les supprimer, les masquer ou les réduire comme des fenêtres ordinaires.
Personnaliser la mise en page. Les utilisateurs peuvent faire glisser un contrôle De composants WebPart vers une autre zone d’une page ou modifier son apparence, ses propriétés et son comportement.
Contrôles d’exportation et d’importation. Les utilisateurs peuvent importer ou exporter des paramètres de contrôle de composants WebPart pour les utiliser dans d’autres pages ou sites, en conservant les propriétés, l’apparence et même les données dans les contrôles. Cela réduit les demandes de saisie et de configuration des données pour les utilisateurs finaux.
Créez des connexions. Les utilisateurs peuvent établir des connexions entre des contrôles afin, par exemple, qu’un contrôle de graphique puisse afficher un graphique pour les données dans un contrôle de ticker boursier. Les utilisateurs pouvaient personnaliser non seulement la connexion elle-même, mais aussi l’apparence et les détails de la façon dont le contrôle de graphique affiche les données.
Gérez et personnalisez les paramètres au niveau du site. Les utilisateurs autorisés peuvent configurer des paramètres au niveau du site, déterminer qui peut accéder à un site ou à une page, définir l’accès en fonction du rôle aux contrôles, etc. Par exemple, un utilisateur dans un rôle d’administration peut définir un contrôle De composants WebPart pour qu’il soit partagé par tous les utilisateurs et empêcher les utilisateurs qui ne sont pas administrateurs de personnaliser le contrôle partagé.

Vous travaillez généralement avec des composants WebPart de l’une des trois manières suivantes : créer des pages qui utilisent des contrôles WebPart, créer des contrôles WebPart individuels ou créer des applications WebPart complètes et personnalisables, telles qu’un portail.

Développement de pages

Les développeurs de pages peuvent utiliser des outils de conception visuelle tels que Microsoft Visual Studio 2005 pour créer des pages qui utilisent des composants WebPart. L’un des avantages de l’utilisation d’un outil tel que Visual Studio est que l’ensemble de contrôles De composants WebPart fournit des fonctionnalités pour la création par glisser-déplacer et la configuration de contrôles De composants WebPart dans un concepteur visuel. Par exemple, vous pouvez utiliser le concepteur pour faire glisser une zone de composants WebPart ou un contrôle d’éditeur de composants WebPart sur l’aire de conception, puis configurer le contrôle à droite dans le concepteur à l’aide de l’interface utilisateur fournie par l’ensemble de contrôles De composants WebPart. Cela peut accélérer le développement d’applications WebPart et réduire la quantité de code que vous devez écrire.

Développement de contrôles

Vous pouvez utiliser n’importe quel contrôle de ASP.NET existant comme contrôle WebPart, y compris les contrôles serveur Web standard, les contrôles serveur personnalisés et les contrôles utilisateur. Pour un contrôle par programme maximal de votre environnement, vous pouvez également créer des contrôles WebPart personnalisés qui dérivent de la classe WebPart. Pour le développement de contrôles de composants WebPart individuels, vous allez généralement créer un contrôle utilisateur et l’utiliser comme contrôle De composants WebPart, ou développer un contrôle De composants WebPart personnalisé.

À titre d’exemple de développement d’un contrôle De composants WebPart personnalisé, vous pouvez créer un contrôle pour fournir l’une des fonctionnalités fournies par d’autres contrôles serveur ASP.NET qui peuvent être utiles pour créer un package en tant que contrôle de composants WebPart personnalisables : calendriers, listes, informations financières, actualités, calculatrices, contrôles de texte enrichi pour la mise à jour du contenu, grilles modifiables qui se connectent à des bases de données, graphiques qui mettent à jour dynamiquement leurs affichages, ou informations météorologiques et de voyage. Si vous fournissez votre contrôle à un concepteur visuel, tout développeur de pages utilisant Visual Studio peut simplement faire glisser votre contrôle dans une zone de composants WebPart et le configurer au moment de la conception sans avoir à écrire de code supplémentaire.

La personnalisation est la base de la fonctionnalité de composants WebPart. Il permet aux utilisateurs de modifier ou de personnaliser la disposition, l’apparence et le comportement des contrôles De composants WebPart sur une page. Les paramètres personnalisés sont de longue durée : ils sont conservés non seulement pendant la session actuelle du navigateur (comme avec l’état d’affichage), mais également dans le stockage à long terme, de sorte que les paramètres d’un utilisateur sont également enregistrés pour les prochaines sessions de navigateur. La personnalisation est activée par défaut pour les pages de composants WebPart.

Les composants structurels de l’interface utilisateur s’appuient sur la personnalisation et fournissent la structure de base et les services nécessaires à tous les contrôles WebPart. Un composant structurel de l’interface utilisateur requis sur chaque page de composants WebPart est le contrôle WebPartManager. Bien qu’il ne soit jamais visible, ce contrôle a pour tâche essentielle de coordonner tous les contrôles WebPart d’une page. Par exemple, il effectue le suivi de tous les contrôles WebPart individuels. Il gère les zones de composants WebPart (régions qui contiennent des contrôles WebPart sur une page) et les contrôles dans quelles zones. Il suit et contrôle également les différents modes d’affichage d’une page, tels que parcourir, se connecter, modifier ou catalogue, et déterminer si les modifications de personnalisation s’appliquent à tous les utilisateurs ou à des utilisateurs individuels. Enfin, il initie et suit les connexions et la communication entre les contrôles WebPart.

Le deuxième type de composant structurel de l’interface utilisateur est la zone. Les zones agissent en tant que gestionnaires de disposition sur une page de composants WebPart. Ils contiennent et organisent des contrôles qui dérivent de la classe Part (contrôles de partie), et offrent la possibilité d’effectuer une mise en page modulaire en orientation horizontale ou verticale. Les zones offrent également des éléments d’interface utilisateur communs et cohérents (tels que le style d’en-tête et de pied de page, le titre, le style de bordure, les boutons d’action, et ainsi de suite) pour chaque contrôle qu’elles contiennent ; ces éléments communs sont appelés chrome d’un contrôle. Plusieurs types spécialisés de zones sont utilisés dans les différents modes d’affichage et avec différents contrôles. Les différents types de zones sont décrits dans la section Contrôles essentiels des composants WebPart ci-dessous.

Les contrôles d’interface utilisateur de composants WebPart, qui dérivent tous de la classe Part , constituent l’interface utilisateur principale d’une page de composants WebPart. L’ensemble de contrôles WebPart est flexible et inclusif dans les options qu’il vous offre pour créer des contrôles de composant. En plus de créer vos propres contrôles WebPart personnalisés, vous pouvez également utiliser des contrôles serveur ASP.NET existants, des contrôles utilisateur ou des contrôles serveur personnalisés en tant que contrôles WebPart. Les contrôles essentiels les plus couramment utilisés pour créer des pages de composants WebPart sont décrits dans la section suivante.

Contrôles essentiels des composants WebPart

L’ensemble de contrôles De composants WebPart est complet, mais certains contrôles sont essentiels, soit parce qu’ils sont nécessaires pour que les composants WebPart fonctionnent, soit parce qu’ils sont les contrôles les plus fréquemment utilisés sur les pages de composants WebPart. Lorsque vous commencez à utiliser des composants WebPart et à créer des pages de composants WebPart de base, il est utile de vous familiariser avec les contrôles de composants WebPart essentiels décrits dans le tableau suivant.

Contrôle WebPart	Description
Webpartmanager	Gère tous les contrôles de composants WebPart d’une page. Un seul contrôle WebPartManager (et un seul) est requis pour chaque page de composants WebPart.
CatalogZone	Contient les contrôles CatalogPart. Utilisez cette zone pour créer un catalogue de contrôles WebPart à partir desquels les utilisateurs peuvent sélectionner des contrôles à ajouter à une page.
EditorZone	Contient les contrôles EditorPart. Utilisez cette zone pour permettre aux utilisateurs de modifier et de personnaliser des contrôles de composants WebPart sur une page.
Webpartzone	Contient et fournit la disposition globale des contrôles WebPart qui composent l’interface utilisateur main d’une page. Utilisez cette zone chaque fois que vous créez des pages avec des contrôles De composants WebPart. Les pages peuvent contenir une ou plusieurs zones.
ConnectionsZone	Contient des contrôles WebPartConnection et fournit une interface utilisateur pour la gestion des connexions.
WebPart (GenericWebPart)	Restitue l’interface utilisateur principale ; la plupart des contrôles d’interface utilisateur de composants WebPart appartiennent à cette catégorie. Pour un contrôle par programmation maximal, vous pouvez créer des contrôles WebPart personnalisés qui dérivent du contrôle WebPart de base. Vous pouvez également utiliser des contrôles serveur, des contrôles utilisateur ou des contrôles personnalisés existants en tant que contrôles WebPart. Chaque fois que l’un de ces contrôles est placé dans une zone, le contrôle WebPartManager les encapsule automatiquement avec des contrôles GenericWebPart au moment de l’exécution afin que vous puissiez les utiliser avec la fonctionnalité De composants WebPart.
CatalogPart	Contient la liste des contrôles de composants WebPart disponibles que les utilisateurs peuvent ajouter à la page.
WebPartConnection	Crée une connexion entre deux contrôles De composants WebPart sur une page. La connexion définit l’un des contrôles WebPart en tant que fournisseur (de données) et l’autre en tant que consommateur.
Editorpart	Sert de classe de base pour les contrôles d’éditeur spécialisés.
Contrôles EditorPart (AppearanceEditorPart, LayoutEditorPart, BehaviorEditorPart et PropertyGridEditorPart)	Autoriser les utilisateurs à personnaliser différents aspects des contrôles d’interface utilisateur de composants WebPart sur une page

Labo : Créer une page de composant WebPart

Dans ce labo, vous allez créer une page de composant WebPart qui conservera les informations via ASP.NET profils.

Création d’une page simple avec des composants WebPart

Dans cette partie de la procédure pas à pas, vous créez une page qui utilise des contrôles de composants WebPart pour afficher du contenu statique. La première étape de l’utilisation des composants WebPart consiste à créer une page avec deux éléments structurels requis. Tout d’abord, une page de composants WebPart a besoin d’un contrôle WebPartManager pour suivre et coordonner tous les contrôles De composants WebPart. Deuxièmement, une page de composants WebPart a besoin d’une ou plusieurs zones, qui sont des contrôles composites qui contiennent des contrôles WebPart ou d’autres contrôles serveur et occupent une région spécifiée d’une page.

Notes

Vous n’avez pas besoin de faire quoi que ce soit pour activer la personnalisation des composants WebPart ; il est activé par défaut pour l’ensemble de contrôles WebPart. Lorsque vous exécutez pour la première fois une page de composants WebPart sur un site, ASP.NET configure un fournisseur de personnalisation par défaut pour stocker les paramètres de personnalisation utilisateur. Pour plus d’informations sur la personnalisation, consultez Vue d’ensemble de la personnalisation des composants WebPart.

Pour créer une page pour contenir des contrôles WebPart

Fermez la page par défaut et ajoutez une nouvelle page au site nommé WebPartsDemo.aspx.
Basculez en mode Création .
Dans le menu Affichage, assurez-vous que les options Contrôles et détailsnon visuels sont sélectionnées afin que vous puissiez voir les balises de disposition et les contrôles qui n’ont pas d’interface utilisateur.
Placez le point d’insertion avant les <div> balises sur l’aire de conception, puis appuyez sur ENTRÉE pour ajouter une nouvelle ligne. Positionnez le point d’insertion avant le nouveau caractère de ligne, cliquez sur le contrôle de liste déroulante Format de bloc dans le menu, puis sélectionnez l’option Titre 1 . Dans le titre, ajoutez le texte Page de démonstration des composants WebPart.
Sous l’onglet WebParts de la boîte à outils, faites glisser un contrôle WebPartManager sur la page, en le positionnant juste après le nouveau caractère de ligne et avant les <div>balises.

Le contrôle WebPartManager n’affiche aucune sortie. Il apparaît donc sous la forme d’une zone grise sur l’aire du concepteur.
Positionnez le point d’insertion dans les <div> balises.
Dans le menu Disposition , cliquez sur Insérer un tableau, puis créez une table comportant une ligne et trois colonnes. Cliquez sur le bouton Propriétés de la cellule , sélectionnez en haut dans la liste déroulante Alignement vertical , cliquez sur OK, puis cliquez à nouveau sur OK pour créer la table.
Faites glisser un contrôle WebPartZone dans la colonne de table de gauche. Cliquez avec le bouton droit sur le contrôle WebPartZone , choisissez Propriétés et définissez les propriétés suivantes :

ID : SidebarZone

HeaderText: Sidebar
Faites glisser un deuxième contrôle WebPartZone dans la colonne de la table centrale et définissez les propriétés suivantes :

ID : MainZone

HeaderText: Main
Enregistrez le fichier .

Votre page comporte désormais deux zones distinctes que vous pouvez contrôler séparément. Toutefois, aucune zone n’a de contenu. La création de contenu est donc l’étape suivante. Pour cette procédure pas à pas, vous utilisez des contrôles De composants WebPart qui affichent uniquement du contenu statique.

La disposition d’une zone de composants WebPart est spécifiée par un <élément zonetemplate> . Dans le modèle de zone, vous pouvez ajouter n’importe quel contrôle ASP.NET, qu’il s’agisse d’un contrôle WebPart personnalisé, d’un contrôle utilisateur ou d’un contrôle serveur existant. Notez qu’ici, vous utilisez le contrôle Label et que vous ajoutez simplement du texte statique. Lorsque vous placez un contrôle serveur standard dans une zone WebPartZone , ASP.NET traite le contrôle comme un contrôle WebPart au moment de l’exécution, ce qui active les fonctionnalités de composants WebPart sur le contrôle.

Pour créer du contenu pour la zone main

En mode Création , faites glisser un contrôle Étiquette de l’onglet Standard de la boîte à outils vers la zone de contenu de la zone dont la propriété ID est définie sur MainZone.
Basculez vers la vue Source . Notez qu’un <élément zonetemplate> a été ajouté pour encapsuler le contrôle Label dans mainZone.
Ajoutez un attribut nommé title à l’élément <asp:label> et définissez sa valeur sur Content. Supprimez l’attribut Text="Label » de l’élément <asp:label> . Entre les balises d’ouverture et de fermeture de l’élément <asp:label> , ajoutez du texte tel que Bienvenue dans ma page d’accueil dans une paire de balises d’élément <h2> . Votre code doit se présenter ainsi.
```
<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>
```
Enregistrez le fichier .

Ensuite, créez un contrôle utilisateur qui peut également être ajouté à la page en tant que contrôle WebPart.

Pour créer un contrôle utilisateur

Ajoutez un nouveau contrôle utilisateur web à votre site pour servir de contrôle de recherche. Désélectionnez l’option Placer le code source dans un fichier distinct. Ajoutez-le dans le même répertoire que la page WebPartsDemo.aspx et nommez-le SearchUserControl.ascx.

Notes

Le contrôle utilisateur de cette procédure pas à pas n’implémente pas la fonctionnalité de recherche réelle . elle est utilisée uniquement pour illustrer les fonctionnalités des composants WebPart.
Basculez en mode Création . Dans l’onglet Standard de la boîte à outils, faites glisser un contrôle TextBox sur la page.
Placez le point d’insertion après la zone de texte que vous venez d’ajouter, puis appuyez sur Entrée pour ajouter une nouvelle ligne.
Faites glisser un contrôle Button sur la page de la nouvelle ligne sous la zone de texte que vous venez d’ajouter.

Basculez vers la vue Source . Vérifiez que le code source du contrôle utilisateur ressemble à l’exemple suivant.

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

Enregistrez et fermez le fichier.

Vous pouvez maintenant ajouter des contrôles WebPart à la zone barre latérale. Vous ajoutez deux contrôles à la zone Barre latérale, l’un contenant une liste de liens et l’autre le contrôle utilisateur que vous avez créé dans la procédure précédente. Les liens sont ajoutés en tant que contrôle serveur Label standard, de la même façon que vous avez créé le texte statique pour la zone Main. Toutefois, bien que les contrôles serveur individuels contenus dans le contrôle utilisateur puissent être contenus directement dans la zone (comme le contrôle d’étiquette), dans ce cas, ils ne le sont pas. Au lieu de cela, ils font partie du contrôle utilisateur que vous avez créé dans la procédure précédente. Cela illustre une méthode courante pour empaqueter les contrôles et les fonctionnalités supplémentaires que vous souhaitez dans un contrôle utilisateur, puis référencer ce contrôle dans une zone en tant que contrôle WebPart.

Au moment de l’exécution, le jeu de contrôles WebPart encapsule les deux contrôles avec des contrôles GenericWebPart. Lorsqu’un contrôle GenericWebPart encapsule un contrôle serveur Web, le contrôle de composant générique est le contrôle parent et vous pouvez accéder au contrôle serveur via la propriété ChildControl du contrôle parent. Cette utilisation de contrôles de composants génériques permet aux contrôles serveur Web standard d’avoir le même comportement et les mêmes attributs de base que les contrôles WebPart qui dérivent de la classe WebPart .

Ouvrez la page WebPartsDemo.aspx.
Basculez en mode Création .
Faites glisser la page de contrôle utilisateur que vous avez créée, SearchUserControl.ascx, de Explorateur de solutions dans la zone dont la propriété ID est définie sur SidebarZone, puis déposez-la là.
Enregistrez la page WebPartsDemo.aspx.
Basculez vers la vue Source .

Dans l’élément <asp:webpartzone> pour sidebarZone, juste au-dessus de la référence à votre contrôle utilisateur, ajoutez un <élément asp:label> avec des liens contenus, comme illustré dans l’exemple suivant. Ajoutez également un attribut Title à la balise de contrôle utilisateur, avec la valeur Rechercher, comme indiqué.

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

Enregistrez et fermez le fichier.

Vous pouvez maintenant tester votre page en y accédant dans votre navigateur. La page affiche les deux zones. La capture d’écran suivante montre la page.

Page de démonstration des composants WebPart avec deux zones

Capture d’écran des composants WebPart VS Walkthrough 1

Figure 3 : Capture d’écran des composants WebPart VS Procédure pas à pas 1

Dans la barre de titre de chaque contrôle se trouve une flèche vers le bas qui donne accès à un menu de verbes des actions disponibles que vous pouvez effectuer sur un contrôle. Cliquez sur le menu verbes de l’un des contrôles, puis cliquez sur le verbe Réduire et notez que le contrôle est réduit. Dans le menu verbes, cliquez sur Restaurer pour que le contrôle revient à sa taille normale.

Activation des utilisateurs pour modifier des pages et modifier la disposition

Les composants WebPart offrent aux utilisateurs la possibilité de modifier la disposition des contrôles WebPart en les faisant glisser d’une zone à une autre. En plus de permettre aux utilisateurs de déplacer des contrôles WebPart d’une zone à une autre, vous pouvez autoriser les utilisateurs à modifier diverses caractéristiques des contrôles, notamment leur apparence, leur disposition et leur comportement. L’ensemble de contrôles WebPart fournit des fonctionnalités d’édition de base pour les contrôles WebPart . Bien que vous ne le fassiez pas dans cette procédure pas à pas, vous pouvez également créer des contrôles d’éditeur personnalisés qui permettent aux utilisateurs de modifier les fonctionnalités des contrôles WebPart . Comme avec la modification de l’emplacement d’un contrôle WebPart , la modification des propriétés d’un contrôle repose sur ASP.NET personnalisation pour enregistrer les modifications apportées par les utilisateurs.

Dans cette partie de la procédure pas à pas, vous ajoutez la possibilité pour les utilisateurs de modifier les caractéristiques de base de n’importe quel contrôle WebPart sur la page. Pour activer ces fonctionnalités, vous ajoutez un autre contrôle utilisateur personnalisé à la page, ainsi qu’un <élément asp:editorzone> et deux contrôles d’édition.

Pour créer un contrôle utilisateur qui permet de modifier la mise en page

Dans Visual Studio, dans le menu Fichier , sélectionnez le sous-menu Nouveau , puis cliquez sur l’option Fichier .
Dans la boîte de dialogue Ajouter un nouvel élément , sélectionnez Contrôle utilisateur web. Nommez le nouveau fichier DisplayModeMenu.ascx. Désélectionnez l’option Placer le code source dans un fichier distinct.
Cliquez sur Ajouter pour créer le contrôle.
Basculez vers la vue Source .

Supprimez tout le code existant dans le nouveau fichier et collez le code suivant. Ce code de contrôle utilisateur utilise des fonctionnalités de l’ensemble de contrôles WebPart qui permettent à une page de modifier son mode d’affichage ou d’affichage, et vous permet également de modifier l’apparence physique et la disposition de la page lorsque vous êtes dans certains modes d’affichage.

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

Enregistrez le fichier en cliquant sur l’icône Enregistrer dans la barre d’outils ou en sélectionnant Enregistrer dans le menu Fichier .

Pour permettre aux utilisateurs de modifier la disposition

Ouvrez la page WebPartsDemo.aspx et basculez en mode Création .
Positionnez le point d’insertion en mode Création juste après le contrôle WebPartManager que vous avez ajouté précédemment. Ajoutez un retour après le texte afin qu’il y ait une ligne vide après le contrôle WebPartManager . Placez le point d’insertion sur la ligne vide.
Faites glisser le contrôle utilisateur que vous venez de créer (le fichier est nommé DisplayModeMenu.ascx) dans la page WebPartsDemo.aspx et déposez-le sur la ligne vide.
Faites glisser un contrôle EditorZone de la section WebParts de la boîte à outils vers la cellule de tableau ouverte restante dans la page WebPartsDemo.aspx.
À partir de la section WebParts de la boîte à outils, faites glisser un contrôle AppearanceEditorPart et un contrôle LayoutEditorPart dans le contrôle EditorZone .

Basculez vers la vue Source . Le code obtenu dans la cellule de tableau doit ressembler au code suivant.

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

Enregistrez le fichier WebPartsDemo.aspx. Vous avez créé un contrôle utilisateur qui vous permet de modifier les modes d’affichage et de modifier la mise en page, et vous avez référencé le contrôle sur la page Web principale.

Vous pouvez maintenant tester la possibilité de modifier des pages et de modifier la mise en page.

Pour tester les modifications de disposition

Chargez la page dans un navigateur.
Cliquez sur le menu déroulant Mode d’affichage , puis sélectionnez Modifier. Les titres de zone s’affichent.
Faites glisser le contrôle Mes liens par sa barre de titre de la zone Barre latérale vers le bas de la zone Main. Votre page doit ressembler à la capture d’écran suivante.

Page de démonstration des composants WebPart avec le contrôle Mes liens déplacé

Capture d’écran des composants WebPart VS Walkthrough 2

Figure 4 : Capture d’écran des composants WebPart VS Procédure pas à pas 2

Cliquez sur le menu déroulant Mode d’affichage , puis sélectionnez Parcourir. La page est actualisée, les noms de zone disparaissent et le contrôle Mes liens reste à l’emplacement où vous l’avez positionné.
Pour démontrer que la personnalisation fonctionne, fermez le navigateur, puis chargez à nouveau la page. Les modifications que vous avez apportées sont enregistrées pour les futures sessions de navigateur.
Dans le menu Mode d’affichage , sélectionnez Modifier.

Chaque contrôle de la page est désormais affiché avec une flèche vers le bas dans sa barre de titre, qui contient le menu déroulant des verbes.
Cliquez sur la flèche pour afficher le menu verbes dans le contrôle Mes liens . Cliquez sur le verbe Modifier .

Le contrôle EditorZone s’affiche, affichant les contrôles EditorPart que vous avez ajoutés.
Dans la section Apparence du contrôle d’édition, remplacez Le titre par Mes favoris, utilisez la liste déroulante Type chrome pour sélectionner Titre uniquement, puis cliquez sur Appliquer. La capture d’écran suivante montre la page en mode Édition.

Page de démonstration des composants WebPart en mode Édition

Capture d’écran des composants WebPart VS Walkthrough 3

Figure 5 : Capture d’écran des composants WebPart VS Procédure pas à pas 3

Cliquez sur le menu Mode d’affichage , puis sélectionnez Parcourir pour revenir au mode de navigation.
Le contrôle a maintenant un titre mis à jour et aucune bordure, comme illustré dans la capture d’écran suivante.

Page de démonstration des composants WebPart modifiés

Capture d’écran des composants WebPart VS Walkthrough 4

Figure 4 : Capture d’écran des composants WebPart VS Procédure pas à pas 4

Ajout de composants WebPart au moment de l’exécution

Vous pouvez également autoriser les utilisateurs à ajouter des contrôles WebPart à leur page au moment de l’exécution. Pour ce faire, configurez la page avec un catalogue de composants WebPart, qui contient une liste de contrôles WebPart que vous souhaitez mettre à la disposition des utilisateurs.

Pour permettre aux utilisateurs d’ajouter des composants WebPart au moment de l’exécution

Ouvrez la page WebPartsDemo.aspx et basculez en mode Création .
Sous l’onglet Composants WebParts de la boîte à outils, faites glisser un contrôle CatalogZone dans la colonne de droite de la table, sous le contrôle EditorZone .

Les deux contrôles peuvent se trouver dans la même cellule de tableau, car ils ne seront pas affichés en même temps.
Dans le volet Propriétés, affectez la chaîne Ajouter des composants WebPart à la propriété HeaderText du contrôle CatalogZone .
À partir de la section WebParts de la boîte à outils, faites glisser un contrôle DeclarativeCatalogPart dans la zone de contenu du contrôle CatalogZone .
Cliquez sur la flèche dans le coin supérieur droit du contrôle DeclarativeCatalogPart pour exposer son menu Tâches, puis sélectionnez Modifier les modèles.
À partir de la section Standard de la boîte à outils, faites glisser un contrôle FileUpload et un contrôle Calendar dans la section WebPartsTemplate du contrôle DeclarativeCatalogPart .
Basculez vers la vue Source . Inspectez le code source de l’élément <asp:catalogzone> . Notez que le contrôle DeclarativeCatalogPart contient un <élément webpartstemplate> avec les deux contrôles serveur inclus que vous pourrez ajouter à votre page à partir du catalogue.
Ajoutez une propriété Title à chacun des contrôles que vous avez ajoutés au catalogue, en utilisant la valeur de chaîne affichée pour chaque titre dans l’exemple de code ci-dessous. Même si le titre n’est pas une propriété que vous pouvez normalement définir sur ces deux contrôles serveur au moment du design, lorsqu’un utilisateur ajoute ces contrôles à une zone WebPartZone à partir du catalogue au moment de l’exécution, ils sont chacun encapsulés avec un contrôle GenericWebPart . Cela leur permet d’agir en tant que contrôles WebPart, afin qu’ils puissent afficher des titres.

Le code des deux contrôles contenus dans le contrôle DeclarativeCatalogPart doit se présenter comme suit.
```
<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>
```
Enregistrez la page.

Vous pouvez maintenant tester le catalogue.

Pour tester le catalogue de composants WebPart

Chargez la page dans un navigateur.
Cliquez sur le menu déroulant Mode d’affichage , puis sélectionnez Catalogue.

Le catalogue intitulé Ajouter des composants WebPart s’affiche.
Faites glisser le contrôle Mes favoris de la zone Main vers le haut de la zone de la barre latérale, puis déposez-le là-bas.
Dans le catalogue Ajouter des composants WebPart, sélectionnez les deux zones case activée, puis sélectionnez Main dans la liste déroulante qui contient les zones disponibles.
Cliquez sur Ajouter dans le catalogue. Les contrôles sont ajoutés à la zone Main. Si vous le souhaitez, vous pouvez ajouter plusieurs instances de contrôles du catalogue à votre page.

La capture d’écran suivante montre la page avec le contrôle de chargement de fichiers et le calendrier dans la zone Main.

Contrôles ajoutés à la zone principale à partir du catalogue

Figure 5 : Contrôles ajoutés à la zone principale à partir du catalogue 6. Cliquez sur le menu déroulant Mode d’affichage , puis sélectionnez Parcourir. Le catalogue disparaît et la page est actualisée. 7. Fermez le navigateur. Chargez à nouveau la page. Les modifications que vous avez apportées persistent.

Partager via