Procédure pas à pas : contrôle des menus ASP.NET par programme

Mise à jour : novembre 2007

Cette procédure pas à pas illustre comment utiliser le contrôle Menu ASP.NET par programme en coordonnant deux menus sur la même page à l'aide de code.

Vous pouvez créer des menus de navigation pour votre site Web à l'aide du contrôle Menu ASP.NET. Dans cette procédure pas à pas, vous explorez les aspects de programmation du contrôle Menu ASP.NET et créez deux menus liés au même fichier Web.sitemap qui fonctionnent ensemble. Le premier menu est un menu affiché de manière statique de catégories telles que les produits, les services et l'assistance. Il apparaîtra horizontalement le long du bord supérieur de la page. Le deuxième menu est affiché horizontalement au-dessous du premier menu. Le contenu du deuxième menu est déterminé par l'élément de menu qui est sélectionné dans le premier. Selon la sélection actuelle du premier menu, vous modifiez par programme la source de données de plan de site du deuxième menu afin d'afficher uniquement la partie du fichier Web.sitemap qui concerne la catégorie sélectionnée.

Composants requis

Pour exécuter cette procédure pas à pas, vous devez disposer de la configuration suivante :

• Microsoft Visual Web Developer (Visual Studio).

• .NET Framework

Création du site Web

Si vous avez déjà créé un site Web dans Visual Web Developer (par exemple, 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 et passer à l'étape « Création du fichier de plan de site » de cette procédure. Sinon, créez un site et une page Web en suivant ces étapes.

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

1. Ouvrez Visual Web Developer.

2. Dans le menu Fichier, cliquez sur Nouveausite 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, entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.

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

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

6. Cliquez sur OK.

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

Création du fichier de plan de site

Les deux menus dérivent leur contenu du fichier Web.sitemap du site. Les objets SiteMapDataSource que vous créez sont utilisés par les deux menus pour garantir que chacun affiche la partie appropriée du plan de site.

Pour créer le fichier Web.sitemap

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

2. Dans la boîte de dialogue Ajouter un nouvel élément, sélectionnez Plan de site puis cliquez sur Ajouter.

3. Ajoutez le code XML suivant au nouveau fichier. Le XML représente une hiérarchie de choix de menu. Les éléments <siteMapNode> sont imbriqués. Chaque nœud est un élément de menu qui contient des sous-éléments, dont certains possèdent à leur tour des sous-éléments. Il existe trois nœuds de second niveau au-dessous du nœud Home : Hardware, Software et Support. Au-dessous de ceux-ci, il existe différentes sous-catégories.

   <?xml version="1.0" encoding="utf-8" ?>
   <siteMap>
     <siteMapNode title="Home">
       <siteMapNode title="Products">
         <siteMapNode title="Hardware" url="Default.aspx?node=hardware">
           <siteMapNode title="Mouse"/>
           <siteMapNode title="Keyboard"/>
           <siteMapNode title="NetCard"/>
           <siteMapNode title="Monitor"/>
           <siteMapNode title="PC"/>
         </siteMapNode>
         <siteMapNode title="Software" url="Default.aspx?node=software">
           <siteMapNode title="Spreadsheet"/>
           <siteMapNode title="Word Processor"/>
           <siteMapNode title="Presentation"/>
           <siteMapNode title="Mail"/>
           <siteMapNode title="Games"/>
         </siteMapNode>
         <siteMapNode title="Books" url="Default.aspx?node=books">
           <siteMapNode title="Programming"/>
           <siteMapNode title="Debugging"/>
           <siteMapNode title="Testing"/>
           <siteMapNode title="Web Apps"/>
           <siteMapNode title="WinForm Apps"/>
         </siteMapNode>
       </siteMapNode>
       <siteMapNode title="Services">
         <siteMapNode title="Consulting" url="Default.aspx?node=consulting">
           <siteMapNode title="Processes"/>
           <siteMapNode title="Management"/>
           <siteMapNode title="Recruiting"/>
         </siteMapNode>
         <siteMapNode title="Development" url="Default.aspx?node=development">
           <siteMapNode title="Web Apps"/>
           <siteMapNode title="Enterprise Apps"/>
           <siteMapNode title="Database"/>
         </siteMapNode>
       </siteMapNode>
       <siteMapNode title="Support">
         <siteMapNode title="Drivers" url="Default.aspx?node=drivers">
           <siteMapNode title="Audio"/>
           <siteMapNode title="Network"/>
           <siteMapNode title="Printer"/>
           <siteMapNode title="Modem"/>
         </siteMapNode>
         <siteMapNode title="Manuals" url="Default.aspx?node=manuals">
           <siteMapNode title="Applications"/>
           <siteMapNode title="Troubleshooting"/>
           <siteMapNode title="Installation"/>
           <siteMapNode title="Internet"/>
         </siteMapNode>
         <siteMapNode title="Updates" url="Default.aspx?node=updates">
           <siteMapNode title="Release 1"/>
           <siteMapNode title="Game Package"/>
         </siteMapNode>
       </siteMapNode>
     </siteMapNode>
   </siteMap>
   

4. Enregistrez le fichier.

Création du premier menu

Le premier menu affiche un seul niveau d'éléments de menu statiques. Il est affiché horizontalement en haut de la page.

Pour créer le premier menu

1. Dans l'Explorateur de solutions, double-cliquez sur la page Default.aspx pour l'ouvrir.

2. Basculez en mode Design.

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

4. Dans la fenêtre Propriétés, affectez Horizontal à la propriété Orientation.

5. Affectez 0 à MaximumDynamicDisplayLevels.

   Cela garantit qu'aucune partie du menu n'apparaîtra de manière dynamique, du type menu volant.

6. Assurez-vous que StaticDisplayLevels a la valeur 1.

   Cela permet l'affichage d'un seul niveau dans le menu.

7. Cliquez sur la balise active dans le contrôle Menu.

   La boîte de dialogue Tâches Menu s'affiche.

8. Sélectionnez Nouvelle source de données dans la liste déroulante Choisir la source de données.

9. Dans l'Assistant Configuration de source de données, sélectionnez Plan de site.

10. Acceptez le nom par défaut SiteMapDataSource1, puis cliquez sur OK.

Configuration de la première source de données

Étant donné que le premier menu affiche un seul niveau d'éléments de menu statiques, vous devez configurer sa source de données afin d'afficher la partie appropriée du fichier Web.sitemap. Dans ce cas, il s'agit des éléments de second niveau : Products, Services et Support.

Les liaisons par défaut du contrôle Menu à un contrôle SiteMapDataSource transforment chaque élément de menu en un lien de navigation. Étant donné que vous souhaitez contrôler par programme le comportement d'un autre menu, vous utilisez des liaisons personnalisées pour que ces éléments de menu n'agissent pas comme des liens de navigation mais, à la place, provoquent une publication (postback) afin que le deuxième menu puisse être mis à jour.

Pour configurer la première source de données

1. Affichez la page Default.aspx en mode Design, puis cliquez sur la balise active dans le contrôle Menu.

   La boîte de dialogue Tâches Menu s'affiche.

2. Cliquez sur Modifier les DataBindings MenuItem.

3. Dans l' Éditeur de DataBindings pour les menus, dans la liste déroulante Liaisons de données disponibles, sélectionnez SiteMapNode et cliquez sur Ajouter.

4. Sélectionnez Textfield dans la liste déroulante Propriétés de la liaison de données et sélectionnez Titre dans le menu déroulant. Cliquez sur OK.

5. Sélectionnez le contrôle SiteMapDataSource.

6. Dans Propriétés, affectez False à ShowStartingNode.

Création du deuxième menu

Le deuxième menu est dynamique et sa source de données utilise uniquement une partie du fichier de plan de site qui est déterminée par programme par la sélection dans le premier menu. Comme avant, vous souhaitez que le menu affiche son premier niveau de manière statique ; toutefois, vous souhaitez à présent que le reste du fichier Web.sitemap apparaisse dynamiquement.

Pour créer le deuxième menu

1. Affichez la page Default.aspx en mode Design, puis faites glisser un deuxième contrôle Menu sur la page au-dessous du premier contrôle Menu.

2. Dans Propriétés, affectez Horizontal à Orientation.

3. Cliquez sur la balise active dans le deuxième contrôle Menu.

   La boîte de dialogue Tâches Menu s'affiche.

4. Sélectionnez Nouvelle source de données dans la liste déroulante Choisir la source de données.

5. Dans l'Assistant Configuration de source de données, sélectionnez Plan de site.

6. Acceptez le nom par défaut SiteMapDataSource2, puis cliquez sur OK.

Configuration de la deuxième source de données

Dans cette section, vous configurez la source de données afin de sélectionner uniquement une section particulière du fichier Web.sitemap. Pour cela, vous démarrez avec la première catégorie par défaut dans le premier menu qui est la section Products du fichier Web.sitemap. Vous utilisez alors la propriété StartingNodeURL pour indiquer un attribut URL spécifique dans le fichier.

Pour configurer le point de départ de la deuxième source de données

1. Sélectionnez SiteMapDataSource2 et affectez "Default.aspx?node=hardware" à sa propriété StartingNodeURL.

2. Affectez -1 à StartingNodeOffset.

3. Affectez False à ShowStartingNode.

Ajout de code pour coordonner les menus

Pour contrôler le deuxième menu selon l'état du premier menu, interceptez l'événement MenuItemClick du premier menu et indiquez l'affichage du deuxième menu du fichier de plan de site dans le code.

Pour coordonner les menus dans le code

1. Affichez la page Default.aspx en mode Design et sélectionnez Menu1.

2. Dans Propriétés, affectez Menu1_MenuItemClick à l'événement MenuItemClick.

   Une méthode nommée Menu1_MenuItemClick sera créée à votre intention dans le fichier code-behind pour la page Default.aspx ou à l'intérieur des balises <script> de la page .aspx si vous utilisez le modèle de page à fichier unique.

3. Ajoutez aux méthodes le code mis en surbrillance suivant :

   Protected Sub Menu1_MenuItemClick(ByVal sender As Object, _
     ByVal e As System.Web.UI.WebControls.MenuEventArgs) _
     Handles Menu1.MenuItemClick
     Select Case e.Item.Value
       Case "Products"
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=hardware"
       Case "Services"
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=consulting"
       Case "Support"
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=drivers"
     End Select
   End Sub
   

   protected void Menu1_MenuItemClick(Object sender,    
         System.Web.UI.WebControls.MenuEventArgs e)
   {
     switch(e.Item.Value)
     {
       case "Products":
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=hardware";
         return;
       case "Services":
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=consulting";
         return;
       case "Support":
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=drivers";
         return;
     }
   }
   

   Le code précédent intercepte l'événement Click du Menu1. Au lieu d'accéder à n'importe quel emplacement, vous utilisez la valeur pour déterminer l'affichage du deuxième contrôle Menu. Pour ce faire, modifiez la propriété StartingNodeUrl du contrôle SiteMapDataSource du deuxième contrôle Menu.

4. Enregistrez le fichier.

Test des menus

Pour tester l'interaction entre les deux menus, cliquez sur les éléments du premier menu, puis observez les changements du deuxième menu. Le deuxième menu est dynamique et représente le troisième niveau du fichier Web.sitemap.

Pour tester le menu

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

   Le premier menu s'affiche, le menu secondaire présentant les éléments de menu sous Products dans le fichier Web.sitemap.

2. Cliquez sur Services dans le premier menu.

   Le deuxième menu affiche maintenant les menus dynamiques Consulting et Development.

3. Cliquez sur Support.

   Le deuxième menu affiche les éléments de menu dynamiques Pilotes, Manuals et Updates.

Étapes suivantes

Le contrôle Menu vous permet de créer des menus de navigation facilement et offre une assistance de programmation pour les scénarios plus complexes. Vous pouvez également vous familiariser avec les options suivantes :

• Appliquez un thème ou une apparence au contrôle Menu. Pour plus d'informations, consultez Procédure pas à pas : personnalisation d'un site Web à l'aide de thèmes dans Visual Studio

• En savoir plus sur la navigation de site. Pour plus d'informations, consultez Vue d'ensemble de la navigation de site ASP.NET

• Utilisez un contrôle Menu sur une page maître pour fournir une navigation latérale définie sur une page seule. Pour plus d'informations, consultez Procédure pas à pas : création et utilisation de pages maîtres ASP.NET dans Visual Web Developer.

Voir aussi

Tâches

Procédure pas à pas : affichage d'un menu sur des pages Web

Concepts

Vue d'ensemble des contrôles de menu