ASP.NET: evidenziare la voce di menu della pagina corrente

Ho cercato di trovare un modo semplice per evidenziare la voce di menu selezionata corrente di un menu di asp.net (in modo che l’utente sappia su quale pagina si trova), ma indipendentemente da ciò che ho provato non riesco a farlo funzionare . Nel mio markup ho:

         

E nella funzione Page_Load lato server:

 ((Menu)Master.FindControl("NavigationMenu")).Items[0].Selected = true; 

Ma questo non funziona. Ho provato a utilizzare una Sitemap (anche se una Sitemap non è quella che voglio usare) e che non ha funzionato neanche. Qualche idea?

C’è una proprietà StaticSelectedStyle che puoi usare all’interno del tuo menu.

   [...]  

Vedi qui per maggiori informazioni .

Inoltre, se c’è una class applicata all’elemento selezionato (che non sono sicuro se c’è ma sarebbe utile) puoi semplicemente collegarlo con il tuo CSS. Questo sarebbe un modo molto più StaticSelectedStyle dell’utilizzo della proprietà StaticSelectedStyle .

AGGIORNARE

Vale anche la pena notare che l’uso di IncludeStyleBlock="false" impedirà al menu di generare il CSS necessario per controllare l’elemento selezionato.

Con il blocco di stile distriggersto, è necessario fornire i propri stili e gli stili generati automaticamente del menu non verranno utilizzati.

Da MSDN:

Se si imposta questa proprietà su false, non è ansible impostare le proprietà dello stile. Ad esempio, non è ansible aggiungere un attributo DynamicHoverStyle-ForeColor nel markup o impostare la proprietà DynamicHoverStyle.ForeColor nel codice.

Fonte: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.menu.includestyleblock.aspx

Penso che dovrai scorrere tra le voci del menu e vedere se l’URL della pagina corrente contiene NavigateUrl della voce di menu.

 foreach (MenuItem item in mn.Items) { if (Request.Url.AbsoluteUri.ToLower().Contains(Page.ResolveUrl(item.NavigateUrl.ToLower())) { item.Selected = true; } } 

Vorrei usare jQuery in questo caso.

Per la pagina specificata, ad esempio nella pagina Analysis.aspx, aggiungi questo bit di jquery alla tua pagina.

 $('#MenuItemID').addClass('active'); 

Puoi specificare l’ID delle voci del menu?

Ad esempio:

  

Dovresti quindi usare questo:

 $('#' + <% AnalysisMenuItem.ClientID %>').addClass('active'); 

quindi, naturalmente, basta definire ciò che è active nel tuo css:

 .active { background-color: #FFF; } 

Se stai pensando di farlo dynamicmente, allora questo è il modo migliore:

 Menu MyMenu = new Menu(); .... MyMenu.MenuItemDataBound += new MenuEventHandler(MyMenu_MenuItemDataBound); TheMenu.StaticSelectedStyle.CssClass ="MySelectedClass"; protected void MyMenu_MenuItemDataBound(Object sender, MenuEventArgs e) { if (e.Item.NavigateUrl.ToLower().Contains(Path.GetFileName(Request.FilePath).ToLower())) { //e.Item.Text = "
" + e.Item.Text + "
"; e.Item.Selected = true; } }

aggiungi quindi semplicemente aggiungi lo stile .MySelectedClass al tuo file Css ..

 //Master         //Master.cs foreach (MenuItem item in ((Menu)this.FindControl("NavigationMenu")).Items) { if(Request.Url.AbsoluteUri.ToLower().Contains(item.NavigateUrl.ToLower().Substring(1))) { item.Selected = true; } } 

//item.NavigateUrl.ToLower () contiene “~”. Quindi, trova sottostringa e verifica.