C# asp.net将类添加到当前菜单项

我是新的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>

我现在需要补充的是，当用户位于特定页面（例如管道）上时，右菜单项应具有不同的背景色

我可以使用会话变量，但不知道如何使用

有谁能给我写一个完整的例子吗

---

提前感谢

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

然而，如果我回忆起来，它可能是一个有点微妙的风格微软控件，如果你检查了输出的源代码，它不完全是HTML友好

如果要使用Microsoft方法设置菜单项的样式，请转到此处

但是，有一个名为CSSfriendly的库，它以纯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>

你可以用

<DynamicSelectedStyle BackColor="#1C5E55" />

---

我不知道任何服务器端方法。我通常求助于使用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。在此之前，渲染是使用

表

完成的。然后，您可能希望将最近的菜单更改为

。最近的（“td”）

我遇到了一个类似的问题，无法对每个菜单项进行样式化。使用此帖子

…您可以使用如下代码：

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

---

希望这对某人有帮助。：-）

在MenuItem中有navigationurl吗？你对jquery满意吗？这里的

AutoPostBack=true“

有什么关联？@naveen，我对jquery很满意，而且我不知道为什么AutoPostBack=true在这里。谢谢你，我有firebug，我知道如果我更改一个要选择的项目，（在编辑菜单项中），然后我选择了类。这很好。但是现在它如何动态地将正确的类添加到正确的项中呢？我可能缺少一些东西，您能否更清楚地解释一下它是如何完成的。当您创建asp页面时，您在这个样式表中定义了一个全局样式表（style.css），您有多个类。body{}.h1{}.p{}依此类推。您需要创建一个与asp控件中定义的类相对应的类。通常您必须这样定义asp控件：然后在css文件中添加#mainMenuCss{background color:#eaeaea；}，然后为子节点mainMenuCss。选中项{background color:#000000；}或者使用ASP控件定义：并添加css样式：。普通{背景色：#eaeaea；}。选中{背景色：#000000；}感谢您的接受。您可能想喝杯咖啡，花一个小时出去阅读html+CSS和asp.net控件样式。它们是如何呈现的，以及样式是如何应用的。对正在发生的事情有一个很好的了解将有助于您快速有效地开发您的站点：）我没有得到什么，正确的项目如何获得选定的样式伊尔？？

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

$(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");
});

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

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