ASP.NET: выделить пункт меню текущей страницы

Я пытался найти простой способ выделить текущий выбранный пункт меню 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;

Но это не работает. Я попытался использовать карту сайта (хотя карта сайта не то, что я хочу использовать), и это тоже не сработало. Любые идеи?

Ответ 1

Здесь есть свойство StaticSelectedStyle, которое вы можете использовать в своем меню.

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

        [...]
</asp:menu>

Подробнее см. .

Кроме того, если к выбранному элементу применяется класс (который я не уверен, есть ли это, но это было бы удобно), вы можете просто подключиться к этому с помощью своего CSS. Это было бы намного лучше, чем использование свойства StaticSelectedStyle.

UPDATE

Стоит также отметить, что ваше использование IncludeStyleBlock="false" остановит ваше меню от создания CSS, необходимого для управления выбранным элементом.

Когда блок стиля отключен, вы должны предоставить свои собственные стили, и автоматически созданные стили меню не будут использоваться.

Из MSDN:

Если вы установите для этого свойства значение false, вы не можете установить свойства стиля. Например, вы не можете добавить атрибут DynamicHoverStyle-ForeColor в разметки или установить свойство DynamicHoverStyle.ForeColor в коде.

Источник: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.menu.includestyleblock.aspx

Ответ 2

Я думаю, вам придется перебирать элементы меню и посмотреть, содержит ли URL текущей страницы NavigateUrl элемента меню.

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

Ответ 3

Я бы использовал jQuery в этом экземпляре.

Для указанной страницы, например, на странице Analysis.aspx, добавьте этот бит jquery на свою страницу.

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

Можете ли вы указать идентификатор пунктов меню?

Например:

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

Затем вы использовали бы это:

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

то, конечно, просто определите, что active в вашем css:

.active { background-color: #FFF; }

Ответ 4

Если вы думаете сделать это динамически, то это лучший способ:

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

Ответ 5

//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() содержит "~". Итак, найдите подстроку и проверьте.