Styles individuels ASP.NET MenuItem

Je suis l'espoir d'utiliser un ASP.NET Menu de Contrôle pour la navigation par le biais de mon site. Cependant, j'ai une exigence que chaque MenuItem doivent être coiffés différemment (de couleurs différentes, à la fois statique et onHover). Sans créer une classe personnalisée qui va hériter de MenuItem, est-ce possible?

Réflexions sur une meilleure solution?

source d'informationauteur CodeMonkey1313

  1. 10

    Court de l'annulation de la RenderContents sur Menu, vos options sont très limitées. La plupart de ce que vous avez besoin est privé et scellés, et vous n'obtiendrez pas n'importe où.

    Ma solution serait d'utiliser des modèles. Vous pouvez utiliser MenuItem.La valeur ou la Profondeur et la et ItemIndex pour identifier chaque élément et de fournir des attributs nécessaires.

    En Page:

    <asp:Menu ID="menu" runat="server" DynamicHorizontalOffset="2" StaticSubMenuIndent="10px">
    <Items>
        <asp:MenuItem Text="Item 1" Value="value 1">
            <asp:MenuItem Text="Item 2" Value="value 2">
                <asp:MenuItem Text="Item 3" Value="value 3"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="Item 4" Value="value 4">
                <asp:MenuItem Text="Item 5" Value="value 5"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="Item 6" Value="value 6"></asp:MenuItem>
        </asp:MenuItem>
        <asp:MenuItem Text="Item 7" Value="value 7"></asp:MenuItem>
        <asp:MenuItem Text="Item 8" Value="value 8"></asp:MenuItem>
    </Items>
    <StaticItemTemplate>
        <asp:Panel runat="server" ForeColor='<%# GetItemColor(Container) %>'>
            <%# Eval("Text") %> - <%# Eval("Value") %>
        </asp:Panel>
    </StaticItemTemplate>
    <DynamicItemTemplate>
        <asp:Panel ID="Panel1" runat="server" ForeColor='<%# GetItemColor(Container) %>'>
            <%# Eval("Text") %> - <%# Eval("Value") %>
        </asp:Panel>
    </DynamicItemTemplate>
</asp:Menu>

    Dans le Code (ne jamais oublier la bêtise de ce code, c'est juste pour illustrer le principe):

    public Color GetItemColor(MenuItemTemplateContainer container)
{
    MenuItem item = (MenuItem)container.DataItem;

    //identify based value
    if (item.Value == "value 2")
        return Color.Brown;

    //identify based on depth and index
    if (item.Depth == 0)
        switch (container.ItemIndex)
        {
            case 0: return Color.Red;
            case 1: return Color.Blue;
            case 2: return Color.DarkGreen;
            default:
                return Color.Black;
        }
    else
        switch (container.ItemIndex)
        {
            case 0: return Color.Purple;
            case 1: return Color.Aqua;
            case 2: return Color.DarkOrange;
            default:
                return Color.Black;
        }
}
  2. 12

    Si quelqu'un d'autre se heurte à la même question...

    Un rapide et sale méthode qui a fonctionné pour moi, c'est la force du contenu HTML dans le MenuItem Text (s'échapper). Vous pouvez ensuite le style de n'importe quelle manière que vous voulez dans votre CSS, ou même définir chaque élément de menu pour utiliser un style différent:

    <asp:MenuItem Text="<span class=&quot;menuitem_text&quot;>Text Here</span>" />

    Le HTML se termine à l'intérieur de la <a> tag:

    <li><a  ...><span class="menuitem_text">Text Here</span></a></li>
  3. 0

    Essayons ainsi de définir le style de chaque élément de menu:

    Code derrière: 

     mnuMail.Items[1].Text = "<span class=\"bold\">Inbox</span>";

    Classe CSS: 

    .bold
{
   font-weight: bold;
}
  4. -3

    Si vous générez le menu par programmation, vous pouvez ajouter du style et de la onmouseover/onmouseout attributs lors de la création de chaque MenuItem, par exemple:

    menuItem.Attributes["style"] = "color: red;";
menuItem.Attributes["onmouseover"] = "javascript:Highlight(this);";

    Sinon, essayez d'ajouter ces attributs dans la balise, IntelliSense ne vous dis pas qu'ils travaillent, mais ils le font habituellement (je n'ai pas testé spécifiquement avec MenuItems):

    <asp:menuitem navigateurl="Home.aspx" 
    text="Home"
    imageurl="Images\Home.gif"
    popoutimageurl="Images\Popout.jpg"   
    tooltip="Home"
    style="color: red;" onmouseover="Highlight(this);" onmouseout="Unhighlight(this);"/>

    Vous pourriez avoir de la chance avec CSS Friendly Adaptateurs.

    Bien sûr, vous pouvez créer une classe héritée et de re-travailler le rendu des routines...