代码之家 › 专栏 › 技术社区 › balexandre

将所选类添加到列表的最佳技术

asp.net-mvc-2 c#

0

balexandre · 技术社区 · 15 年前

如果在 Site.Master 我们有类似的文件

<div id="menu-container">
    <ul id="menu">
        <li>
            <%: Html.ActionLink("Frontpage", "Index", "Home")%></li>
        <li>
            <%: Html.ActionLink("Content", "Index", "Content")%></li>
        <li>
            <%: Html.ActionLink("Winners", "Index", "Winners")%></li>
        <li>
            <%: Html.ActionLink("Users", "Index", "Users")%></li>
        <li>
            <%: Html.ActionLink("Statistics", "Index", "Statistics")%></li>
        <li>
            <%: Html.ActionLink("Help", "Help", "Home")%></li>
    </ul>
    <ul id="publish">
        <li>
            <%: Html.ActionLink("Preview", "Index", "Preview")%></li>
    </ul>
</div>

我们希望,在每个内容页设置正确 class="selected" <li> 最好的办法是什么?

目前我正在使用:

<% string url = Page.Request.Url.AbsoluteUri.ToString(); %>
<ul id="menu">
    <li <% if (url.Contains("/Home")) { Response.Write("class='selected'"); } %>>
        <%: Html.ActionLink("Frontpage", "Index", "Home")%></li>
    <li <% if (url.Contains("/Content")) { Response.Write("class='selected'"); } %>>
        <%: Html.ActionLink("Content", "Index", "Content")%></li>
    <li <% if (url.Contains("/Winners")) { Response.Write("class='selected'"); } %>>
        <%: Html.ActionLink("Winners", "Index", "Winners")%></li>
    <li <% if (url.Contains("/Users")) { Response.Write("class='selected'"); } %>>
        <%: Html.ActionLink("Users", "Index", "Users")%></li>
    <li <% if (url.Contains("/Statistics")) { Response.Write("class='selected'"); } %>>
        <%: Html.ActionLink("Statistics", "Index", "Statistics")%></li>
    <li <% if (url.Contains("/Home/Help")) { Response.Write("class='selected'"); } %>>
        <%: Html.ActionLink("Help", "Help", "Home")%></li>
</ul>

但我不认为这是最好的办法。

2 回复 | 直到 15 年前

1

Jacob 15 年前

我发现实现目标的最简单的方法是在页面主体中添加一个类,通过母版页中的代码标识哪个页面是当前页面。然后,在CSS中,可以执行以下操作:

#menu li { /* Styles for unselected menu items */ }

body.home #menu li.home,
body.content #menu li.content,
body.winners #menu li.winners
{
    /* Styles for selected menu items */
}

这样,您还可以轻松地添加与您正在查看的页面相关的其他显示逻辑。

编辑:

<% var convertedUrl = Request.Url.ToString().ToLower().Replace('/', '-'); %>
<body class="<%= convertedUrl %>">
  <!-- Rest of page -->
</body>

如果你在URL“about/company”上,这将把类“about company”放在你的正文中

2

0

David Mårtensson 15 年前

你可以把所有的字符串放入一个列表对象(匿名或类型化)并循环。

那么您只需要一个LI代码块,但是对于这么小的列表,它可能会太多。

另一个解决方案是使用jQuery客户端来设置它。向每个LI添加与要匹配的值相对应的id或类,然后添加客户端脚本位置.url或者,如果不适用,则使用已存储要匹配的url的隐藏字段。