Почему "выбранные" классы не устанавливаются для управления меню ASP?

Question

Я - веб-разработчик, работающий с, казалось бы, несовместимым разработчиком.NET, который, похоже, не может решить, почему элемент управления ASP Menu не отображает выбранный пункт меню. Разработчик.NET прислал мне следующий код. Есть ли здесь какие-то правила, которые необходимо включить CSS?

заранее спасибо

Конфигурация контроллера

 <asp:Menu ID="mnuMaster" 
                          runat="server" 
                          DataSourceID="sitemapMaster" 
                          StaticDisplayLevels="1" 
                          MaximumDynamicDisplayLevels="0" 
                          Orientation="Horizontal" 
                          StaticEnableDefaultPopOutImage="False" 
                          CssSelectorClass="TopMainMenu" onmenuitemdatabound="mnuMaster_MenuItemDataBound"
                          StaticBottomSeparatorImageUrl="~/App_Themes/PCTools/Images/top_menu_separator.gif"
                          ></asp:Menu>

CSS выбранные классы

    .TopMainMenu .AspNet-Menu li a:active, .TopMainMenu li.AspNet-Menu-Selected a,.TopMainMenu li.AspNet-Menu-ChildSelected a,.TopMainMenu li.AspNet-Menu-ParentSelected a {
    background:url(Images/navbg.gif) repeat-x 0 -86px;
}

Answer 1

Кажется, есть ошибка в VS201 / .Net4, когда имена классов CSS, которые вы указываете в свойствах de asp.menu StaticSelectedStyle & DynamicSelectedStyle, игнорируются. В меню всегда используется имя класса "выбрано".

Answer 2

Обычно мы используем стандартную группу UL в обычном HTML, которую предоставляет дизайнер, а затем превращаем их в теги HTML-сервера.

Могут быть и другие решения, но мы обычно делаем следующее.

Сначала каждому пункту меню верхнего уровня нужен идентификатор.

Если меню на главной странице (я собираюсь предположить, что это)

в коде главной страницы вы можете разместить код, подобный этому.

//Discover currently navigated page TYPE
if (this.Page is `pagetype of the current page`)
    //add a CSS class to the top level menu item
    miFirstMenuItem.Attributes["class"] += " highlightedMenuItemCSSClass";

Затем HTML-вывод добавит дополнительный класс CSS к тому пункту меню, к которому вы примените свой конкретный стиль.

Вот реальный пример узла, вам нужно изменить тип в методе SetActiveTab на правильный тип для MenuItem

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            bool homeVisited        = Page is Default;
            bool productsVisited    = Page is Products_List;
            bool demoVisited        = Page is Demonstrations;
            bool contactVisited     = Page is Contact;

            if (homeVisited)
                SetActivePage(hlHome, ButtonSide.Left);
            if (productsVisited)
                SetActivePage(hlProducts, ButtonSide.Middle);
            if (demoVisited)
                SetActivePage(hlDemo, ButtonSide.Middle);
            if (contactVisited)
                SetActivePage(hlContact, ButtonSide.Right);

        }
    }

Это показывает другой способ, чем я описал выше, но вы можете заменить его на link.Attributes["class"] += " cssClass"; Обратите внимание на пробел после первого ".

Также ButtonSide - это перечисление, которое я добавил, поскольку все средние элементы меню будут иметь одинаковый класс CSS в моем конкретном случае, а также левый и правый.

    private void SetActivePage(HyperLink link, ButtonSide side)
    {
        if (side == ButtonSide.Left)
            link.CssClass = "currentleft";
        if (side == ButtonSide.Middle)
            link.CssClass = "currentmiddle";
        if (side == ButtonSide.Right)
            link.CssClass = "currentright";
    }