Procédure pas à pas : utilisation de pages maîtres imbriquées dans ASP.NET
Mise à jour : novembre 2007
Cette procédure pas à pas décrit comment créer une page maître imbriquée à l'intérieur d'une autre page maître. Les pages maîtres fonctionnent comme des modèles qui spécifient l'apparence des pages.
Vous pouvez imbriquer des pages maîtres afin que chaque page puisse avoir une disposition flexible mais également conserver une apparence cohérente sur un site Web. Par exemple, vous pouvez créer une page maître parente qui dispose d'une bannière de société dans sa partie supérieure et des contrôles de navigation du site dans une colonne latérale. Vous pouvez créer ensuite une page maître enfant pour un département ou un produit spécifique qui utilise la page maître parente. Celle-ci peut également faire office de page maître pour tout autre département ou page produit connexe. De cette façon, grâce à la page maître parente, chaque ligne de produits ou département, ainsi que l'ensemble des pages présentent une apparence globale cohérente. Pour plus d'informations sur les pages maîtres, consultez Vue d'ensemble des pages maîtres ASP.NET.
Cette procédure pas à pas illustre les tâches suivantes :
Création d'une page maître
Création d'une page maître imbriquée à l'intérieur d'une autre page maître
Création d'une page ASP.NET avec le contenu que vous souhaitez afficher dans la page maître
Composants requis
Pour exécuter cette procédure pas à pas, vous devez disposer des éléments suivants :
Visual Studio 2008 ou Microsoft Visual Web Developer Express. Pour obtenir les informations de téléchargement, consultez le site Web Centre de développement Visual Studio
.NET Framework version 3.5.
Éventuellement, un fichier .jpg, .gif ou un fichier graphique que vous pouvez utiliser en tant que bannière sur la page maître. Il est recommandé que la largeur de la bannière ne dépasse pas 780 pixels en largeur et 150 pixels en hauteur. Toutefois, l'affichage d'un logo est facultatif et la taille exacte du graphique n'est pas importante pour suivre cette procédure pas à pas.
Création d'un site Web
Si vous avez déjà créé un site Web dans Visual Web Developer (par exemple, en suivant les étapes décrites dans Procédure pas à pas : création d'une page Web de base dans Visual Web Developer), vous pouvez utiliser ce site Web et passer à la section suivante, « Création de la page maître ». Sinon, créez un site et une page Web en suivant ces étapes.
Pour créer un site Web de système de fichiers
Ouvrez Visual Web Developer.
Dans le menu Fichier, cliquez sur Nouveausite Web.
La boîte de dialogue Nouveau site Web s'affiche.
Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
Dans la zone Emplacement, entrez le nom du dossier dans lequel vous souhaitez conserver les pages du site Web.
Par exemple, vous pouvez taper le nom suivant : C:\Tasks
Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.
Cliquez sur OK.
Visual Web Developer crée le dossier et une nouvelle page nommée Default.aspx.
Création d'une page maître parente
Cette section vous permet de créer une page maître parente. Cette page contient une bannière et des contrôles de navigation qui peuvent être utilisés dans l'ensemble du site. Vous créerez ultérieurement une autre page maître qui sera utilisée à l'intérieur de cette page maître parente. Les pages maîtres enfants peuvent fournir différentes dispositions pour les pages, tout en conservant l'apparence établie par la page maître parente.
Pour créer la page maître
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web puis cliquez sur Ajouterun nouvel élément.
La boîte de dialogue Ajouterun nouvel élément s'affiche.
Sous Modèles Visual Studio installés, cliquez sur Page maître.
Dans la zone Nom, tapez ParentMaster.
Désactivez la case à cocher Placer le code dans un fichier distinct.
Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.
Cliquez sur Ajouter.
La nouvelle page maître s'ouvre en mode Source.
Ajout d'éléments à la page maître parente
En haut de la page maître se trouve une déclaration @ Master, au lieu de la déclaration @ Page qui se trouve habituellement en haut des pages ASP.NET. Le corps de la page contient un contrôle ContentPlaceHolder qui correspond à la zone de la page maître où le contenu remplaçable sera fusionné avec les pages de contenu au moment de l'exécution. Vous utiliserez davantage les espaces réservés de contenu lors d'une prochaine étape de cette procédure pas à pas.
Ajout de graphiques à la page maître parente
Avant de pouvoir incorporer des graphiques dans la page maître parente, vous devez ajouter les fichiers graphiques au site Web.
Créez un graphique de 780 pixels de largeur et de 150 pixels de hauteur pour la bannière et un graphique de 780 pixels de largeur et de 50 pixels de hauteur pour le pied de page. Les graphiques indiquent l'apparence des graphiques de la page maître parente au sein d'une page maître imbriquée. Si vous ne disposez pas de ces graphiques, vous pouvez les créer dans Microsoft Paint ou un autre programme graphique.
Pour ajouter un fichier graphique existant au site Web
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web, puis cliquez sur Ajouterun élément existant.
La boîte de dialogue Ajouter un élément existant s'affiche.
Sélectionnez les fichiers graphiques que vous avez créés.
Cliquez sur Ajouter.
Sur la page maître parente, ajoutez deux graphiques simples, un pour une bannière et l'autre pour un pied de page. Ces graphiques vous permettent de voir que la page maître parente est utilisée dans les pages maîtres imbriquées que vous créerez lors d'une étape ultérieure de cette procédure.
Pour ajouter une bannière et des graphiques de pied de page à la page maître parente
En mode Source, juste après la balise d'ouverture <form>, ajoutez un élément div qui contient un élément img pour le graphique de bannière.
Par exemple, si vous avez créé un graphique nommé Banner.gif, la balise à ajouter à ce graphique pourrait se présenter sous la forme suivante :
<div id="banner"> <img src="banner.gif" alt="banner graphic" /> </div>Juste avant la balise de fermeture </form>, ajoutez un élément div qui contient un élément img pour le graphique de pied de page.
Par exemple, si vous avez créé un graphique nommé Footer.gif, la balise à ajouter à ce graphique pourrait se présenter sous la forme suivante :
<div id="banner"> <img src="footer.gif" alt="footer graphic" /> </div>Enregistrez la page maître.
Remarquez que vous n'avez rien ajouté à l'intérieur du contrôle ContentPlaceHolder. Le prochain jeu de pages maîtres que vous créerez se trouvera à l'intérieur du contrôle ContentPlaceHolder.
Création d'une page maître enfant
Pour imbriquer une page maître à l'intérieur d'une autre, vous devez créer une deuxième page maître. La nouvelle page maître figurera à l'intérieur de l'espace réservé de contenu de la page maître parente. La page maître enfant vous permet de réorganiser la page de différentes façons en maintenant une apparence cohérente établie par la page maître parente.
Pour créer la page maître enfant
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web puis cliquez sur Ajouterun nouvel élément.
La boîte de dialogue Ajouter un nouvel élément s'affiche.
Sous Modèles Visual Studio installés, cliquez sur Page maître.
Dans la zone Nom, tapez ChildMaster.
Désactivez la case à cocher Placer le code dans un fichier distinct.
Activez la case à cocher Sélectionner la page maître.
Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.
Cliquez sur Ajouter.
La boîte de dialogue Sélectionner une page maître s'affiche.
Sélectionnez la page maître parente que vous avez créée précédemment dans cette procédure pas à pas.
Cliquez sur OK.
La nouvelle page maître s'ouvre en mode Source.
Remarquez que la déclaration @ Master située en haut de la nouvelle page maître indique une référence à une page maître.
Ajout de contrôles ContentPlaceHolder à la page maître enfant
Étant donné que la page maître enfant est associée à une autre page maître, elle contient deux contrôles Content. Le premier espace réservé de contenu peut être utilisé pour ajouter des informations à la page qui apparaîtrait habituellement dans l'élément head, tel qu'un élément script. À l'intérieur du deuxième contrôle Content, vous pouvez ajouter un contrôle ContentPlaceHolder. Cela permet à une page ASP.NET, qui utilise la page maître enfant, de fournir le contenu de la page. Vous pouvez ajouter d'autres éléments de page à l'intérieur du contrôle Content. La page maître enfant peut contenir des éléments de page supplémentaires pour fournir une apparence cohérente aux pages qui utilisent la page maître enfant.
Pour ajouter des contrôles ContentPlaceholder à la page maître enfant
Basculez vers la page maître enfant ou ouvrez-la
Passez en mode Source.
Ajoutez la balise suivante à l'intérieur de la deuxième section de contrôle Content afin de créer des contrôles ContentPlaceHolder :
<div id="2col"> <asp:ContentPlaceHolder ID="leftcolumn" > </asp:ContentPlaceHolder> <asp:ContentPlaceHolder ID="rightcolumn" > </asp:ContentPlaceHolder> </div>Enregistrez le fichier.
La page maître enfant dispose à présent de contrôles ContentPlaceHolder qui contiennent la balise d'une page ASP.NET qui utilise la page maître enfant.
Création d'une page de contenu qui utilise la page maître enfant
Dans les étapes précédentes, vous avez créé une page maître imbriquée à l'intérieur d'une autre page maître. La page maître enfant obtenue vous permet d'utiliser les éléments d'interface utilisateur de la page maître parente. Elle fournit également des éléments d'interface supplémentaires dans la deuxième page maître. Dans cette procédure pas à pas, vous avez ajouté des graphiques à la page maître parente et des espaces réservés dans la deuxième page maître. Pour voir comment fonctionnent les pages maîtres imbriquées, vous devez créer une page Web ASP.NET qui utilise la page maître enfant. La nouvelle page créée qui utilise la page maître enfant contiendra automatiquement un contrôle Content pour chaque contrôle ContentPlaceHolder que vous avez créé dans la page maître enfant.
Pour créer une page qui utilise la page maître enfant
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web puis cliquez sur Ajouterun nouvel élément.
La boîte de dialogue Ajouter un nouvel élément s'affiche.
Sous Modèles Visual Studio installés, cliquez sur Formulaire Web.
Dans la zone Nom, tapez Tasks.
Activez la case à cocher Placer le code dans un fichier distinct.
Activez la case à cocher Sélectionner la page maître.
Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.
Cliquez sur Ajouter.
Dans la boîte de dialogue Sélectionner une page maître, sélectionnez la page maître enfant que vous avez créée précédemment dans cette procédure pas à pas.
Cliquez sur OK.
La nouvelle page de contenu s'ouvre en mode Source.
Remplacez l'ID du premier contrôle Content par leftcolumn et celui du deuxième contrôle Content par rightcolumn.
Ajoutez des éléments de texte ou de page dans les contrôles Content de la colonne de gauche ou de droite.
Appuyez sur CTRL+F5 pour exécuter le site Web.
Remarquez que la page Tasks.aspx affiche une combinaison de tous les éléments que vous avez créés dans cette procédure pas à pas. Cela inclut les graphiques sur la page maître parente, la disposition sur deux colonnes sur la page maître enfant ainsi que le texte et les contrôles que vous avez ajoutés à la page Tasks.aspx.
Étapes suivantes
À présent que vous avez pris connaissance du fonctionnement des pages maîtres imbriquées, vous pouvez créer d'autres pages maîtres enfants qui utilisent la page maître parente. La page maître enfant que vous avez créée dans cette procédure pas à pas a créé une disposition sur deux colonnes. Une autre page maître enfant que vous créez pour la page maître parente pourrait créer une disposition sur une seule colonne ou une toute autre disposition.
Voir aussi
Tâches
Procédure pas à pas : création et modification d'un fichier CSS