Partager via

Comment : ajouter la navigation de site simple

  • Article

Mise à jour : novembre 2007

Vous pouvez utiliser le contrôle SiteMapPath, TreeView ou Menu pour offrir un moyen cohérent aux utilisateurs de naviguer sur votre site Web.

Le contrôle SiteMapPath affiche un chemin de navigation, également appelé fil d'Ariane (breadcrumbs) ou « sourcil » (eyebrow), qui indique l'emplacement de la page active et affiche des liens sous la forme d'un chemin de retour à la page d'accueil.

Remarque :

Si une page .aspx contient un contrôle SiteMapPath, elle doit être répertoriée dans le fichier Web.sitemap pour que le contrôle soit restitué.

Sur une page Web, le contrôle SiteMapPath affiche ce qui suit si l'utilisateur parcourt la page Training :

Home > Services > Training

Le contrôle TreeView affiche une arborescence que les utilisateurs peuvent parcourir pour les liens aux différentes pages de votre site. L'utilisateur peut développer ou réduire un nœud contenant des nœuds enfants en cliquant dessus. La première fois qu'il est restitué, le contrôle TreeView est développé en entier. Sur une page Web, le contrôle TreeView affiche des éléments semblables aux suivants :

- Home

   - Services

      + Training

Le contrôle Menu affiche un menu extensible que les utilisateurs peuvent parcourir pour les liens aux différentes pages de votre site. Les nœuds qui contiennent des nœuds enfants sont développés lorsque le curseur passe sur l'élément de menu. Pour obtenir un exemple de code affichant un plan de site dans un contrôle Menu, consultez Comment : afficher des données sitemap dans des contrôles serveur Web non hiérarchiques.

Pour utiliser ces contrôles de navigation de site, vous devez décrire la structure de votre site Web dans un fichier Web.sitemap.

Pour créer un fichier Web.sitemap

  1. Créez un fichier dans le répertoire racine de votre site Web appelé Web.sitemap.

  2. Ouvrez le fichier Web.sitemap et ajoutez le code suivant.

    <?xml version="1.0" encoding="utf-8" ?>
<siteMap>
  <siteMapNode title="Home" >
    <siteMapNode title="Services" >
      <siteMapNode title="Training" url="~/Training.aspx"/>
    </siteMapNode>
  </siteMapNode>
</siteMap>
    Remarque :

    Votre application Web échouera si vous répertoriez une URL qui n'existe pas, ou qui est en double. L'attribut url peut démarrer avec le raccourci "~/" qui indique la racine de l'application. Pour plus d'informations, consultez Chemins d'accès aux sites Web ASP.NET.

    Plus loin dans cette rubrique, vous créerez la page Training.aspx.

  3. Enregistrez le fichier et fermez-le.

Pour ajouter une navigation de site à une page Web

  1. Créez un fichier dans le répertoire racine de votre site Web appelé Training.aspx.

  2. Ouvrez Training.aspx et ajoutez le code suivant.

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
  <title>Simple Navigation Controls</title>
</head>
<body>
  <form id="form1" >
  <div>

  <h2>Using SiteMapPath</h2>
  <asp:SiteMapPath ID="SiteMapPath1" Runat="server">
  </asp:SiteMapPath>


  <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />

  <h2>Using TreeView</h2>
  <asp:TreeView ID="TreeView1" Runat="Server" DataSourceID="SiteMapDataSource1">
  </asp:TreeView>

  <h2>Using Menu</h2>
  <asp:Menu ID="Menu2" Runat="server" DataSourceID="SiteMapDataSource1">
  </asp:Menu>

  <h2>Using a Horizontal Menu</h2>
  <asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1"
    Orientation="Horizontal" 
    StaticDisplayLevels="2" >
  </asp:Menu>

  </div>
  </form>
</body>
</html>

    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
  <title>Simple Navigation Controls</title>
</head>
<body>
  <form id="form1" >
  <div>

  <h2>Using SiteMapPath</h2>
  <asp:SiteMapPath ID="SiteMapPath1" Runat="server">
  </asp:SiteMapPath>


  <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />

  <h2>Using TreeView</h2>
  <asp:TreeView ID="TreeView1" Runat="Server" DataSourceID="SiteMapDataSource1">
  </asp:TreeView>

  <h2>Using Menu</h2>
  <asp:Menu ID="Menu2" Runat="server" DataSourceID="SiteMapDataSource1">
  </asp:Menu>

  <h2>Using a Horizontal Menu</h2>
  <asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1"
    Orientation="Horizontal" 
    StaticDisplayLevels="2" >
  </asp:Menu>

  </div>
  </form>
</body>
</html>

  3. Enregistrez et fermez le fichier ; vous pouvez alors le visualiser dans un navigateur pour voir comment les contrôles affichent la structure de navigation de votre site Web.

Sécurité

Vous pouvez masquer les liens de votre structure de navigation aux membres de certains rôles de sécurité. Pour plus d'informations, consultez Suppression de la sécurité sitemap ASP.NET.

Voir aussi

Tâches

Comment : personnaliser l'apparence des contrôles serveur Web SiteMapPath

Concepts

Personnalisation de l'apparence du contrôle serveur Web TreeView

Suppression de la sécurité sitemap ASP.NET

Sécurisation de la navigation de site ASP.NET

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

Référence

SiteMapPath

TreeView

Menu

Autres ressources

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