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

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

asp.net css navigation

更改导航id以突出显示当前页面ASP.NET的编程解决方案,asp.net,css,navigation,Asp.net,Css,Navigation,我正在用VisualStudio2008和ASP.NET3.5编写一个网站。我有一个母版页设置，以简化布局，并保持内容页的内容，而不是内容和布局导航是列表，css的，所以它看起来像一个酒吧。为了突出显示栏上的页面，列表项需要如下所示。如果可以避免，我不想使用。是否有一些代码可以添加到我的每个页面（或仅添加到母版页？）以完成此任务，或者我是否被困在使用的页面中？使用或不使用ContentPlaceHolder不会影响哪个元素上设置了id=“current” 在呈现菜单组件时，您必须在母版页的代码

我正在用VisualStudio2008和ASP.NET3.5编写一个网站。我有一个母版页设置，以简化布局，并保持内容页的内容，而不是内容和布局

导航是列表，css的，所以它看起来像一个酒吧。为了突出显示栏上的页面，列表项需要如下所示。如果可以避免，我不想使用

。是否有一些代码可以添加到我的每个页面（或仅添加到母版页？）以完成此任务，或者我是否被困在使用

的页面中？
使用或不使用ContentPlaceHolder不会影响哪个元素上设置了id=“current”
在呈现菜单组件时，您必须在母版页的代码隐藏、javascript函数或其他方法中寻找一些方法，以便在创建菜单组件时将id=“current”正确添加到列表中。
我将使用javascript来完成这一点。在css中，将#current更改为类（.current），然后在创建的每个列表项上都有id。然后使用RegisterStartupScript调用javascript方法，该方法获取适当的ListItem并为其指定当前样式。使用Prototype，这看起来像$（'MyPageLi'）。className='current'。
向母版页添加一个名为page Section的属性
public string PageSection { get; set; }

将母版页指令添加到内容页的顶部
<%@ MasterType VirtualPath="~/foo.master" %>

在母版页中，将主体标记设为服务器标记
<body ID="bodyTag" runat="server">

为每个导航项目指定一个唯一的ID属性
在css中，根据当前页面类更改导航项的显示
.home #homeNavItem,
.contact #contactNavItem
{ 
    color: #f00; 
} 

这是一个更好的语义匹配，并且很可能是一个更容易设置的变量，以使导航在任何地方都使用相同的类或id，并且只更改body元素的id以匹配：
<li id="homeNav">home</li>
<li id="blogNav">blog</li>

您是否考虑过使用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”（或您决定使用的任何东西）类，其他页面将有一个“inactivenav”类。您可以相应地编写CSS。这是我在我的网站上使用的技术，效果非常好。
在母版页代码类中创建受保护的字符串属性怎么样？覆盖加载：
protected string _bodyId;

protected override void OnLoad(EventArgs e)
{
    _bodyId = "your css id name";
}

然后在母版页aspx中：
<body id="<%= _bodyId %>">



这样你就不必乱弄你的CSS了，特别是当CSS来自设计机构的时候，它就更有用了。
下面是我们如何使用JQuery通过添加CSS类来改变背景来实现它的
$("ul.nav > li > a:contains('<%= SiteMap.CurrentNode.ParentNode.Title %>')").addClass("navselected");

$（“ul.nav>li>a:contains（''）.addClass（“navselected”）；

ul.nav
（在Jquery中）中的“.nav
”是应用于ul标记的css类
：包含
有助于检查ul->li->a中所有“a”标记/元素的内容以及在菜单中打印的ParentNode标题
如果找到，将名为navselected的css类应用于特定的ul->li->a标记/元素
你好，米尼什·沙阿
系统加私人有限公司
www.systems-plus.com
因此基本上每个项目都有唯一的类（我想我可以将它们命名为），然后当我导航到不同的页面时，调用javascript将“nav_faq”更改为当前？不，给它们每个唯一的ID和一个公共类。然后，您可以使用javascript获取该类的所有元素，并确保其中没有一个具有当前类，然后获取具有当前页面特定id的单个元素，并将当前类添加到其中。我使用VB.NET作为后端，而不是C#，老实说，我对C#知之甚少。在创建属性时，我需要在get…end get//set…end set中放置什么才能使其正常工作？哦，我已经有了css集。要选择链接，只需更改列表项标记中的id=“current”。然后在母版页代码中，根据页面部分在列表项上添加“current”属性。对于VB属性，您只需要一个简单的字符串属性。我现在还不知道语法。我使用的C#语法是C#3.0的新自动属性。我一定是做错了什么，我无法让属性显示在我的内容页上。Master.PageSection不起作用，Me.PageSection也不起作用。属性被声明为“Public Shared Property PageSection（）as String”。我认为这是最好的选择。这对我来说很有效-一个小问题，我必须添加一个对SiteMap.CurrentNode==null的检查，因为我拥有的页面并非都在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>

protected string _bodyId;

protected override void OnLoad(EventArgs e)
{
    _bodyId = "your css id name";
}

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

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