ansaurus

Question

Programmatic solution to change navigation id to highlight current page ASP.NET

Answer 1

A:

The use or non use of ContentPlaceHolder will not affect which element has the id="current" set on it.

You will have to look at some method, either in your codebehind for the master page, a javascript function or something else when rendering the menu component to properly add the id="current" to the list when it is created.

Mitchel Sellers 2008-10-09 16:48:15

Answer 2

A:

I would use javascript to accomplish this. In css, change your #current to be a class (.current) and then have id's on each of your ListItems that you create. Then using RegisterStartupScript, call a javascript method that gets the appropriate ListItem and assigns it a style of current. Using Prototype, this would look like $('MyPageLi').className = 'current'.

AdamB 2008-10-09 16:49:19

so basically have each item have unique classes (i suppose i could name them like `<li class="nav_faq">` for instance) and then when i nav to a different page call javascript to change the "nav_faq" to current?

Anders 2008-10-09 16:51:19

No, give them each unique _IDs_, and a common class. Then you can use javascript to get all elements with that class and make sure none of them have the current class, then get the single element with the particular id for the current page and add the current class to it.

Joel Coehoorn 2008-10-09 19:12:54

Answer 3

+7 A:

Add a property to your master page called Page Section

public string PageSection { get; set; }

Add a MasterType page directive to the top of your content pages

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

In your content page code behind, set the PageSection property of the master page

Master.PageSection = "home";

In your master page, make the body tag a server tag

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

In the master page code behind, use that property to set a class on the body tag

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

Give each of your nav items a unique ID attribute.

In your css, change the display of the nav items based on the current page class

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

John Sheehan 2008-10-09 16:54:20

I am using VB.NET as the backend rather than C#, and to be honest I know little about C#. when making the property, what do I need to put anything within get...end get // set...end set to make it work properly?

Anders 2008-10-09 16:59:36

oh, i already have the css set. all that needs to change to make the link selected is having the id="current" in the list item tag.

Anders 2008-10-09 17:03:01

Then in your master page code behind, add the 'current' attribute on the list item based on the page section.

John Sheehan 2008-10-09 17:04:27

For the VB property, you just need a simple string property. I don't know the syntax off hand. The C# syntax I used is C# 3.0's new automatic properties.

John Sheehan 2008-10-09 17:05:39

I must be doing something wrong, I cannot get the property to show up on my content pages. Master.PageSection does not work, nor does Me.PageSection. Property is declared as "Public Shared Property PageSection() As String"

Anders 2008-10-09 17:07:34

Get rid of 'Shared'

John Sheehan 2008-10-09 17:16:04

Alright, did that and it is still not showing up. I added the MasterPage virtual path but still no dice. Very strange.

Anders 2008-10-09 18:26:09

email me at johnsheehan at gmail and I'll see if I can help you more

John Sheehan 2008-10-09 19:41:51

Quick question: I'm trying to use this in an ASP.NET MVC site. How do I add the property to my master page? I don't have a master page codebehind defined - all the other master page code is inline in `<% %>` blocks.

Maxim Zaslavsky 2010-07-22 04:48:35

This will not work for an MVC site. For MVC, just put the page section in ViewData and access it via <%=ViewData["PageSection"]%> from the master.

John Sheehan 2010-07-22 05:01:46

Answer 4

+2 A:

It's a better semantic match and likely an easier variable to set to keep the navigation using the same classes or ids everywhere and only alter the body element's id to match:

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

and then on each page...

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

And in the css:

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

davebug 2008-10-09 20:28:17

Answer 5

+6 A:

Have you considered using a Web.sitemap file? It makes it real easy. If your sitemap file looks like this...

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

...then you can do this in your master page to achieve the results you want:

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

The current page's LI will have a class of "activenav" (or whatever you decide to use), and the others will have a class of "inactivenav". You can write your CSS accordingly. This is the technique I use on my site and it works great.

Joshua Carmody 2009-01-19 15:40:37

This is the best route to go, in my humble opinion.

alex 2009-01-19 15:45:27

Answer 6

A:

Using the PageSection Property in the Master page submitted by John Sheehan works very well for me. Thank you so much for the solution!

Kam Cheung 2009-12-02 19:29:39

Answer 7

A:

How about creating a protected string property in your masterpage code class? Override the OnLoad:

protected string _bodyId;

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

Then in your masterpage aspx:

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

Then you don't have to mess with your CSS, especially useful if the CSS came from a design agency.

Fras 2010-02-21 22:11:24

ansaurus

tags:

views:

answers:

Programmatic solution to change navigation id to highlight current page ASP.NET

related questions