asp.net ajout de la classe de courant menuItem

Vous n'aurez pas besoin de suivre la page à l'aide de variables de session, comme lorsque vous sélectionnez un élément de menu, asp.net veuillez pistes de l'élément que vous avez sélectionné et génère sa propre classe CSS pour vous (dans la plupart des cas). Pour obtenir un meilleur visuel télécharger firebug pour Firefox et de regarder le code HTML de sortie, vous allez voir qu'ils vont avoir des styles CSS attaché comme "asp-net.menu selectedItem" par exemple, vous créez une .selectedItem{} classe CSS, et puis il va ramasser le style automatiquement.

Cependant, Si je me souviens, il peut être un peu délicate style contrôles Microsoft, comme si vous consultez le code source de la sortie, ce n'est pas exactement HTML sympathique.

Si vous voulez le style de l'élément de Menu à l'aide de l'approche de Microsoft, rendez-vous ici http://msdn.microsoft.com/en-us/library/ms366731.aspx

Cependant il y a une bibliothèque appelée CSSfriendly http://cssfriendly.codeplex.com/ qui rend le contrôle en pur HTML, qui permet de relier les classes CSS beaucoup plus facilement. Par exemple:

.CssAdapterMenu ul.AspNet-Menu /* Tier 1 */
{
    width: 961px !important;
    cursor:pointer;
    background-color:#000000;
}

.CssAdapterMenu ul.AspNet-Menu ul /* Tier 2 */
{
    left: 0;
    background-color:#f8f8f8;
    width: 145% !important;
    max-width: 160px !important;
}

.CssAdapterMenu ul.AspNet-Menu ul li:hover /* Tier 2 cell */
{
    background: #636363 url(../images/menu_bg_hover.png) no-repeat !important;
}

.CssAdapterMenu ul.AspNet-Menu ul .AspNet-Menu-Selected{
    background: transparent url(../images/menu_bg_hover.png) no-repeat !important;
}

.CssAdapterMenu li.AspNet-Menu-WithChildren li  .AspNet-Menu-ChildSelected {
    background: transparent url(../images/menu_bg_hover.png) no-repeat !important;
}

Et ainsi de suite et ainsi de suite. Theres une bonne documentation pour cela, et sa ma méthode de prédilection pour le style.

Modifié votre code avec mes explications ci-dessous.

<asp:Menu ID="mainMenu" runat="server" autopostback="true">
<Items>
<asp:MenuItem Text="Home" Value="Home" ></asp:MenuItem>
<asp:MenuItem Text="Pipes" Value="Pipes"></asp:MenuItem>
<asp:MenuItem Text="View &amp; Query" Value="View &amp; Query</asp:MenuItem>
<asp:MenuItem Text="API" Value="API"></asp:MenuItem>
</Items>
<StaticMenuItemStyle CssClass="menuItem" />
<StaticSelectedStyle CssClass="selectedItem" />
<StaticHoverStyle CssClass="hoverItem" />
</asp:Menu>

Puis dans votre CSS:

.normal{ 
background-color:#eaeaea; 
} 

.selected { 
background-color:#000000; 
}

.hover{
background-color:#FF0000; 
}

OriginalL'auteur tutts

Je ne sais pas à propos des méthodes côté serveur. J'ai l'habitude de recourir à un client à côté de la méthode à l'aide de jQuery. Pour cela vous devez donner à votre menu un CssClass. Par exemple, CssClass="mymenu"

À l'intérieur de votre Page Maître de la balise head, faire.

$(document).ready(function() {
    //not bothering about query strings and hash right now.
    var url = window.location.href.toString().split("/").pop();
    $(".mymenu a[href*='" + url + "']")
        .closest("li")
        .addClass("selected-item");
});

Avertissement: je ne connais pas une solution pour cette anodin exigence sur le Côté Serveur. C'est ce que j'utilise. Oh! et ce code fonctionne pour ASP.NET 4.0. Avant que le rendu a été fait à l'aide de table. vous pourriez alors vouloir changer le plus proche de .closest("td")

OriginalL'auteur naveen