更改导航 ID 以突出显示当前页面 ASP.NET 的编程解决方案

Posted

技术标签:

【中文标题】更改导航 ID 以突出显示当前页面 ASP.NET 的编程解决方案【英文标题】:Programmatic solution to change navigation id to highlight current page ASP.NET 【发布时间】:2010-09-16 07:57:20 【问题描述】:

我正在使用 Visual Studio 2008 和 ASP.NET 3.5 编写网站。我设置了一个母版页来简化布局并保留内容页面而不是内容和布局。

导航是列表,css'd,所以它看起来像一个栏。为了突出显示栏上的页面,列表项需要看起来像这样<li id="current">。如果可以避免,我不想使用<asp:ContentPlaceHolder>。是否有一些代码可以添加到我的每个页面(或仅添加到母版页?)来完成此操作,还是我坚持使用<asp:ContentPlaceHolder>'s?

【问题讨论】:

【参考方案1】:

您是否考虑过使用 Web.sitemap 文件?它使它变得非常容易。如果您的站点地图文件如下所示...

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode>
    <siteMapNode url="~/Default.aspx" title="Home"  description="" />
    <siteMapNode url="~/Blog.aspx" title="Blog"  description="" />
    <siteMapNode url="~/AboutUs.aspx" title="AboutUs"  description="" />
  </siteMapNode>
</siteMap>

...然后您可以在母版页中执行此操作以获得您想要的结果:

<asp:SiteMapDataSource ID="sitemapdata" runat="server" ShowStartingNode="false"  />
<ul id="navigation">
    <asp:Repeater runat="server" ID="navrepeater" DataSourceID="sitemapdata">
        <ItemTemplate>
            <li class="<%# SiteMap.CurrentNode.Equals(Container.DataItem) ? "activenav" : "inactivenav" %>"><a href="<%# DataBinder.Eval(Container.DataItem, "url") %>"><%# DataBinder.Eval(Container.DataItem, "title") %></a></li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

当前页面的 LI 将有一个“activenav”类(或您决定使用的任何内容),而其他页面的 LI 将有一个“inactivenav”类。您可以相应地编写 CSS。这是我在我的网站上使用的技术,效果很好。

【讨论】:

在我看来,这是最好的路线。 这对我有用 - 一个小问题,我必须添加对 SiteMap.CurrentNode == null 的检查,因为并非我拥有的所有页面都在站点地图中。仍然这似乎是最干净的选择!【参考方案2】:

向母版页添加一个名为 Page Section 的属性

public string PageSection  get; set; 

将 MasterType 页面指令添加到内容页面的顶部

<%@ MasterType VirtualPath="~/foo.master" %>

在你的内容页面代码后面,设置母版页的PageSection属性

Master.PageSection = "home";    

在您的母版页中,将正文标记设为服务器标记

<body ID="bodyTag" runat="server">

在后面的母版页代码中,使用该属性在body标签上设置一个类

bodyTag.Attributes.Add("class", this.PageSection);

为每个导航项赋予唯一的 ID 属性。

在你的 css 中,根据当前页面类更改导航项的显示

.home #homeNavItem,
.contact #contactNavItem
 
    color: #f00; 
 

【讨论】:

我使用 VB.NET 作为后端而不是 C#,老实说我对 C# 知之甚少。在制作属性时,我需要在 get...end get // set...end set 中放置什么以使其正常工作? 哦,我已经设置了css。要使链接被选中,所有需要更改的只是在列表项标记中使用 id="current"。 然后在你的母版页代码后面,根据页面部分在列表项上添加'current'属性。 对于VB属性,你只需要一个简单的字符串属性。我不知道语法。我使用的 C# 语法是 C# 3.0 的新自动属性。 我一定是做错了什么,我无法让该属性显示在我的内容页面上。 Master.PageSection 不起作用,Me.PageSection 也不起作用。属性声明为“公共共享属性 PageSection() As String”【参考方案3】:

这是一个更好的语义匹配,并且可能是一个更容易设置的变量,以保持导航在任何地方使用相同的类或 id,并且只更改 body 元素的 id 以匹配:

<li id="homeNav">home</li>
<li id="blogNav">blog</li>

然后在每一页上...

<body id="home">
<body id="blog">

在css中:

#home #homeNav background-image:url(homeNav-on.jpg);
#blog #blogNav background-image:url(blogNav-on.jpg);

【讨论】:

【参考方案4】:

使用或不使用 ContentPlaceHolder 不会影响设置了 id="current" 的元素。

在渲染菜单组件时,您必须查看一些方法,无论是母版页的代码隐藏、javascript 函数还是其他东西,以便在创建时将 id="current" 正确添加到列表中。

【讨论】:

【参考方案5】:

如何在您的母版页代码类中创建一个受保护的字符串属性?覆盖 OnLoad:

protected string _bodyId;

protected override void OnLoad(EventArgs e)

    _bodyId = "your css id name";

然后在您的母版页 aspx 中:

<body id="<%= _bodyId %>">

这样您就不必弄乱您的 CSS,如果 CSS 来自设计机构,这尤其有用。

【讨论】:

【参考方案6】:

以下是我们使用 JQuery 通过附加 css 类来更改背景来实现它的方法。

$("ul.nav > li > a:contains('<%= SiteMap.CurrentNode.ParentNode.Title %>')").addClass("navselected");

ul.nav(在 Jquery 中)中的“.nav”是应用于 UL 标签的 css 类。

:contains 帮助检查 ul->li->a 中所有“a”标签/元素的内容,其中父节点标题打印在菜单中...

如果找到,将名为 navselected 的 css 类应用到特定的 ul->li->a 标记/元素。

问候,米内什·沙阿

系统加列兵。有限公司

www.systems-plus.com

【讨论】:

【参考方案7】:

我会使用 javascript 来完成这项工作。在 css 中,将您的#current 更改为一个类 (.current),然后在您创建的每个 ListItems 上都有 id。然后使用 RegisterStartupScript,调用获取适当 ListItem 并为其分配当前样式的 javascript 方法。使用 Prototype,这看起来像 $('MyPageLi').className = 'current'。

【讨论】:

所以基本上每个项目都有唯一的类(我想我可以将它们命名为 &lt;li class="nav_faq"&gt; 例如),然后当我导航到不同的页面时调用 javascript 将“nav_faq”更改为当前? 不,给他们每个唯一的 IDs 和一个公共类。然后,您可以使用 javascript 获取该类的所有元素并确保它们都没有当前类,然后获取当前页面的具有特定 id 的单个元素并将当前类添加到其中。

以上是关于更改导航 ID 以突出显示当前页面 ASP.NET 的编程解决方案的主要内容,如果未能解决你的问题,请参考以下文章

突出显示当前页面的导航菜单

导航,突出显示当前页面

在自定义导航栏 wordpress 中突出显示当前页面

Django - 基于当前页面突出显示导航?

PHP 突出显示导航中的当前页面

CodeIgniter:如何“突出显示”用户当前所在页面的链接?