ASP.NET C # With nav list, how to set id = "current" on active nav page?
I'm still learning asp.net and want to know if there was an easy way to set id = "current" on the navbar so that depending on the page the user was on, that page would be highlighted. My template is set to use id = "current" to change the style of the link, and I have an i class to style each tab.
Here is the code on my Site.Master
<nav id="navigation" class="style-1">
<div class="left-corner"></div>
<div class="right-corner"></div>
<ul class="menu" id="responsive">
<li><a href="home.aspx" id="current"><i class="home"></i> Home</a></li>
<li><a href="Calendar.aspx"><i class="calendar"></i>Calendar</a></li>
<li><a href="Bill.aspx"><i class="list"></i>Bills</a></li>
</ul>
</nav>
As I said, I am still involved, so not sure if it would be better to put it in a ContentPlaceHolder. I tried to just ask for the url and do if instructions, but I was not sure how to set id =.
Any help would be great.
thank
source to share
You should look into setting up class
your menu items, not id
to display it as highlighted.
You can do something like this. Add id
and runat="server"
to each of your links:
<li><a href="home.aspx" id="HomeLink" runat="server"><i class="home"></i> Home</a></li>
<li><a href="Calendar.aspx" id="CalendarLink" runat="server"><i class="calendar"></i>Calendar</a></li>
<li><a href="Bill.aspx" id="BillLink" runat="server"><i class="list"></i>Bills</a></li>
Then, in the source code of your master page, you can set classes for each of them as they move to:
protected void Page_Load(object sender, EventArgs e)
{
SetCurrentPage();
}
private void SetCurrentPage()
{
var pageName = GetPageName();
switch (pageName)
{
case "home.aspx":
HomeLink.Attributes["class"] = "current";
break;
case "Calendar.aspx":
CalendarLink.Attributes["class"] = "current";
break;
case "Bill.aspx":
BillLink.Attributes["class"] = "current";
break;
}
}
private string GetPageName()
{
return Request.Url.ToString().Split('/').Last();
}
This will set the link class corresponding to your current page to current
. Of course, you will need to define this class in your stylesheet. But it should work.
source to share
It is not very useful to set identifiers programmatically in controls ... It depends on how you want to define the "current" or active state.
If you are using ASP.NET Forms, you can look into using ASP.NET Controls that assign a class to an target and can be mated / bound to a database using an ASP.NET Sitemap.
If you prefer not to use ASP.NET forms, you can put the function evaluation in the href tag and declare the function in ASP.NET Master PAge code. Something like
<a href="home.aspx" class="<% CurrentOrNot("home") %>"> ...
Then declare a function that returns a string:
public void CurrentOrNot(string navItem)
{
//Do evaulation on URL to determine if we're on the current one or not.
//pseudocode: if(navItem == Current.Url) return "mycssclassthatiscurrentnav"; else "";
}
Go to the ASP.NET menu before rolling back.
source to share
This is probably not the best answer, but I recently tried to do something similar to what you are trying. First I set a variable to represent the css class for each menu link, then I get the current file path and check if it contains that location, and then sets the css class based on whether the page is active.
@{
//some how find out what page we are on so we can set the active attribute
var HomeClass = "non-active";
var AboutClass = "non-active";
string path = HttpContext.Current.Request.FilePath;
if (path.Contains("Home"))
{
HomeClass = "active";
}
if (path.Contains("About"))
{
AboutClass = "active";
}
}
Then for the menu I did this for the class attributes
<a href="/home" class="@HomeClass"></a>
< a href="/about" class=@AbouitClass"> </a>
source to share