ASP.NET MenuItem单个样式

Question

我希望使用ASP.NET菜单控件来浏览我的网站.但是,我要求每个MenuItem必须设置不同的样式(不同的颜色,静态和onHover).如果不创建从MenuItem继承的自定义类,这可能吗？

关于更好解决方案的想法？

Answer 1

如果有人碰到同样的问题......

一个对我有用的快速而肮脏的方法是将HTML内容强制进入MenuItem Text(通过适当的转义).然后,您可以在CSS中以任何方式设置样式,甚至可以将每个菜单项设置为使用不同的样式:

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

HTML最终在<a>标记内:

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

Answer 2

如果没有在菜单上覆盖RenderContents,那么您的选项非常有限.您需要的大部分都是私密且密封的,您将无法到达任何地方.

我的解决方案是使用模板.您可以使用MenuItem.Value或Depth和ItemIndex来标识每个项目并提供必要的属性.

在页面中:

<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>

在Code中(从不介意此代码的愚蠢,它只是为了演示原理):

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;
        }
}