Synchronisation d’un contrôle Menu et d’un contrôle TreeView
Paru le 01 décembre 2006
Par Christine DUBOIS et Bernard FEDOTOFF, Microsoft Regional Directors, consultants, AGILCOM

Mots clés
ASP.NET 2.0, Menu, TreeView, SiteMapDataSource, StartFromCurrentNode, StartingNodeUrl, StartingNodeOffset.

La problématique
L’idée est d’interconnecter les deux contrôles ASP.NET 2.0 Menu et TreeView à partir d’une même source de données gérée par un contrôle de source de données de type SiteMapDataSource pour que l’un affiche les rubriques enfants de l’autre. Sur le principe, c’est très simple, sauf qu’il n’est pas possible de s’en sortir avec un seul contrôle de source de données et qu’il faut exploiter judicieusement les propriétés de ces derniers pour synchroniser les deux affichages.

Sur cette page

Exemple fonctionnel Exemple fonctionnel
Description de la solution Description de la solution
Marche à suivre Marche à suivre
Liens vers d’autres ressources : Liens vers d’autres ressources :

Exemple fonctionnel

Prenons l’exemple d’une application web (cf. Figure 1) de consultation de petites annonces. La zone d’en-tête de la page comprend un contrôle serveur web ASP.NET 2.0 de type SiteMapPath qui affiche le chemin de la page en cours et un contrôle de type Menu orienté horizontalement qui liste les rubriques des petites annonces. L’objectif est d’afficher dynamiquement dans la barre de navigation (à gauche) la liste des sous rubriques de la rubrique en cours à l’aide d’un contrôle de type TreeView.


Figure 1 - Vue de la rubrique [Auto Moto] contenant les sous rubriques [Voitures] et [Motos].

Description de la solution

Le principe consiste à utiliser la liaison de données (databinding) sur les deux contrôles de type Menu et TreeView pour les peupler dynamiquement à partir d’une même source d’information qui contient la hiérarchie des rubriques et sous rubriques correspondantes. L’exemple qui vous est présenté (cf. Figure 2) est basé sur une source de données de type Plan de site (fichier d’extension .sitemap) gérée par un contrôle de type SiteMapDataSource.

Pour interconnecter et synchroniser les deux contrôles de navigation Menu et TreeView, il faut créer deux contrôles de type SiteMapDataSource, pointant tous deux sur le même fichier de Plan de site de l’application, et lier chacun d’eux à l’un des contrôles de navigation. Il suffit ensuite de jouer sur la configuration des deux contrôles de source de données pour contrôler les informations que chaque contrôle de navigation doit afficher.

Marche à suivre

  1. Ajoutez à l’application un fichier de type Plan de Site nommé Web.sitemap.



  2. Créez la structure des nœuds reproduisant la hiérarchie de navigation dans les rubriques/sous-rubriques.

    Figure 2 - Fichiers de Plan de site de l’application contenant la hiérarchie des rubriques d’annonces.

    Dans cet exemple, chaque nœud est associé à une page web donc à une url, c’est pourquoi on établit un Plan de site. Mais vous pourriez appliquer ce même scénario à partir d’une source de données différente, typiquement une base de données.

  3. Ajoutez sur la page deux contrôles de source de données de type SiteMapDataSource.

    • Faites un glisser déplacer Boîte à outils > rubrique Données.

    • Nommez les contrôles via la propriété ID (dans l’exemple dsRubriques et dsSousRubriques).

  4. Ajoutez les deux contrôles d’affichage de type Menu et TreeView sur la page.

    • Faites un glisser déplacer Boîte à outils > rubrique Navigation.

    • Configurez leurs propriétés pour définir leur affichage. Par exemple, paramétrez la propriété Orientation du contrôle Menu à Horizontal pour le présenter horizontalement.



    • Affichez la balise active des contrôles et sélectionnez le contrôle de source de données correspondant pour chaque contrôle.



  5. Configurez les propriétés des contrôles de source de données pour synchroniser l’affichage des deux types de contrôle de navigation.

    • Paramétrez la propriété ShowStartingNode des deux contrôles de source de données à False de façon à ce qu’ils ignorent le tout premier nœud racine du Plan de site, correspondant à la page d’accueil, au moment du databinding.

    • Paramétrez la propriété StartFromCurrentNode du contrôle de source de données des sous-rubriques à True de façon à ce qu’il utilise la page en cours comme point de départ de l’arborescence de nœuds à afficher dans le contrôle TreeView qui lui est lié.



  6. Sauvegardez la page et exécutez-la pour valider le comportement de la navigation mise en place.

    • Si vous sélectionnez par exemple la rubrique Bonnes affaires à partir du menu horizontal, le contrôle TreeView affiche les sous-rubriques correspondantes Bricolage et Jardinage.



    • Si la page en cours est la page d’Accueil default.aspx, le TreeView affiche alors l’intégralité de la hiérarchie. Or ce n’est pas vraiment souhaitable lorsque l’on veut utiliser le TreeView uniquement comme un menu contextuel lié au contrôle Menu principal. Il devrait être vide puisque la page d’accueil ne contient aucune sous rubrique.



  7. Une autre solution consiste à configurer les propriétés des contrôles de source de données différemment.

    • Laissez la configuration précédente sur le contrôle de source de données des rubriques.

    • Configurez la propriété StartingNodeUrl du contrôle de source de données des sous rubriques sur l’url de la page d’accueil. Cela détermine le point de démarrage de l’arborescence de nœuds sur la page d’accueil.

    • Repassez la propriété StartFromCurrentNode de ce même contrôle à False car celle-ci est exclusive avec la propriété précédente StartingNodeUrl. Ce ne peut être que l’une ou l’autre qui détermine le point de démarrage de la hiérarchie de nœuds.

    • Configurez la propriété StartingNodeOffset de ce même contrôle à 3.



  8. Sauvegardez la page et exécutez-la pour valider le comportement de la navigation mise en place.

    • Vous obtenez exactement le même comportement que précédemment, le TreeView affichant dynamiquement les sous-rubriques de la rubrique sélectionnée dans le contrôle Menu. Mais cette fois-ci, dans le cas de la page d’accueil, le TreeView n’affiche rien puisque nous ne sommes dans le contexte d’aucune rubrique.



      Comment expliquer ce comportement ?
      Tout vient de la propriété StartingNodeOffset que nous avons configurée à 3 et de la propriété StartingNodeUrl qui définit le nœud de démarrage de l’arborescence (ici sur la page d’accueil Default.aspx).
      Comme l’indique son nom, la propriété StartingNodeOffset applique un offset (positif ou négatif) sur le nœud de démarrage de l’arborescence.
      Dans notre cas, cela signifie que le nœud de démarrage du sous arbre qui sera affiché dans le TreeView est un nœud enfant, 3 niveaux au-dessous du nœud de démarrage (donc de la page Default.aspx). En fait, le contrôle de source de données essaie de trouver un nœud enfant directement sur le chemin d’accès entre le nœud de démarrage (Default.aspx) et la page actuellement demandée. Si le nœud de la page actuellement demandée est moins de 3 niveaux au-dessous du nœud de démarrage, ce qui est notre cas ici puisque le Plan de site a un maximum de 3 niveaux de rubriques d’annonces (sans compter le nœud racine du Plan de site de la page d’accueil), le nœud de la page demandée est alors utilisé comme nœud de démarrage. Donc on retombe sur le comportement du début de cet exemple lorsque nous avions utilisé la propriété StartFromCurrentNode.
      Ce qui nous intéresse dans cette nouvelle configuration, c’est que cette propriété se comporte différemment lorsque la page demandée est le nœud de démarrage lui-même, c’est-à-dire la page d’accueil. En effet la propriété StartingNodeOffset est alors ignorée. Du coup, rien ne s’affiche car le contrôle de source de données a la propriété ShowStartingNode à False.

      Vous pouvez également configurer la propriété ExpandDepth à 0 au lieu de FullyExpand pour le contrôle TreeView si vous ne voulez pas ouvrir par défaut la hiérarchie de nœuds complète qu’il représente et n’afficher ainsi qu’un seul niveau.

      Figure 3 - Affichage du TreeView de la rubrique [Auto Moto] avec la propriété configurée respectivement à FullyExpand et 0

  9. En mode Source de la page, vous obtenez.

          <asp:SiteMapDataSource ID="dsRubriques" runat="server" 
             ShowStartingNode="False" />
<asp:SiteMapDataSource ID="dsSousRubriques" runat="server" 
             ShowStartingNode="False" StartingNodeUrl="~/Default.aspx" 
             StartingNodeOffset="3" />

<asp:SiteMapPath ID="chemin" runat="server"></asp:SiteMapPath>

<asp:Menu ID="mCategories" runat="server" DataSourceID="dsRubriques" Orientation="Horizontal"
             StaticPopOutImageUrl="Images/bullet-3.gif" MaximumDynamicDisplayLevels="1">
                   <StaticMenuItemStyle ItemSpacing="1em"/>
                  <DynamicMenuStyle BackColor="LightGray" />
</asp:Menu>

<asp:TreeView ID="tvSousCategories" runat="server" DataSourceID="dsSousRubriques"
             ExpandImageUrl="Images/signeplus.gif" CollapseImageUrl="Images/signemoins.gif"
             NoExpandImageUrl="Images/bullet-1.gif" ExpandDepth="0">
</asp:TreeView>

    Vous constatez qu’il n’y a nulle part aucune référence au fichier de Plan de site nommé Web.sitemap. Le lien avec celui-ci est fait automatiquement au niveau des contrôles de sources de données par l’intermédiaire du provider AspNetXmlSiteMapProvider sur la base duquel ils fonctionnent.

Liens vers d’autres ressources :

  • - Code source de l’exemple présenté dans cet article. <MenusLies.zip>.

  • - Pour en savoir plus sur les propriétés du contrôle de source de données SiteMapDataSource: StartingNodeOffset, StartingNodeUrl, StartFromCurrentNode, ShowStartingNode.

  • - Retrouvez un exemple complet de mise en œuvre de la navigation dans l’atelier 3 du coach ASP.NET 2.0.

  • - Article technique avec un exemple de fournisseur (provider) qui expose le système de fichiers en tant que source de données pour la navigation comme alternative au fichier XML Web.sitemap standard.

Téléchargez

Le code associé à l'article
Code.zip
17 KB

Page view tracker