ASP.NET: 当前页面高亮显示菜单项

Question

ASP.NET: 当前页面高亮显示菜单项

17

我一直在尝试找到一种简单的方法来突出显示 ASP.NET 菜单中当前选定的菜单项（以便用户知道他们所在的页面），但是无论我尝试什么，都无法使其正常工作。在我的标记中，我有：

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

在服务器端的 Page_Load 函数中：

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

但是这并不起作用。我尝试使用网站地图（尽管网站地图不是我想使用的），但那也没有起作用。有什么建议吗？

- Jon Martin

5个回答

8

我认为您需要遍历菜单项，并查看当前页面URL是否包含菜单项的NavigateUrl。

foreach (MenuItem item in mn.Items)
{
   if (Request.Url.AbsoluteUri.ToLower().Contains(Page.ResolveUrl(item.NavigateUrl.ToLower()))
   {
      item.Selected = true;
   }
}

- James Johnson

1

我的页面前面有~/，所以我进行了调整，但是这个方法在其他情况下不起作用：Request.Url.AbsoluteUri.ToLower().Contains(Page.ResolveUrl(item.NavigateUrl.ToLower()))。 - Peter

1

很高兴听到这个消息。我喜欢你的代码示例，因为它适用于所有情况。我将更新我的答案，并感谢你的建议。 - James Johnson

3

在这种情况下，我会使用jQuery。

对于指定的页面，例如Analysis.aspx页面，请将以下jQuery代码添加到您的页面中。

$('#MenuItemID').addClass('active');

您可以指定菜单项的ID吗？

比如：

<asp:MenuItem ID="AnalysisMenuItem" NavigateUrl="~/Analysis.aspx" Text="Analysis"/>

您可以使用以下内容：

然后您将使用此内容：

$('#' + <% AnalysisMenuItem.ClientID %>').addClass('active');

当然，你需要在你的CSS中定义active是什么：

.active { background-color: #FFF; }

- Jack Marchetti

我尝试过了，但是 asp:MenuItem 中的属性 ID 不存在。 - David Miró

0

//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()包含“~”。因此，找到子字符串并检查。

- D Kavitha Vijay Datchnamoorthy

0

如果您想要使其动态化，那么这是更好的方法：

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

然后只需将.MySelectedClass样式添加到您的Css文件中即可。

- Adel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jamie Dixon · Accepted Answer

你可以在菜单内部使用 StaticSelectedStyle 属性。

<asp:menu [...]>
        <staticselectedstyle backcolor="LightBlue"
          borderstyle="Solid"
          bordercolor="Black"
          borderwidth="1"/>

        [...]
</asp:menu>

点击此处了解更多信息。

此外，如果选定的项目应用了一个类（我不确定是否有这样的类，但这会很方便），您可以使用CSS直接连接到该类。这将比使用StaticSelectedStyle属性更好。

更新

还值得注意的是，您使用IncludeStyleBlock="false"将阻止菜单生成控制选定项目所需的CSS。

关闭样式代码块后，您必须提供自己的样式，而菜单的自动生成样式将不会被使用。

来自MSDN：

如果将此属性设置为false，则无法设置样式属性。例如，您不能在标记中添加DynamicHoverStyle-ForeColor属性或在代码中设置DynamicHoverStyle.ForeColor属性。

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