MenuItem selezionato

venerdì 23 novembre 2012 - 17.49

ale_fi Profilo | Newbie

Ragazzi scusate la domanda stupida ma è possibile mantenere l'evidenziazione di un menuitem dopo aver premuto al suo interno per far capire che sezione è attualmente visualizzata? Ho impostato i CSS (active, hover etc) ma niente.
Ho provato da codice al click impostando a true la proprietà selected ma niente.
Ma esiste questa possibilità?

Grazie mille.

Alessio

alx_81 Profilo | Guru

>Ragazzi scusate la domanda stupida ma è possibile mantenere l'evidenziazione
>di un menuitem dopo aver premuto al suo interno per far capire
>che sezione è attualmente visualizzata? Ho impostato i CSS (active,
>hover etc) ma niente.
>Ho provato da codice al click impostando a true la proprietà
>selected ma niente.
>Ma esiste questa possibilità?
ciao, la prima cosa che mi viene in mente è:
- apri la sorgente dell'html
- cerca l'item selezionato e vedi l'html generato per quel menuitem da asp.net
- capisci che html/classe ha (se ne ha di classi, altrimenti cerca di capire comunque che item è)
- applica uno stile basandoti sull'html ricavato
Se vuoi provare a passarci l'html potremmo provare a scriverti il css legato..

>
>Grazie mille.
di nulla!
--
Alessandro Alpi | SQL Server MVP
MCP|MCITP|MCTS|MCT

http://www.alessandroalpi.net
http://blogs.dotnethell.it/suxstellino
http://mvp.microsoft.com/profiles/Alessandro.Alpi

ale_fi Profilo | Newbie

Ok, ecco il codice.

Questo è l'oggetto nei sorgenti HTML (nella pagina MASTER) :

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false"
onmenuitemclick="NavigationMenu_MenuItemClick" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="CERCA" Selected="True" />
<asp:MenuItem Text="CONSULTAZIONE" />
<asp:MenuItem NavigateUrl="~/About.aspx" Text="I MIEI DOC" />
</Items>
</asp:Menu>

e questo è il CSS (ho messo ti proposito il colore rosso per capire come si comportava l'ACTIVE

div.menu
{
border: 0px #4e667d solid;
padding: 2px 0px 2px 4px;
width:960px;
}

div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
}

div.menu ul li a, div.menu ul li a:visited
{
background-color: white;
border: 1px #bfcbd6 solid;
color: #465c71;
display: inline-block;
text-align:center;
font-size:small;
line-height: 1.35em;
padding: 10px 20px 4px 20px;
text-decoration: none;
white-space: nowrap;
width:120px;
height:20px;
}

div.menu ul li a:active
{
background-color: red;
color: #cfdbe6;
text-decoration: none;
}

div.menu ul li a:hover
{
background-color:#465c71;
color: #bfcbd6;
text-decoration:underline;
}


Questo è come si comporta :
in explorer e firefox passo sopra il menu, tengo premuto e, senza rilasciare, mi sposto fuori dal menu. Finchè sono sopra il menu non succede nulla, appena esco rimane rosso. In ogni caso appena passo all'altra pagina il rosso non viene mantenuto.
in chrome : non succede nulla, il rosso non appare e non si mantiene.

ale_fi Profilo | Newbie

Nessuno saprebbe aiutarmi?
:(

alx_81 Profilo | Guru

>Nessuno saprebbe aiutarmi?
riesci a rispondere correttamente alle mie domande? Tu mi hai postato l'asp net.
Per cortesia, cerca di postare l'html renderizzato dalla view source del browser.
grazie

--
Alessandro Alpi | SQL Server MVP
MCP|MCITP|MCTS|MCT

http://www.alessandroalpi.net
http://blogs.dotnethell.it/suxstellino
http://mvp.microsoft.com/profiles/Alessandro.Alpi

ale_fi Profilo | Newbie

Questo è il sorgente della pagina HTML

<div class="menu" id="NavigationMenu">
<ul class="level1">
<li><a class="level1 selected" href="Default.aspx">CERCA</a></li><li><a class="level1" href="#" onclick="__doPostBack(&#39;ctl00$NavigationMenu&#39;,&#39;CONSULTAZIONE&#39;)">CONSULTAZIONE</a></li><li><a class="level1" href="About.aspx">I MIEI DOC</a></li>
</ul>

ale_fi Profilo | Newbie

Niente eh?
:((

alx_81 Profilo | Guru

>Niente eh?
Il problema sta nel fatto che tu cambi pagina e non fai niente per dire a quella pagina che quell'item deve essere selezionato.
Potresti salvare in qualche punto (sessione ad esempio) un valore, come un enum, che dice quale voce è stata clickata, per fare in modo che poi, la pagina che riceve la chiamata, si vada a prendere la voce di menu salvata, andando di fatto a cambiare stile (classe ad esempio) al tuo menu item. E puoi anche farlo direttamente lato server.
--
Alessandro Alpi | SQL Server MVP
MCP|MCITP|MCTS|MCT

http://www.alessandroalpi.net
http://blogs.dotnethell.it/suxstellino
http://mvp.microsoft.com/profiles/Alessandro.Alpi

ale_fi Profilo | Newbie

E come faccio a forzare, nella pagina che clicco, che il menuitem dovrebbe prendere lo stile che nel CSS indico come active?
Cioè, per capirsi,
menu -> voce1, voce2, voce3 (in partenza tutto bianco).
Nel CSS gestisco l'hover, active etc e gli dice che il menu selezionato è rosso
quindi, appena passo sopra "voce2" mi diventa rosso. e fin qui ok.
Al click cambio pagina: in questa pagina, da codice, come faccio a dirgli che voce2 deve prendere lo stile active?

alx_81 Profilo | Guru

>E come faccio a forzare, nella pagina che clicco, che il menuitem
>dovrebbe prendere lo stile che nel CSS indico come active?
>Al click cambio pagina: in questa pagina, da codice, come faccio
>a dirgli che voce2 deve prendere lo stile active?
La pagina sarà legata alla voce di menu no? E allora nella "load" vai a cambiare la classe dell'item.. Non riesci?

--
Alessandro Alpi | SQL Server MVP
MCP|MCITP|MCTS|MCT

http://www.alessandroalpi.net
http://blogs.dotnethell.it/suxstellino
http://mvp.microsoft.com/profiles/Alessandro.Alpi

ale_fi Profilo | Newbie

No, non riesco. O almeno io non riesco.
Il menu è nella pagina master. Nella load di una delle pagine chiamate il menu non lo vedo.
Ma anche se lo vedessi, come faccio a cambiare il menuitem? la classe è agganciata al menu non al menuitem.

alx_81 Profilo | Guru

>Il menu è nella pagina master. Nella load di una delle pagine
>chiamate il menu non lo vedo.
Potresti passare un param in querystring quando chiami e poi chiederti nella master quel param, in base al suo valore cambi la classe del menu.

>Ma anche se lo vedessi, come faccio a cambiare il menuitem? la classe è agganciata al menu non al menuitem.
eh qui devi andare in profondità nel controllo, cercando di dare un id lato server, altrimenti lo puoi fare client con javascript, leggi il querystring e poi assegni la classe
--
Alessandro Alpi | SQL Server MVP
MCP|MCITP|MCTS|MCT

http://www.alessandroalpi.net
http://blogs.dotnethell.it/suxstellino
http://mvp.microsoft.com/profiles/Alessandro.Alpi

ale_fi Profilo | Newbie

Ok, lato server ci sono arrivato al menu item, ma come faccio a cambiare la classe?
la proprietà selected non ha impatti.

alx_81 Profilo | Guru

>Ok, lato server ci sono arrivato al menu item, ma come faccio
>a cambiare la classe?
>la proprietà selected non ha impatti.
Quella non è la classe, è una proprietà lato server indipendente dalla classe.
Il tuo menu item dovrebbe avere una collection Attributes, accedi a quella e cambia il valore per l'attributo "class".
--
Alessandro Alpi | SQL Server MVP
MCP|MCITP|MCTS|MCT

http://www.alessandroalpi.net
http://blogs.dotnethell.it/suxstellino
http://mvp.microsoft.com/profiles/Alessandro.Alpi

ale_fi Profilo | Newbie

Perdona l'ottusità ma ancora non capisco

il menu lo recupero in questo modo:
Menu pp = (Menu)Master.FindControl("NavigationMenu");

pp.Items[0] è il menu item che vorrei evidenziare.
Non riesco a trovare però quello che dici.

alx_81 Profilo | Guru

>pp.Items[0] è il menu item che vorrei evidenziare.
>Non riesco a trovare però quello che dici.
riesci a passarmi un progettino di esempio? Così evito di ricrearlo da capo.. Così ti do una mano
--
Alessandro Alpi | SQL Server MVP
MCP|MCITP|MCTS|MCT

http://www.alessandroalpi.net
http://blogs.dotnethell.it/suxstellino
http://mvp.microsoft.com/profiles/Alessandro.Alpi

ale_fi Profilo | Newbie

Guarda, si fa ancora prima: presente il sito web di default che visual studio ti crea se fai una nuova applicazione asp.net? Ecco, è la base da cui son partito. Se c'è l'ha i davanti vedrai che c'è un menù che peró non mantiene la selezione.
Se fai funzionare quello hai risolto il mio problema.
Gentilissimo!!

alx_81 Profilo | Guru

>Guarda, si fa ancora prima: presente il sito web di default che
>visual studio ti crea se fai una nuova applicazione asp.net?
>Ecco, è la base da cui son partito. Se c'è l'ha i davanti vedrai
>che c'è un menù che peró non mantiene la selezione.
>Se fai funzionare quello hai risolto il mio problema.
>Gentilissimo!!
eheheh non mi ricordo nemmeno com'è asp.net
quindi creo una nuova app con Vs2010?
--
Alessandro Alpi | SQL Server MVP
MCP|MCITP|MCTS|MCT

http://www.alessandroalpi.net
http://blogs.dotnethell.it/suxstellino
http://mvp.microsoft.com/profiles/Alessandro.Alpi

ale_fi Profilo | Newbie

Esattamente. Nuovo progetto asp semplice

alexmed Profilo | Guru

Ti posto la una soluzione, un po laboriosa ma funzionante:

Imposta la proprietà del menu IncludeStyleBlock="true"
Dal file Site.css elimina la parte relativa al menu

div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}

div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}

div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}

Elimina le voci degli ItemMenu del menu nella pagina master

<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home page"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="Informazioni su"/>
</Items>

Aggiungi un file Web.sitemap e al suo interno scrivi:

Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

Torna nella pagina master ed aggiungi al menu le regole CSS, otterrai questo:

Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

Aggiungi il SiteMapDataSource1 alla pagina e sei a posto.

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />


alexmed

ale_fi Profilo | Newbie

Posso chiederti 2 cose?

A) i tag relativi al DynamicMenuStyle che servono? perchè se li tolgo funziona lo stesso.
B) vado un attimo off-topic ma non è che hai competenze anche sul CollapsiblePanelExtender? (ho aperto un post ieri sera, sono i 2 problemi che mi stanno assillando)

alx_81 Profilo | Guru

>Ti posto la una soluzione, un po laboriosa ma funzionante:
grazie mille alexmed, meglio così, perchè la mia soluzione forse è un po' priva di utilizzo di controlli MS
--
Alessandro Alpi | SQL Server MVP
MCP|MCITP|MCTS|MCT

http://www.alessandroalpi.net
http://blogs.dotnethell.it/suxstellino
http://mvp.microsoft.com/profiles/Alessandro.Alpi

alexmed Profilo | Guru

@alx_81
>grazie mille alexmed, meglio così, perchè la mia soluzione forse è un po' priva di utilizzo di controlli MS
Per ora (principiante) preferisco prendere pieno possesso dei controlli standard, in modo che in futuro sia più facile integrarli con altri linguaggi.

@ale_fi
>A) i tag relativi al DynamicMenuStyle che servono? perchè se li tolgo funziona lo stesso.
La parte relativa ai Dynamic la utilizzi se hai dei menu a tendina (sottomenu). Se non li usi puoi anche toglierli.
>B) vado un attimo off-topic ma non è che hai competenze anche sul CollapsiblePanelExtender? (ho aperto un post ieri sera, sono i 2 problemi che mi stanno assillando)
Se ho capito bene vorresti un effetto tipo apertura DropDownList, con la tendina che va a sovrapporsi a quello che hai sotto?

alexmed

ale_fi Profilo | Newbie

Perfetto, hai capito esattamente il problema.

alexmed Profilo | Guru

Penso che non si possa fare, faccio delle prove ma non ti assicuro niente.

Ciao

alexmed

ale_fi Profilo | Newbie

Faccio un'altra domanda al volo : c'è modo di mettere i bordi ai menu?
le sto provando tutte ma non funzionano : se metto
<StaticMenuStyle BorderStyle="Solid" BorderWidth="1px" BorderColor="Black" />
non ha effetto

Funziona invece se imposto le StaticSelectedStyle e StaticHoverStyle ma ovviamente hanno effetto solo quando le selezioni e quando ci passi sopra con il mouse.
Ma se volessi un semplice bordino sempre e comunque?

alexmed Profilo | Guru

>se metto
><StaticMenuStyle BorderStyle="Solid" BorderWidth="1px" BorderColor="Black"
>/>
Prova a togliere il "px" da BorderWidth


alexmed

ale_fi Profilo | Newbie

Niente.
Il codice

<StaticMenuStyle BorderStyle="Solid" BorderWidth="1" BorderColor="Black" />

fa apparire solo il bordo esterno, non fra i menu.

alexmed Profilo | Guru

Ciao, ti allego un sito fatto con VWD 2010, con le varie impostazioni che puoi ottenere.

Fammi sapere.

Ciao
alexmed

ale_fi Profilo | Newbie

Funziona tutto alla grande.
Ultimo problema (poi ti mollo davvero) : l'allineamento del testo all'interno del menu.
Ti pare possibile che se scrivo

<StaticMenuItemStyle ccClass="prova" ... />

e nel CSS scrivo

.prova
{
text-align:center;
}

mi metta il testo allineato correttamente ma mi fa scomparire i tanti agognati bordi?

alexmed Profilo | Guru

<StaticMenuStyle CssClass="prova" />

alexmed

ale_fi Profilo | Newbie

Ho accettato la risposta perchè funziona.
Ma volevo capire con te il motivo. Che differenza c'è fra impostare la classe sullo StaticMenuStyle rispetto allo StaticMenuItemStyle?
Perchè se lo metto su quest'ultimo per esempio mi perde la formattazione (nel mio caso i bordi?)
Riuscire a capire il perchè potrebbe aiutarmi a capire come interveninire, per esempio, anche sul padding : le voci di menu mi rimangono nella parte alta del menu ed il padding-top non ha effetto sullo StaticMenuItemStyle ma neppure sullo StaticMenuStyle (dove invece ha effetto il vertical-padding che però non risolve il mio problema.

Grazie ancora.

Alessio.

alexmed Profilo | Guru

Ciao
Andare ad analizzare tutte le varie proprietà è un lavoro abbastanza lungo ed oltretutto molte non te le saprei spiegare.
Per capire come si comportano puoi analizzare l'output che producono tramite "F12" se usi IE oppure Firebug se usi Firefox.
In qualsiasi caso puoi consultare la guida di MSDN: http://msdn.microsoft.com/it-it/library/system.web.ui.webcontrols.menu(v=vs.100).aspx

Ciao

alexmed
Partecipa anche tu! Registrati!
Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !
Copyright © dotNetHell.it 2002-2017
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5