ASP.NET: mettez en Surbrillance l'élément de menu de la page en cours

J'ai essayé de trouver un moyen facile de mettre en évidence le menu actuellement sélectionné élément d'un asp.net menu (de sorte que l'utilisateur connaît la page), mais peu importe ce que j'ai essayé je ne peux pas le faire fonctionner. Dans mon balisage j'ai:

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" StaticSelectedStyle-ForeColor="#99CCFF" DynamicSelectedStyle-ForeColor="#99CCFF">
    <Items>
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Operations"/>
        <asp:MenuItem NavigateUrl="~/Analysis.aspx" Text="Analysis"/>
        <asp:MenuItem NavigateUrl="~/Dashboard.aspx" Text="Dashboard"/>
        <asp:MenuItem NavigateUrl="~/Flashboard.aspx" Text="Flashboard"/>
        <asp:MenuItem NavigateUrl="~/Spacequest.aspx" Text="SQ OBP"/>
    </Items>
</asp:Menu>

Et dans le côté serveur Page_Load de la fonction:

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

Mais cela ne fonctionne pas. J'ai essayé d'utiliser un sitemap (même si un sitemap n'est pas ce que je veux utiliser) et cela n'a pas fonctionné non plus. Des idées?

OriginalL'auteur Jon Martin | 2011-08-15

asp.net

18

Il y a un StaticSelectedStyle de la propriété que vous pouvez utiliser à l'intérieur de votre menu.
```
<asp:menu [...]>
        <staticselectedstyle backcolor="LightBlue"
          borderstyle="Solid"
          bordercolor="Black"
          borderwidth="1"/>

        [...]
</asp:menu>
```
Voir ici pour plus d'info.

Aussi, si il ya une classe appliqué à l'élément sélectionné (dont je ne suis pas sûr si il y est mais il serait à portée de main), vous pouvez il suffit de brancher dans votre CSS. Ce serait beaucoup plus agréable que d'utiliser le StaticSelectedStyle propriété.

Mise à JOUR

Il est intéressant de noter également que l'utilisation de IncludeStyleBlock="false" vais arrêter votre menu de générer le CSS nécessaire pour le contrôle de l'élément sélectionné.

Avec le style de bloc hors tension, vous devez fournir vos propres styles et de l'auto-générés styles du menu ne sera pas utilisé.

À partir de MSDN:

Si vous définissez cette propriété sur false, vous ne pouvez pas définir des propriétés de style.
Par exemple, vous ne pouvez pas ajouter un DynamicHoverStyle-ForeColor attribut dans
balisage ou de définir la DynamicHoverStyle.Propriété ForeColor dans le code.

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

Je suis déjà en utilisant la propriété (voir mes marques dans le menu tag). Il ne semble pas fonctionner.Je suis à une perte.
Avez-vous tred de la façon que je suis sugesting ici? C'est légèrement différent de la façon dont vous l'avez fait de manière intégrée sur le menu de la balise.
Je vais lui donner un aller.
Cela ne semble pas fonctionner non plus. Suis-je manqué quelque chose?
Voir ma mise à jour également. Vous avez IncludeStyleBlock="false" qui sera le menu de génération de l'nécessaires blocs CSS de l'élément sélectionné .

OriginalL'auteur Jamie Dixon
7

Je pense que vous aurez à effectuer une boucle sur les éléments du menu et voir si le courant URL de la page contenant le NavigateUrl de l'élément de menu.
```
foreach (MenuItem item in mn.Items)
{
   if (Request.Url.AbsoluteUri.ToLower().Contains(Page.ResolveUrl(item.NavigateUrl.ToLower()))
   {
      item.Selected = true;
   }
}
```
J'ai ~/ en face de mes pages, donc j'ai modifié, mais cela a fonctionné pour moi quand les d'autres n'ont pas: Demande.Url.AbsoluteUri.ToLower().Contient Du(De La Page.ResolveUrl(item.NavigateUrl.ToLower()))
Heureux de l'entendre à l'homme. J'aime bien ton exemple de code, car il fonctionne dans tous les scénarios. Je vais mettre à jour ma réponse, et d'apprécier la suggestion.

OriginalL'auteur James Johnson
3

Je voudrais utiliser jQuery dans cette instance.

Pour la page indiquée, ainsi, par exemple, sur l'Analyse.page aspx, ajouter ce peu de jquery pour votre page.
```
$('#MenuItemID').addClass('active');
```
Pouvez-vous préciser l'ID des éléments de menu?

Tels que:
```
<asp:MenuItem ID="AnalysisMenuItem" NavigateUrl="~/Analysis.aspx" Text="Analysis"/>
```
Vous pouvez alors utiliser ceci:
```
$('#' + <% AnalysisMenuItem.ClientID %>').addClass('active');
```
puis, bien sûr, il suffit de définir ce que active est dans votre css:
```
.active { background-color: #FFF; }
```
J'ai essayé, mais l'ID de propriété dans asp:MenuItem n'existe pas

OriginalL'auteur Jack Marchetti

Si vous envisagez de le faire de façon dynamique, alors c'est la meilleure façon:

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 = "<div style='color: Yellow'>" + e.Item.Text + " </div>";
            e.Item.Selected = true;
        }
    }

ajouter ensuite il suffit d'ajouter .MySelectedClass style à votre fichier Css
..

OriginalL'auteur Adel

//Master
    <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" 
            EnableViewState="False" Orientation="Horizontal"
            BackColor="#465C71" DynamicHorizontalOffset="2"      
            ForeColor="#DDE4EC">
          <StaticMenuItemStyle HorizontalPadding="15px" VerticalPadding="2px" />
          <StaticSelectedStyle BackColor="#FFFFFF" ForeColor="#000000"/>
        <Items>
            <asp:MenuItem NavigateUrl="~/Secure/About.aspx" Text="About"/>
            <asp:MenuItem  NavigateUrl="~/Secure/Login.aspx"  Text="Login"/>
        </Items>
    </asp:Menu>


//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() contient "~". Donc, trouver des sous-chaîne et vérifier.

OriginalL'auteur D Kavitha Vijay Datchnamoorthy

Vous devez vous connecter pour publier un commentaire.