asp.net добавление класса в текущий menuItem

Question

Я новичок в asp.net, поэтому буду признателен за полный код ответа.

У меня есть веб-сайт в asp.net, и я добавил на страницу site.master меню, которое выглядит примерно так:

<asp:Menu ID="mainMenu" runat="server" autopostback="true">
            <Items>
                <asp:MenuItem Text="Home" Value="Home" ></asp:MenuItem>
                <asp:MenuItem Text="Pipes" Value="Pipes"></asp:MenuItem>
                <asp:MenuItem Text="View &amp; Query" Value="View &amp; Query"></asp:MenuItem>
                <asp:MenuItem Text="API" Value="API"></asp:MenuItem>
            </Items>
        </asp:Menu>

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

Я могу использовать переменную сеанса, но я не уверен, как это сделать.

Может ли кто-нибудь написать мне полный пример этого?

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

Answer 1

Вам не нужно отслеживать страницу, используя переменные сеанса, так как при выборе элемента меню asp.net любезно отслеживает выбранный элемент и генерирует для вас собственный класс CSS (в большинстве случаев).Чтобы улучшить визуальную загрузку Firebug для Firefox и посмотреть вывод HTML, вы увидите, что к ним будут прикреплены стили CSS, такие как, например, «asp-net.menu selectedItem», затем вы создадите класс CSS .selectedItem {}, а затем он подберет стиль автоматически.

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

Если вы хотите стилизовать элемент меню с использованием подхода Microsoft, перейдите сюда http://msdn.microsoft.com/en-us/library/ms366731.aspx

Однако есть библиотека CSSfriendly http://cssfriendly.codeplex.com/, которая отображает элемент управления в чистом HTML, что позволяет гораздо проще присоединять CSS-классы.Например:

.CssAdapterMenu ul.AspNet-Menu /* Tier 1 */
{
    width: 961px !important;
    cursor:pointer;
    background-color:#000000;
}

.CssAdapterMenu ul.AspNet-Menu ul /* Tier 2 */
{
    left: 0;
    background-color:#f8f8f8;
    width: 145% !important;
    max-width: 160px !important;
}

.CssAdapterMenu ul.AspNet-Menu ul li:hover /* Tier 2 cell */
{
    background: #636363 url(../images/menu_bg_hover.png) no-repeat !important;
}

.CssAdapterMenu ul.AspNet-Menu ul .AspNet-Menu-Selected{
    background: transparent url(../images/menu_bg_hover.png) no-repeat !important;
}

.CssAdapterMenu li.AspNet-Menu-WithChildren li  .AspNet-Menu-ChildSelected {
    background: transparent url(../images/menu_bg_hover.png) no-repeat !important;
}

И так далее, и тому подобное.Для этого есть хорошая документация и мой предпочтительный метод для стилизации.

Поправил ваш код, используя мои пояснения ниже.

<asp:Menu ID="mainMenu" runat="server" autopostback="true">
<Items>
<asp:MenuItem Text="Home" Value="Home" ></asp:MenuItem>
<asp:MenuItem Text="Pipes" Value="Pipes"></asp:MenuItem>
<asp:MenuItem Text="View &amp; Query" Value="View &amp; Query</asp:MenuItem>
<asp:MenuItem Text="API" Value="API"></asp:MenuItem>
</Items>
<StaticMenuItemStyle CssClass="menuItem" />
<StaticSelectedStyle CssClass="selectedItem" />
<StaticHoverStyle CssClass="hoverItem" />
</asp:Menu>

Затем в вашем CSS:

.normal{ 
background-color:#eaeaea; 
} 

.selected { 
background-color:#000000; 
}

.hover{
background-color:#FF0000; 
}

Answer 2

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

asp: MenuItem / CSS

... вы можете использовать код, подобный следующему:

<div>
    <asp:Menu ID="mainMenu" runat="server">
        <Items>
            <asp:MenuItem NavigateUrl="~/Default.aspx" Text="HOME" />
            <asp:MenuItem NavigateUrl="~/Page1.aspx" Text="Page1" />
        </Items>
    </asp:Menu>
</div>

и CSS:

div.menu ul li a[href*="Default.aspx"]  { background-color: rgb(100, 100, 100); }
div.menu ul li a[href*="Page1.aspx"]    { background-color: rgb(150, 50, 100); }

Надеюсь, это кому-нибудь поможет. : -)

Answer 3

Я не знаю ни о каких методах на стороне сервера.Я обычно прибегаю к клиентскому методу, используя jQuery.Для этого вы должны дать вашему меню CssClass.Например, CssClass="mymenu"

Внутри заголовка вашей главной страницы сделайте это.

$(document).ready(function() {
    // not bothering about query strings and hash right now.
    var url = window.location.href.toString().split("/").pop();
    $(".mymenu a[href*='" + url + "']")
        .closest("li")
        .addClass("selected-item");
});

Отказ от ответственности : я не знаю решения для этого, казалось бы, тривиального требованияна стороне сервера.Это то, что я использовал.Ой!и этот код работает для ASP.NET 4.0.До этого рендеринг выполнялся с использованием table.Вы можете изменить ближайший к .closest("td")

Answer 4

Вы можете использовать

<DynamicSelectedStyle BackColor="#1C5E55" />

и

<StaticSelectedStyle BackColor="#1C5E55" />

Кроме того, обычно вам потребуется атрибут NavigateUrl для MenuItem.Так что все это будет выглядеть примерно так:

<asp:Menu ID="mainMenu" runat="server" autopostback="true">
            <Items>
                <asp:MenuItem Text="Home" NavigateUrl="~/Home.aspx" 
                 Value="Home" ></asp:MenuItem>
    ...
            </Items>
            <DynamicSelectedStyle BackColor="#1C5E55" />
            <StaticSelectedStyle BackColor="#1C5E55" />
        </asp:Menu>