Procédure pas à pas : ajout de la navigation de site à un site Web

  • Article

Mise à jour : novembre 2007

Dans les sites qui possèdent un certain nombre de pages, il peut être difficile de construire un système de navigation qui permette aux utilisateurs de se déplacer librement entre les pages, surtout lorsque vous modifiez le site. La navigation de site ASP.NET vous permet de créer un plan de site centralisé des pages.

Cette procédure pas à pas vous indique comment configurer un plan de site et utiliser les contrôles qui s'appuient sur le plan de site pour ajouter la navigation aux pages du site Web.

Au cours de cette procédure pas à pas, vous allez apprendre à effectuer les tâches suivantes :

  • Créer un site Web qui contient des pages d'exemple et un fichier sitemap qui décrit la disposition des pages.

  • Utiliser le contrôle TreeView comme un menu de navigation qui permet aux utilisateurs d'accéder à n'importe quelle page de votre site.

  • Utiliser le contrôle SiteMapPath pour ajouter un chemin de navigation, également connu sous le nom de fil d'Ariane (breadcrumb), qui permet à un utilisateur d'afficher et de se déplacer dans la hiérarchie de site à partir de la page en cours.

  • Utiliser le contrôle Menu pour ajouter un menu de navigation qui permet aux utilisateurs d'afficher un seul niveau de nœuds à la fois. Suspendre le pointeur de la souris sur un nœud qui contient des nœuds enfants génère un sous-menu des nœuds enfants.

  • Utiliser la navigation de site et les contrôles sur une page maître pour ne définir qu'une fois la navigation de site.

Composants requis

Pour effectuer cette procédure pas à pas, vous aurez besoin des éléments suivants :

  • Outil de développement Web Microsoft Visual Web Developer.

  • Le .NET Framework.

Cette procédure pas à pas suppose que vous savez utiliser Visual Web Developer.

Création d'un site Web qui contient des pages d'exemple et un plan de site

Si vous avez déjà créé un site Web dans Visual Web Developer en effectuant 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. Sinon, créez un site et une page Web en suivant ces étapes.

Création d'un site Web de système de fichiers

Pour créer un site Web de système de fichiers

  1. Ouvrez Visual Web Developer.

  2. Dans le menu Fichier, cliquez sur Nouveau site Web (ou dans le menu Fichier, cliquez sur Nouveau, puis sur Site Web).

    La boîte de dialogue Nouveau site Web s'affiche.

  3. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.

  4. Dans la zone Emplacement la plus à gauche, cliquez sur Système de fichiers, puis dans la zone Emplacement la plus à droite, entrez le nom du dossier dans lequel vous souhaitez conserver les pages du site Web.

    Par exemple, tapez le nom du dossier C:\SitesWeb\SiteNavigation.

  5. Dans la zone Langage, cliquez sur le langage de programmation que vous préférez utiliser.

    Le langage de programmation que vous choisissez sera la valeur par défaut pour le site Web, mais vous pouvez définir individuellement le langage de programmation pour chaque page.

  6. Cliquez sur OK.

    Visual Web Developer crée le dossier et une page nommée Default.aspx.

Création d'un plan de site

Pour utiliser la navigation de site, vous avez besoin de décrire la disposition des pages de votre site. La méthode par défaut consiste à créer un fichier .xml qui contient la hiérarchie du site, y compris les titres de page et les URL.

La structure du fichier .xml reflète la structure de votre site. Chaque page est représentée comme un élément siteMapNode dans le plan de site. Le nœud supérieur représente la page d'accueil, et les nœuds enfants représentent des pages qui sont plus profondes dans le site.

Pour créer un plan de site

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web, puis cliquez sur Ajouter un nouvel élément.

  2. Dans la boîte de dialogue Ajouter un nouvel élément <Chemin> :

    1. Sous Modèles Visual Studio installés, cliquez sur Plan de site.

    2. Dans la zone Nom, assurez-vous que le nom est Web.sitemap.

      Remarque :

      Le fichier doit être nommé Web.sitemap et doit apparaître à la racine du site Web.

    3. Cliquez sur Ajouter.

  3. Copiez le contenu XML suivant dans le fichier Web.sitemap, en écrasant le contenu par défaut.

    <siteMap>
  <siteMapNode title="Home" description="Home" url="~/home.aspx" >
    <siteMapNode title="Products" description="Our products"
         url="~/Products.aspx">
        <siteMapNode title="Hardware" 
             description="Hardware we offer" 
             url="~/Hardware.aspx" />
        <siteMapNode title="Software" 
             description="Software for sale" 
             url="~/Software.aspx" />
    </siteMapNode>
    <siteMapNode title="Services" description="Services we offer" 
        url="~/Services.aspx">
        <siteMapNode title="Training" description="Training" 
            url="~/Training.aspx" />
        <siteMapNode title="Consulting" description="Consulting" 
            url="~/Consulting.aspx" />
        <siteMapNode title="Support" description="Support" 
            url="~/Support.aspx" />
      </siteMapNode>
  </siteMapNode>
</siteMap>

    Le fichier Web.sitemap contient un jeu d'éléments siteMapNode qui sont imbriqués sur trois niveaux. La structure de chaque élément est identique. La seule différence entre elles est leur emplacement dans la hiérarchie XML.

    L'URL des pages définies dans le fichier .xml d'exemple est non qualifiée. Cela signifie que toutes les pages sont traitées comme si elles avaient des URL relatives à la racine de l'application. Toutefois, vous pouvez spécifier une URL pour une page spécifique, la structure logique que vous définissez dans le plan de site ne doit pas forcément correspondre à la disposition physique des pages dans les dossiers.

  4. Enregistrez le fichier et fermez-le.

Création de pages de navigation

Dans cette section, vous créerez uniquement certaines des pages décrites dans le plan de site que vous avez définies dans la section précédente. (Le plan de site est plus complet afin que vous soyez en mesure de consulter une hiérarchie complète lors du test des pages dans cette procédure pas à pas.)

Pour créer des pages de navigation

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web, puis cliquez sur Ajouter un nouvel élément.

  2. Dans la boîte de dialogue Ajouter un nouvel élément <Chemin> :

    1. Sous Modèles Visual Studio installés, cliquez sur Formulaire Web.

    2. Dans la zone Nom, tapez Home.aspx,, puis cliquez sur Ajouter.

  3. Basculez en mode Design.

  4. Sur la page Home.aspx, tapez Home, puis mettez-la en forme en Heading 1.

    Répétez cette procédure et créez quatre pages supplémentaires nommées Products.aspx, Hardware.aspx, Software.aspx et Training.aspx. Utilisez le nom de la page (par exemple, Products) comme titre pour reconnaître chaque page lorsqu'elle s'affiche dans le navigateur.

    Les pages que vous créez spécifiquement n'ont aucune importance. Les pages répertoriées dans cette procédure sont des suggestions qui vous permettent de consulter la hiérarchie de site imbriquée sur trois niveaux.

Création d'un menu de navigation à l'aide du contrôle TreeView

Maintenant que vous avez un plan de site et quelques pages, vous pouvez ajouter la navigation à votre site. Vous utiliserez le contrôle TreeView pour agir comme un menu de navigation réductible.

Image vbVenusSiteNavigation_TreeView1

Pour ajouter un menu de navigation de style arborescent

  1. Ouvrez la page Home.aspx.

  2. À partir du groupe Données de la Boîte à outils, faites glisser un contrôle SiteMapDataSource sur la page.

    Dans sa configuration par défaut, le contrôle SiteMapDataSource récupère ses informations du fichier Web.sitemap que vous avez créé dans « Création d'un plan de site » dans cette procédure pas à pas, afin que vous n'ayez pas à spécifier d'information supplémentaire au contrôle.

  3. À partir du groupe Navigation de la Boîte à outils, faites glisser un contrôle TreeView sur la page.

  4. Dans le menu Tâches TreeView, dans la zone Choisir la source de données, cliquez sur SiteMapDataSource1.

  5. Enregistrez la page.

Test du menu de navigation de style arborescent

Vous pouvez maintenant exécuter un test temporaire de votre système de navigation.

Pour tester le menu de navigation

  1. Appuyez sur CTRL+F5 pour exécuter la page Home.aspx.

    L'arborescence affiche deux niveaux de nœuds.

  2. Cliquez sur Products pour consulter la page Products.

    • Si vous n'avez pas créé de page Products.aspx, cliquez sur le lien pour accéder à une page que vous avez créée.

Dans l'état actuel du site Web, le menu de navigation apparaît uniquement sur la page Home. Vous pourriez ajouter les mêmes contrôles SiteMapDataSource et TreeView à chaque page de l'application pour afficher un menu de navigation dans chacune d'elle. Toutefois, vous verrez dans une étape ultérieure de cette procédure, comment placer le menu de navigation sur une page maître afin que le menu de navigation apparaisse automatiquement avec chaque page.

Affichage de l'historique de navigation à l'aide du contrôle SiteMapPath

Non seulement vous pouvez créer un menu de navigation en utilisant le contrôle TreeView, mais vous pouvez également ajouter la navigation sur chaque page qui affiche son emplacement dans la hiérarchie actuelle. Ce type de contrôle de navigation est également connu sous le nom de fil d'Ariane. ASP.NET fournit le contrôle SiteMapPath qui peut implémenter automatiquement la navigation entre les pages.

Pour afficher l'historique de navigation

  1. Ouvrez la page Products.aspx et basculez en mode Design.

  2. À partir du groupe Navigation de la Boîte à outils, faites glisser un contrôle SiteMapPath sur la page, placez le curseur devant le contrôle SiteMapPath, puis appuyez sur Entrée pour créer une ligne.

    Le contrôle SiteMapPath affiche la position de la page actuelle dans la hiérarchie de page. Par défaut, le contrôle SiteMapPath représente la hiérarchie créée dans le fichier Web.sitemap. Par exemple, lorsque vous affichez la page Products.aspx, le contrôle SiteMapPath affiche le chemin suivant :

    Home > Products

  3. Répétez cette procédure pour les autres pages que vous avez créées dans cette procédure pas à pas, sauf pour la page Home.

    Même si vous ne placez pas de contrôle SiteMapPath sur chaque page, à des fins de test, vous avez besoin d'un contrôle sur une page à chaque niveau de la hiérarchie de site (par exemple, sur les pages Products.aspx et Hardware.aspx).

Test de l'historique de navigation

Vous pouvez conserver la navigation de la page de test en consultant les pages situées au deuxième et au troisième niveau de la hiérarchie.

Pour tester la navigation entre les pages

  1. Ouvrez la page Home.aspx, puis appuyez sur CTRL+F5 pour exécuter la page.

  2. Utilisez le contrôle TreeView pour passer à la page Products.

    À l'emplacement de la page dans laquelle vous placez le contrôle SiteMapPath, vous consultez un chemin d'accès qui est semblable aux éléments suivants :

    Home > Products

  3. Cliquez sur Home pour retourner à la page Home.

  4. Utilisez le contrôle TreeView pour passer à la page Hardware.

    Cette fois, vous consultez un chemin d'accès qui est semblable au suivant :

    Home > Products > Hardware

Tous les noms de pages qui sont affichés par le contrôle SiteMapPath sont des liens, sauf le dernier qui représente la page actuelle. Vous pouvez changer le nœud actuel en lien en affectant la valeur true à la propriété RenderCurrentNodeAsLink du contrôle SiteMapPath.

Le contrôle SiteMapPath permet aux utilisateurs de se déplacer dans la hiérarchie de site, mais pas d'accéder à une page qui n'est pas dans le chemin d'accès actuel de la hiérarchie.

Création d'un menu de navigation à l'aide du contrôle Menu

Vous pouvez non seulement créer un menu de navigation en utilisant le contrôle TreeView, mais vous pouvez également utiliser le contrôle Menu pour afficher un menu de navigation qui peut être développé permettant aux utilisateurs de consulter un seul niveau de nœuds à la fois. Suspendre le pointeur de la souris sur un nœud qui contient des nœuds enfants génère un sous-menu des nœuds enfants.

Pour ajouter un menu de navigation de style menu

  1. Ouvrez la page Products.aspx et basculez en mode Design.

  2. À partir du groupe Navigation de la Boîte à outils, faites glisser un contrôle Menu sur la page.

  3. Dans le menu Tâches Menu, dans la zone Choisir la source de données, cliquez sur NewDataSource.

  4. Dans l'Assistant Configurer la source de données — <Datasourcename>, cliquez sur Plan de site, puis sur OK.

  5. Enregistrez la page.

Test du menu de navigation de style menu

Vous pouvez maintenant exécuter un test temporaire de votre système de navigation.

Pour tester le menu de navigation

  1. Fermez Tâches Menu.

  2. Ouvrez le fichier Home.aspx.

  3. Appuyez sur CTRL+F5 pour exécuter la page Home.aspx.

    L'arborescence affiche deux niveaux de nœuds.

  4. Cliquez sur Products pour consulter la page Products.

    • Si vous n'avez pas créé de page Products.aspx, cliquez sur le lien pour accéder à une page que vous avez créée.

  5. Dans le menu de navigation, maintenez le pointeur de la souris sur le lien Home pour développer le menu.

Dans l'état actuel du site Web, le menu de navigation apparaît uniquement sur la page Home. Vous pourriez ajouter les mêmes contrôles SiteMapDataSource et Menu à chaque page de l'application pour afficher un menu de navigation dans chacune d'elle. Toutefois, vous apprendrez dans la section suivante de cette procédure pas à pas à placer le menu de navigation sur une page maître afin qu'il apparaisse automatiquement avec chaque page.

Combinaison de la navigation sur le site et des pages maîtres

Dans les pages que vous avez créées jusqu'ici dans cette procédure pas à pas, vous avez ajouté individuellement des contrôles de navigation de site à chaque page. Cette opération n'est pas particulièrement complexe, car vous n'avez pas à configurer différemment les contrôles pour chaque page. Toutefois, elle peut s'ajouter aux coûts de maintenance de votre site. Par exemple, pour changer l'emplacement du contrôle SiteMapPath sur les pages de votre site, vous devriez modifier chaque page individuellement.

En utilisant des contrôles de navigation de site en combinaison avec des pages maîtres, vous pouvez créer une disposition qui contient les contrôles de navigation dans un seul emplacement. Vous pouvez ensuite afficher des pages en tant que contenu de la page maître.

Pour créer la page maître pour la navigation

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web, puis cliquez sur Ajouter un nouvel élément.

  2. Dans la boîte de dialogue Ajouter un nouvel élément <Chemin> :

    1. Sous Modèles Visual Studio installés, cliquez sur Page maître.

    2. Dans la zone Nom, tapez Navigation.master, puis cliquez sur Ajouter.

  3. Basculez en mode Design.

    La page maître apparaît avec un contrôle ContentPlaceHolder par défaut.

Dans la procédure suivante, vous créerez une page maître avec une disposition simple des contrôles de navigation. Dans une application réelle, vous utiliseriez vraisemblablement une mise en forme plus sophistiquée, mais les techniques d'utilisation des contrôles de navigation sur une page maître sont similaires.

Pour ajouter des contrôles de navigation à la page maître

  1. Sélectionnez le contrôle ContentPlaceHolder, appuyez sur la touche de direction GAUCHE, puis sur ENTRÉE.

    Cela permet d'insérer une ligne vide en avant-plan du contrôle ContentPlaceHolder.

  2. À partir du groupe Données de la Boîte à outils, faites glisser un contrôle SiteMapDataSource sur la page maître et positionnez-le au-dessus du contrôle ContentPlaceHolder.

    Remarque :

    Ne positionnez pas le contrôle SiteMapDataSource sur le contrôle ContentPlaceHolder.

    Par défaut, le contrôle SiteMapDataSource utilisera le fichier Web.sitemap que vous avez créé dans « Création d'un plan de site » dans cette procédure pas à pas.

  3. Cliquez sur le contrôle SiteMapDataSource, appuyez sur la touche de direction DROITE, puis sur ENTRÉE.

    Cela permet d'insérer une ligne vide sous le contrôle SiteMapDataSource.

  4. Dans le menu Tableau, cliquez sur Insérer un tableau, puis insérez un tableau à une ligne et deux colonnes avec une largeur de 100 %.

  5. À partir du groupe Navigation de la Boîte à outils, faites glisser un contrôle TreeView sur la cellule de gauche du tableau.

  6. Dans le menu Tâches TreeView, dans la zone Choisir la source de données, cliquez sur SiteMapDataSource1.

  7. À partir du groupe Navigation de la Boîte à outils, faites glisser un contrôle SiteMapPath sur la cellule de droite du tableau.

  8. Dans la cellule de droite, cliquez dans l'espace vide, puis appuyez sur MAJ+ENTRÉE pour créer une ligne.

  9. Faites glisser le contrôle ContentPlaceholder sur la cellule de droite du tableau et positionnez-le sous le contrôle SiteMapPath .

Lorsque vous utilisez une page maître, vous créez les pages dans votre site comme des pages de contenu. Les pages de contenu utilisent des contrôles Content pour définir le texte et les contrôles qui sont affichés dans le contrôle ContentPlaceholder de la page maître. Vous devrez par conséquent, recréer les pages Home, Products et Hardware comme des pages de contenu.

Pour créer des pages de contenu pour le site

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur la page Home.aspx, cliquez sur Supprimer, puis sur OK.

  2. Répétez l'étape 1 pour les pages Products.aspx, Software.aspx, Training.aspx et Hardware.aspx et toutes les autres pages que vous avez créées.

    Vous recréerez les pages comme des pages de contenu qui utilisent une page maître.

  3. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web, puis cliquez sur Ajouter un nouvel élément.

  4. Dans la boîte de dialogue Ajouter un nouvel élément:

    1. Sous Modèles Visual Studio installés, cliquez sur Formulaire Web.

    2. Dans la zone Nom, tapez Home.aspx.

    3. Activez la case à cocher Sélectionner la page maître.

    4. Cliquez sur Ajouter.

    La boîte de dialogue Sélectionner une page maître s'affiche.

  5. Sous Contenu du dossier, cliquez sur Navigation.master puis sur OK.

    Vous avez créé une page de contenu qui est liée à la page maître que vous avez créée dans la section précédente.

  6. Basculez en mode Design.

    En mode Design, vous pouvez voir la disposition que vous avez créée pour la page maître, avec une zone modifiable dans le contrôle correspondant au contrôle ContentPlaceHolder1 sur la page maître.

  7. Cliquez dans la fenêtre Content.

    Il s'agit de l'emplacement auquel vous pouvez ajouter le contenu pour cette page spécifique.

  8. Tapez Home, puis mettez en forme le texte en Heading 1.

    Vous avez créé le texte statique (en particulier, le titre) de la page Home.

  9. Répétez les étapes 3 à 8 pour créer une page de contenu Products.aspx et une page de contenu Hardware.aspx. Dans l'étape 8, tapez Products et Hardware, respectivement, au lieu de Home.

Test des contrôles de navigation dans la page maître

Les tests des pages maîtres et des pages de contenu sont identiques aux tests de pages individuelles.

Pour tester des contrôles de navigation dans la page maître

  1. Ouvrez la page Products.aspx, puis appuyez sur CTRL+F5 pour exécuter la page.

    La page de contenu Products est fusionnée avec la page maître. Dans le navigateur, vous pouvez voir une page qui contient le titre Products et les contrôles de navigation que vous avez ajoutés à la page maître.

  2. Dans le contrôle TreeView, cliquez sur Hardware.

    La page Hardware est affichée avec la même disposition que la page Products, excepté que le contrôle SiteMapPath affiche un chemin d'accès différent.

Étapes suivantes

Cette procédure pas à pas illustre les fonctionnalités de base de navigation de site ASP.NET et des contrôles de navigation. Vous pouvez essayer des fonctionnalités de navigation supplémentaires. Par exemple, vous pouvez souhaiter procéder comme suit :

  • Mettez en forme le contrôle SiteMapPath pour personnaliser son apparence. Le contrôle prend en charge plusieurs options qui gèrent l'affichage des liens. Pour plus d'informations, consultez SiteMapPath.

  • Personnalisez l'affichage des pages dans le contrôle TreeView. Par exemple, vous pouvez mettre en surbrillance la page actuelle dans le nœud de l'arborescence.

  • Utilisez par programme les informations de navigation de site. Un contrôle SiteMapPath est disponible sur la page actuelle que vous pouvez utiliser pour afficher par programme des informations de navigation.

  • Utilisez un magasin de données différent pour les informations sitemap. Au lieu d'utiliser le fichier sitemap XML par défaut, vous pouvez souhaiter utiliser un plan de site existant ou des informations sitemap du magasin dans une base de données. La navigation de site ASP.NET utilise un modèle de fournisseur. Vous pouvez créer un composant qui gère des informations sitemap, puis configurer votre application pour utiliser ce composant au lieu du fournisseur sitemap par défaut. Pour plus d'informations, consultez Fournisseurs de navigation de site ASP.NET.

Voir aussi

Tâches

Procédure pas à pas : création d'une page Web de base dans Visual Web Developer

Procédure pas à pas : création et utilisation de pages maîtres ASP.NET dans Visual Web Developer

Concepts

Vue d'ensemble de la navigation de site ASP.NET

Plans de sites ASP.NET

Vue d'ensemble des pages maîtres ASP.NET

Sécurisation de la navigation de site ASP.NET

Sécurisation de l'accès aux données

Autres ressources

Sécurité des applications ASP.NET dans les environnements hébergés

Méthodes de sécurité de base pour les applications Web ASP.NET