为什么“选定的”不被选中？没有为 ASP 菜单控件设置类？

发布于 2024-11-07 12:27:01 字数 1095 浏览 0 评论 0原文

我是一名前端开发人员，与一位看似无能的 .NET 开发人员一起工作，该开发人员似乎无法解决 ASP 菜单控件未显示所选菜单项的原因。 .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;
}

原文

I'm a frontend developer working with a seemingly incompetant .NET dev that cant seem to resolve why the ASP Menu control is not showing the selected menu item. The .NET developer sent me the following code. Is there some rules missing here that are need to enable the CSS?

Thanks in advance

Controller config

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

违心° 2024-11-14 12:27:01

我们通常在普通HTML中使用设计者提供的标准UL组，然后将它们制作成HTML服务器标签。

可能还有其他解决方案，但我们通常采用的解决方案是这样的。

首先，每个顶级菜单项都需要一个 ID。

如果菜单位于母版页上（我假设它是），

则在母版页代码后面，您可以放置这样的代码。

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

We normally use a standard UL group in ordinary HTML that a designer provides and then make them into HTML Server Tags.

There may be other solutions but the solution we usually do is this.

First each top level menu item needs an ID.

If the menu is on a masterpage (im going to assume it is)

in the masterpage code behind you can place code like this.

//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";

Then the HTML Output would append an additional CSS class to that menu item which you apply your specific style

Heres a real life example
Node you would have to change the type in the SetActiveTab method to the correct type for the 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);

        }
    }

This shows a different way than I described above but you can replace it with link.Attributes["class"] += " cssClass"; Notice the space after the first ".

Also ButtonSide is an enum I added since all the middle menuitems would have the same CSS class in my particular case and left and right ones as well.

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

回复收藏 0 原文