Menu
I am a new ASP.NET Web Forms developer and trying to use Twitter Bootstrap with the Master Page. I am struggling with setting navbar item as active when user selects it. I created my simple master page by following this tutorial about how to use Twitter Bootstrap with ASP.NET.
Here's the code of my master page:
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="page-header">
<h1>Hello... My First Website with Twitter Bootstrap</h1>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<ul class="nav nav-list">
<li class="nav-header">Navigation</li>
<li class="active"><a href="Default.aspx">ASP.NET</a></li>
<li><a href="Default2.aspx">Java</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">C#</a></li>
</ul>
</div>
<div class="span9">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Then, I added this script to the Head in order to fix issue with the menu:
<script type="text/javascript">
$(document).ready(function () {
var url = window.location.pathname;
var substr = url.split('/');
var urlaspx = substr[substr.length - 1];
$('.nav').find('.active').removeClass('active');
$('.nav li a').each(function () {
if (this.href.indexOf(urlaspx) >= 0) {
$(this).parent().addClass('active');
}
});
});
</script>
However, nothing has been changed. When I selected any item from the navigation bar, the active class has not been added to the new selected item and I don't know why. Could you please help me in fixing this issue.?
233
For those as myself that prefer server-side implementations, transform your li tags of interest to runat="server" on the Master.Page file. The code in question will look something similar to this:
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" runat="server" id="tabHome" >
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" runat="server" id="tabContact">
<a class="nav-link" href="/Contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" runat="server">Hello, <asp:LoginName runat="server" />
</a>
</li>
</ul>
</div>
Then in the code behind of the Master page - Site.Master.vb or Site.Master.cs, depending on the language used - add the following in the Page Load event:
VB.Net implementation:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
Dim thisURL As String = Request.Url.Segments(Request.Url.Segments.Count - 1)
Select Case thisURL
Case "Default", "default.aspx"
tabContact.Attributes.Remove("active")
tabHome.Attributes.Add("class", "active")
Case "Contact"
tabHome.Attributes.Remove("active")
tabContact.Attributes.Add("class", "active")
End Select
End Sub
C# implementation:
Protected void Page_Load(Object sender, EventArgs e)
{
string thisURL = Request.Url.Segments[Request.Url.Segments.Length - 1];
switch (thisURL)
{
Case "Default":
Case "default.aspx":
{
tabContact.Attributes.Remove("active");
tabHome.Attributes.Add("class", "active");
break;
}
Case "Contact" :
{
tabHome.Attributes.Remove("active");
tabContact.Attributes.Add("class", "active");
break;
}
}
}
Since is "Default.aspx" the page that is supposed to be opened initially, the "Home" menu item will be highlighted as soon the user enters the website. An example is displayed below:
For the sake of simplicity, only two navbar items were used in the example, but the same logic could be implemented if more are required.
I hope can be of help.
92
Use this:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="/Default.aspx">Default</a></li>
<li><a href="/Clients.aspx">Clients</a></li>
<li><a href="/_display/">Display</a></li>
</ul>
</div>
</div>
</div>
$(document).ready(function () {
var url = window.location;
$('.navbar .nav').find('.active').removeClass('active');
$('.navbar .nav li a').each(function () {
if (this.href == url) {
$(this).parent().addClass('active');
}
});
});
Example: http://jsfiddle.net/yUdZx/3/
And, in the "href" use "Page.ResolveUrl"
<a href="<%= Page.ResolveUrl("~/Clients.aspx") %>">Clients</a>
It's better...
29
Actually Reynaldo, almost had it... At least for me, this works pretty good, on activing the current option and deactiving the previous one, based on his example.
$(document).ready(function() {
var url = window.location;
$('ul.nav li a').each(function () {
if (this.href == url) {
$("ul.nav li").each(function () {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
}
});
$(this).parent().addClass('active');
}
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With