ASP.NET 如何给当前菜单项添加类？

Question

ASP.NET 如何给当前菜单项添加类？

3

我很新于asp.net，所以我会感激您提供一份完整的代码答案。

我有一个使用asp.net和c#的网站，在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)"页面时，右侧的菜单项应该有不同的背景颜色。

我可以使用会话变量，但是我不确定如何操作。

请问是否有人能够为我提供一个完整的示例呢？

先行感谢！

- Tovi Klein-Berzon

菜单项中是否有navigationUrl？ - Govind Malviya

你对jQuery感到舒适吗？ - naveen

AutoPostBack=true"在这里的相关性是什么？ - naveen

@naveen，我非常擅长于jQuery，但我不知道为什么这里要设置AutoPostBack=true。 - Tovi Klein-Berzon

4个回答

0

你可以使用

。

<DynamicSelectedStyle BackColor="#1C5E55" />

并且

<StaticSelectedStyle BackColor="#1C5E55" />

除此之外，通常您需要为您的MenuItem设置NavigateUrl属性。因此，整个代码看起来会像这样：

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

- Kirill

我不太明白，右侧的项目是如何获得选定样式的？ - Tovi Klein-Berzon

0

我不知道任何服务器端的方法。我通常使用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")

- naveen

0

我曾经遇到过类似的问题，无法为每个单独的MenuItem设置样式。通过参考以下文章...

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

希望这对某人有所帮助。:-)

- codemonkey

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

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

- tutts · Accepted Answer

您不需要使用会话变量来跟踪页面，因为当您选择菜单项时，asp.net会自动跟踪您选择的项并为其生成自己的CSS类（在大多数情况下）。要获得更好的视觉效果，请下载Firefox的Firebug并查看HTML输出，您会发现它们会附加CSS样式，例如“asp-net.menu selectedItem”，然后您可以创建一个.selectedItem {} CSS类，然后它将自动拾取样式。

但是如果我回想起来，微软控件的样式可能有点棘手，因为如果您从输出中检查源代码，它并不完全符合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; 
}