Configuration du control menu (a:active ou itemSelected)Résolu

Question

Bonjour, Je pose ma question aux habitués de asp.net et du controle menu. Mais les autres aussi peuvent répondre...toutes les contributions sont les bienvenues ! :-) Ma navigation est en deux parties, donc deux menus. Le premier est statique, il propose les noeuds racines de mon sitemap. Le deuxième est dynamique, il propose les noeuds de niveau 2 (les noeuds enfants donc). C'est le même principe que là. (sauf que je travaille pas en flash) J'applique un sytle à mon premier menu. Voila le problème: les items racines qui n'ont pas d'enfant restent bien en rouge uen fois que la page est chargée mais ceux qui ont des noeuds enfants reviennent en "statut" normal. Comment faire pour faire que mes noeuds parents restent en selected ? J'ai essayé cette bidouille sans succès: je mets une class puis dans le css : .StaticMenuItemStyle a:active {color:red} Pour illustrer, vous pouvez voir ce site, la navigation est en flash mais j'essaie de faire le même rendu (au niveau des onglets) en .net et css. Merci !

cs_ordiminnie · Accepted Answer

Hourra ! ça fonctionne ! J'ai finalement compris (grâce à toi : merci beaucoup de toutes tes explications forts utiles !) ; voici mon code (j'ai encore une petite question à la fin) --> Pour le menu de niveau 1 protected void PrincipalMenu_PreRender(object sender, EventArgs e) { foreach (MenuItem myItem in PrincipalMenu.Items) { if ((myItem.NavigateUrl) == (Request.Path)) { myItem.Selected = true; } else if ((myItem.NavigateUrl) == ((Request.Path) + "#")) { myItem.Selected = true; } } } --> Pour le menu de niveau 2 protected void SubMenu_PreRender(object sender, EventArgs e) { foreach (MenuItem myItem in SubMenu.Items) { if ((myItem.NavigateUrl) == (Request.Path)) { myItem.Text "" + myItem.Text + ""; //même avec "" ça ne fonctionne pas. encore moins avec myItem.selected true; SiteMapNode myNode = SiteMap.CurrentNode; SiteMapNode myParentNode = myNode.ParentNode; string myUrl = myParentNode.Url; foreach (MenuItem myParentItem in PrincipalMenu.Items) { if (myParentItem.NavigateUrl == myUrl) { myParentItem.Selected = true; } } } } } Tu remarques peut être que pour les MenuItems du premier menu, j'ai pu simplement mettre la propriété selected à true puis j'applique une présentation via la balise qui se trouve dans le comosant menu. Par contre, pour les items du deuxième menu, le même pp ne fonctionne pas (balise ) !Je suis obligé d'injecter l'html pur (je ne peux pas injecter une classe css.) Aurais-tu une explication à cela ? Normalement je voulais utiliser des images de fond. Un grand merci pour ton aide. J'attends ton avis sur ce dernier problème et je mettrais ce topic en accepté.

ggtry · Answer

Bonsoir,

C'est normal, puisque les éléments statiques qui ont des enfants ne sont pas sélectionnés comme tels (c'est l'un de leurs enfants qui l'est).
Tu peux passer par l'événément MenuItemClick et modifier l'apparence du parent lorsqu'un enfant est sélectionné.
Le problème est que tu dois alors introduire l'html dans le .text de ton item (en tout cas, je ne vois pas comment faire autrement).
Ca fait très bidouille, mais sur un menu à deux niveaux (1 statique, 1 dynamique), tu peux donner la même valeur au text et à la value pour le static, puis, par exemple (en changeant ici le background du static lorsque tu cliques sur le sous-menu) :

Protected Sub Menu1_MenuItemClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MenuEventArgs)
        For Each i As MenuItem In Menu1.Items
            i.Text = i.Value
        Next
        If Not e.Item.Parent Is Nothing Then
            e.Item.Parent.Text = "" & e.Item.Parent.Text & ""
        End If
    End Sub

Peut-être y a-t-il mieux, mais c'est une solution...

GGtry

cs_ordiminnie · Answer

Merci ggtry,

J'ai essayé ta solution mais je me bute à un autre problème : l'évènement onmenuitemclick ne se déclenche jamais... Si quelqu'un veut bien jeter un oeil à mon code, moi je ne vois pas....

Voici mon code pour le composant Menu :
                  

Puis dans le code-behind:
 protected void SubMenu_MenuItemClick(object sender, MenuEventArgs e)
    {
        e.Item.Parent.Text = "" + e.Item.Parent.Text + "";
    }

Voilà, je ne passe jamais sur l'évènement (avec un breakpoint) quand je clique sur les éléments du menu...quelqu'un sait d'où ça peut venir ? C'est tout ce qu'il y a de plus classique il me semble...

Merci

ggtry · Answer

Bonjour,

Oui, désolé, je n'y avais pas pensé, mais puisque c'est un menu de navigation, tu dois avoir des navigateurl sur le sous-menu, et donc pas de postback... d'où le fait que l'événement menuitemclick n'est pas déclenché.
Autre solution, dans ce cas : sur le page_load, tu peux comparer en faisant une boucle le path de tes navigateurl avec le path de la page actuelle. Si il y a correspondance, tu donnes au parent de l'item qui a le bon navigateurl le format que tu veux.

GGtry

cs_ordiminnie · Answer

Ok je comprends l'idée mais je n'ai pas de navigateurl car mon menu est connecté à une SiteMapDataSource, lui-même connecté à un sitemap....  enfin j'imagine que je vais pouvoir récupérer les url du sitemap quand meme. 
 Si tu as le nom de la fonction qui me permet de faire ça, ne te gêne pas pour me la donner ! :)

En tout cas, merci pour l'idée !

ggtry · Answer

Le navigateurl est en effet défini automatiquement.
Sur le prerender du menu (plutôt que sur le Page_Load), tu peux essayer un truc comme cela :

For Each i As MenuItem In Menu1.Items
            For Each j As MenuItem In i.ChildItems
                If Server.MapPath(j.NavigateUrl) = Server.MapPath(Request.Path) Then
                   j.Parent.Text = "" & j.Parent.Text & ""
                End If
            Next
Next

GGtry

cs_ordiminnie · Answer

cs_ordiminnie · Answer

Merci pour ces précisions !

J'ai cependant un problème : je n'arrive pas à accéder à un élément de menu de niveau 2 à partir du niveau 1 et vice-versa.
Pour mon menu de niveau 1 : myItem.ChildItems.Count() renvoie tj 0
Pour mon menu de niveau 2: myItem.Parent vaut tj null

Donc je ne peux pas préciser que lorsque un élément de niveau 2 est sélectionné, on doit appliquer une certaine présentation à son parent. 

J'ai donc fait une boucle pour chacun des niveaux et je pensais dire à l'élément sélectionné de niveau 1 qu'il doit le rester jusqu'à ce qu'un autre élément de niveau 1 le soit. Comment formuler ça ? Je continue aussi de chercher mais si tu as une piste...

Voilà mon code:
--> pour le menu de niveau 1
protected void PrincipalMenu_PreRender(object sender, EventArgs e)
    {
        foreach (MenuItem myItem in PrincipalMenu.Items)
        {
            if ((myItem.NavigateUrl) == (Request.Path))  
            {
                myItem.Text = "" + myItem.Text + "";
            }
            else if ((myItem.NavigateUrl) == ((Request.Path) + "#"))
            {
                myItem.Text = "" + myItem.Text + "";
            }
             
        }
    }

--> pour le menu de niveau 2
    protected void SubMenu_PreRender(object sender, EventArgs e)
    {
        foreach (MenuItem myItem in SubMenu.Items)
        {
            if ((myItem.NavigateUrl) == (Request.Path))
            {
                myItem.Text = "" + myItem.Text + "";
                if (myItem.Parent != null) //ne rentre jamais dedans !
                {
                    myItem.Parent.Text = "" + myItem.Parent.Text + "";
                }
            }
            
        }
    }

ggtry · Answer

Bonjour,

Je crois que je viens de comprendre que je n'avais pas compris ce que tu voulais faire... (mea culpa, je viens de regarder les liens que tu avais donné).
Je pensais que tu avais un seul menu avec une partie statique et une partie dynamique. En fait, tu as deux menus distincts, c'est bien ça ?
Si c'est cela, oublie ce qui a été dit jusqu'ici : avec deux menus qui n'ont qu'un seul niveau, tu n'auras ni enfant ni parent pour l'un et l'autre.
En fait, je ne vois pas trop comment tu fais pour lier ton menu2 à ton menu1 (tu fais ça dans une masterpage ?)
Mais si tu es capable de définir quel sous-menu doit être affiché dans ton menu2, tu dois savoir de quoi il dépend dans ton menu1 : donc, il suffit de mettre l'item en question du Menu1 à Menu1.Items(x).Selected, non ?

GGtry

cs_ordiminnie · Answer

Et bien même sans comprendre, tu m'as guidé sur une bonne voie, maintenant que tu vois bien ce que je veux faire, ça va être un jeu d'enfant ! :-)

En fait pour lier mes deux menus, c facile, j'ai un seul sitemap. Mais j'ai un sitemapdatasource par menu, et je dis à l'un : tu ouvres le niveau 1 et à l'autre : tu ouvres le niveau 2. Le reste est géré par asp.net, quand j'ouvre un item du menu 1 qui a des enfants, le menu 2 les affiche.
Le tout est dans la masterpage.

Donc, si je comprends bien, j'ai deux menus mais j'ai quand même les relations parents-enfants.
Un collègue me dit que c'est sûrement que le sitemap n'est pas accessible côté client...mais il sait pas m'en dire plus...Est-ce que tu connais une classe qui me permette d'accéder au sitemap ou d'envoyer son contenu côté client ?

merci !

cs_ordiminnie · Answer

Edit : je ne peux pas mettre la propriété selected sur un item parent, quand un de ses enfants est selected aussi car il ne peut y avoir qu'un item selected par sitemap. C'est pour ça que ton idée d'injecter directement le style, c'est pas mal. (même si ça fait un peu bidouille)

D'après toi, 1 sitemap et plusieurs menu = j'ai quand meme des relations parent/enfant, non ? Les relations dépendent elles du sitemap ou du composant qui les affiche ?

ggtry · Answer

Non les relations dépendent du composant menu, pas du sitemap : c'est pourquoi tu n'as pas de parent ni d'enfant, puisque tu n'as qu'un seul niveau dans chaque menu.
Mais justement, si tu as deux menus distincts, tu peux avoir un élément selected dans chacun d'eux. 
Donc si tu sais à quelle "catégorie" du menu principal appartient l'élément sélectionné dans le sous-menu, tu peux mettre la "catégorie" du  menu principal à selected aussi.
Tu n'as plus besoin dans ce cas d'injecter de l'html.

GGtry

ggtry · Answer

Pour ton problème : n'oublie pas que tu as deux menus distincts et non pas un seul menu (c'est dans le même menu que doit se comprendre ici la distinction static/dynamique).
La partie statique d'un menu est celle qui est toujours affichée, la partie dynamique est la partie du même menu, qui est seulement affichée quand on passe la souris sur les noeuds parents. En fait, dans n'importe quel menu asp, il y a nécessairement une partie statique, mais pas nécessairement de partie dynamique.
Donc en fait, ton premier menu est statique et ton second menu est également statique (il n'a pas de partie dynamique au sens du dynamic du menu asp), même s'il est rempli en effet dynamiquement d'après la sélection dans le menu principal.
Donc, tu dois en principe pouvoir utiliser le staticselectedstyle (et non pas dynamicselectedstyle) pour modifier le style de l'élément sélectionné de ton second menu, et utiliser selected.

GGtry

cs_ordiminnie · Answer

merci pour ces explications, c'est en effet très logique ce que tu racontes ! Je m'étais en effet trompé entre static et dynamic : la confusion est facile du fait de 2 menus...

Merci beaucoup et bon week end (je fais court....ma boite ferme !)
Bye

Configuration du control menu (a:active ou itemSelected)

14 réponses

Votre réponse

Discussions similaires