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">ASP.NET</li>
<li>Java</li>
<li>VB.Net</li>
<li>C#</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.?
Use this:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Default</li>
<li>Clients</li>
<li>Display</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"
Clients
It's better...
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');
}
});
});
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.
I've placed this in each one of my content pages, changing the id of the nav item for each page (this uses JQuery selectors). So for this to work for you you'll need to give your list items an Id. I don't add the "active" class to the master page because all we need to do is highlight the appropriate one when the content loads.
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("[id$=yourNavItemId]").addClass("active");
});
</script>
Note: if you're using ASP.NET controls instead of list items inside of your nav bar, they might be getting prefixed at runtime causing your javascript not to find the Id you think you're looking for.
following code works if I have subpages:
$(document).ready(function () {
$('.navbar .nav').find('.active').removeClass('active');
var url = window.location.toString();
var u = url.substring(0, url.lastIndexOf("/")).toString();
$('.navbar .nav li a').each(function () {
var hr = this.href.substring(0, this.href.lastIndexOf('/')).toString();
if ((u == hr) || (u.indexOf(hr) > -1))
{
$(this).parent().addClass('active');
return false;
}
});
// Deactivation to manually add items you have with href = "#" example:
$('#liSalir').removeClass('active');
});
If you are using navigation bar with dropdown-menu then put below script at end of your master page(before body closing tag):
<script type="text/javascript">
$(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().parent().parent().addClass('active');
}
});
});
</script>
This completely worked for me.
I know this post is old but use
$(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).parents().addClass('active');
}
});
});
Since you also wants to active the all the parents.
var windowUrl = window.location.href.toLowerCase();
//var windowUrl = window.location.href.toLowerCase().split('.')[0];
setTimeout(function () {
var windowUrl = window.location.href.toLowerCase();
$('#nav li').removeClass('active');
$('#nav li').each(function (index) {
pageUrl = $(this).find('a').attr('href');
if (windowUrl.indexOf(pageUrl) > -1) {
$(this).addClass('active');
}
});
}, 10);
I have created a sample which full fill your requirement you need to modify the code according to your need.
Use this jquery on master page
<script type="text/javascript">
$(function () {
$('[id*=submenu]').addClass('sub-menu open');
$('[id*=Master_Pages]').attr("aria-expanded", true);
$('.subMenus').click(function () {
localStorage.setItem('lastTab', $(this).attr('id'));
});
});
function pageLoad() {
var isActiveLink = false;
$.each($('.subMenus'), function () {
if ($(this).attr('id') == localStorage.getItem('lastTab')) {
$(this).closest('li').addClass('active');
localStorage.removeItem('lastTab');
isActiveLink = true;
}
else {
$(this).closest('li').removeClass('active');
}
});
if (!isActiveLink) {
$('[id*=Master_Designation]').closest('li').addClass('active');
}
}
</script>
Some helpful article for .Net guys
https://gist.github.com/josephwambura/ef97b44c309226301847d3e09e0e2562?permalink_comment_id=4381643#gistcomment-4381643
Related
Good evening to all.
I'm trying to design a virtual keybord, with which I filter a list of Italian cities (with same class). This keyboard send the various values to an EventListener and do the job well.
Now, I'm trying to add another list (Irish cities), but I've no idea about how to double the EventListener. Could you please help me? Just let me show the code:
<!DOCTYPE html>
<html>
<body>
<h2>Italian cities</h2>
<button class="ita" value="A">A</button>
<button class="ita" value="B">B</button>
<!-- here the other buttons till "Z" -->
<button class="ita" value="">all</button>
<div id="Italy">
<ul>
<li>Alessandria</li>
<li>Bologna</li>
</ul>
</div>
<hr>
<h2>Irish cities</h2>
<button class="eire" value="C">C</button>
<button class="eire" value="D">D</button>
<!-- here the other buttons till "Z" -->
<button class="eire" value="">all</button>
<div id="Ireland">
<ul>
<li>Cork</li>
<li>Dublino</li>
</ul>
</div>
<script>
document.querySelectorAll('.ita').forEach(button => {
button.addEventListener('click', () => {
let fired_btn = button.value;
var filter, ul, li, a, i;
filter = fired_btn.toUpperCase();
div = document.getElementById("Italy");
a = div.getElementsByTagName("li");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) === 0) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
});
});
</script>
</body>
</html>
I want send cod to controller and return array
When pressing a li you have to send a code to the controller, in this case I am setting the example 7. Once the code has arrived at the controller I will have a list that I have to show in a ng-repeat in table
SCRIPT
<script type="text/javascript">
var app = angular.module('myApp', [])
app.value('studentInfo', [
{ id: 1, name: 'Mahedee Hasan', credit: 20, semester: '8th' },
{ id: 3, name: 'Enamul Haque', credit: 15, semester: '7th' }
]);
app.controller('myCtrl', ['$scope', 'studentInfo', function ($scope, studentInfo, $http, $window) {
$scope.myClickList = function () {
$scope.studentInfo = studentInfo;
};
var Cod = "7";
$scope.myDataCountry = [];
$scope.ButtonCountry = function (Cod) {
$http.
post("/Country/Angular", { CodH: Cod }).success(function (result) {
$scope.myDataCountry = result;
});
};
}]
);
</script>
VIEW
<li><a data-toggle="tab" href="#calificaciones" ng-click="ButtonCountry ()"><span>Country</span></a></li>
<div ng-app="myApp" ng-controller="myCtrl">
<table class="table">
<tr>
<th>ID</th>
<th>Country</th>
</tr>
<tr ng-repeat="C in myDataCountry">
<td>{{C.ID}}</td>
<td>{{C.Country}}</td>
</tr>
</table>
</div>
CONTROLLER
public JsonResult Angular(string codCountry)
{
var country = (from a in dbCountry.Country
where a.CodPersona == codCountry
select a.Country).ToList();
return Json(country , JsonRequestBehavior.AllowGet);
}
I tried this and to
First, your li element isn't inside your app directive, which means it will not detect the function, you need to make sure that your li element is within the app scope
<!-- li is outside the scope -->
<li><a data-toggle="tab" href="#calificaciones" ng-click="ButtonCountry(1)"><span>Country</span></a></li>
<div ng-app="myApp" ng-controller="myCtrl">
<!-- end -->
<!-- li is within the scope -->
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li><a data-toggle="tab" href="#calificaciones" ng-click="ButtonCountry(1)"><span>Country</span></a></li></ul>
<!-- end -->
of course, you need to alter your html elements, meaning ul parent of the li most be included as well.
your Action url is wrong, your controller shows that action name is CalificacionesAngular but you are using Angular for some reason, another thing I notice you never passed the code to your function which means
this
ng-click="ButtonCountry ()"
//should be this
ng-click="ButtonCountry('thecode')"
and the data you are posting isn't similar to the parameter name,
you have to change this
post("/Country/Angular", { CodH: Cod })
//to this
post("/Country/CalificacionesAngular", { codCountry: Cod })
there might be some more issues, these are the one I could see so far, please debug and provide more details about the error you are getting.
A good example you can check as well is this and this, and I suggest reading about Directives, Binding, scope, and Events
This is my helper for generating a treeview.
Using this i am able to generate the treeview in the mvc5.
#helper GetTreeView(List<MvcTreeview.Models.Category> siteMenu, int parentID)
{
foreach (var i in siteMenu.Where(a => a.ParentID.Equals(parentID)))
{
<li>
#{var submenu = siteMenu.Where(a => a.ParentID.Equals(i.ID)).Count();}
#if (submenu > 0)
{
<span class="collapse collapsible"> </span>
}
else
{
<span style="width:15px; display:inline-block"> </span>
}
<span id="Category">
#i.CategoryName
#*oncontextmenu="return false"*#
</span>
#if (submenu > 0)
{
<ul>
#Treeview.GetTreeView(siteMenu, i.ID)
#* Recursive Call for Populate Sub items here*#
</ul>
}
</li>
}
}
This is my View for displaying
#model List<MvcTreeview.Models.Category>
#{
ViewBag.Title = "Simple";
}
<div class="gridbox gridleft">
<div class="left">
<div style="padding:10px; background-color:#FAFAFA">
<div class="treeview">
#if (Model != null && Model.Count() > 0)
{
<ul>
#Treeview.GetTreeView(Model, Model.FirstOrDefault().ParentID)
</ul>
}
</div>
</div>
</div>
</div>
<div id="onSuccess">
</div>
#* Here We need some Jquery code for make this treeview collapsible *#
#section Scripts{
<script type="text/javascript">
$(document).ready(function () {
$(".treeview li>ul").css('display', 'none'); // Hide all 2-level ul
$(".collapsible").click(function (e) {
e.preventDefault();
$(this).toggleClass("collapse expand");
$(this).closest('li').children('ul').slideToggle();
});
});
function PassingFunction(clicked_id) {
url = '#Url.Action("Details", "TestDetails")';
$.ajax({
url: url,
type: 'GET',
data: { 'id': clicked_id },
success: function (returnData) {
$("#onSuccess").html(returnData);
console.log(returnData);
},
error: {
}
});
}
</script>
}
Now i want to add the custom functionalities to the nodes of the treeview
Add
Delete
Edit
How can i do that?
There is a lot of JQuery Context Menu options on this link.
I have just picked the most forked of them, jQuery contextMenu.
I created a JSFeed fork in an example of treeview using UL/LI and created this JSFiddle with the Context-Menu to help you:
http://jsfiddle.net/mqueirozcorreia/0h82qto6/
Explaining the code:
I have added the externals resources:
http://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.min.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js
http://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.min.js
All the magic goes in the javascript code, configuring the context-menu.
The selector property will put the context menu in every element of type <span> and having class attribute with value "contextMenuItem":
selector: 'span.contextMenuItem',
When the user clicks the callback function below runs. In this example, it alerts/logs what key was selected and the id attribute value.
callback: function(key, options) {
var m = "clicked: " + key + " on element of id " + options.$trigger.attr("id");
window.console && console.log(m) || alert(m);
},
I am in a tricky situation,
Scenario- There are gadgets which are to be shown in mobile site.
2.One of the gadget is RSS which user can add multiple times for different topics like one for security, one for news, one for events.
3. So we have 1 partial view for RSS, but if the user has 2 RSS gadgets then the same partial view should load with different gadget name. Here the functionality is working fine using foreach loop.
#foreach (var rssFeed in Model.RSSFeedList)
{
<article class="bm2014_bigBoxWrap bm2014_bigBoxRSS bm2014_paginate">
<img src="~/Content/images/iconRefresh.png" width="20" height="20" alt="refresh icon" title="refresh icon">
<div class="bm2014_expColCtrl">
<h1 class="bm2014_bigBoxHdr">
<span class="bm2014_hiddenHdr"> </span>
<!-- for markup validation -->
#if (rssFeed.Channel.Name == "xyznews")
{
<span>#Html.Label(Labels.Title_xyz)</span>
}
else if(rssFeed.Channel.Category=="xyzRSSFeed")
{
<!--<span>#Html.Label(Labels.xyz) - #rssFeed.Channel.Title</span>-->
<span>#rssFeed.Channel.Title</span>
}
<span class="bm2014_expColBtn"><img src="~/Content/images/iconPlus.png" width="32" height="32" alt="expand collapse icon" title="expand collapse icon"></span>
</h1>
<div class="bm2014_expColContent bm2014_bellnetRSSWrapper" id="bm2014_divBellnetRSS">
#Html.Partial("~/Views/Shared/_RSS.cshtml", rssFeed)
</div>
</div>
</article>
}
<!-- RSS Panel end here -->
Problem is with refresh issue
if i hit the refresh button for selected gadget, it is by default taking only one RSS name and loading the content irrespective of different gadget selected.
partialview page code-
#model Models.RSSFeed
#{
Layout = null;
}
<script src="~/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.multilevelpushmenu.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-simple-pagination-plugin.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript">
/* scripts to load after the DOM gets ready */
$(function () {
offCanvasMenu(); // trigger Javascript controlled OFF canvas menu after AJAX refresh
$.ajaxSetup({ cache: false });
$("article.bm2014_bigBoxRSS #btnRefresh").on('click', function (event) {
var $rssGadgetID = $(this).parents("article.bm2014_paginate").find("div#bm2014_divBellnetRSS");
var $rssGadgetLdr = $rssGadgetID.find("div#bm2014_gadgetLoader");
ajaxLoaderHeightCtrl($rssGadgetID, $rssGadgetLdr);
// AJAX control
$.ajax({
url: '#Url.Action("RefreshBellnetRSS", "Home", new { feedName = Model.Channel.FeedName })',
contentType: 'application/html; charaset=utf-8',
type: 'GET',
dataType: 'html',
success: function (result) {
$rssGadgetLdr.fadeOut(100, function () {
$rssGadgetID.html(result);
var moveRSS = $("article.bm2014_bigBoxWrap").css("float");
if (moveRSS == "left") {
mQueryAJAX("portrait", $rssGadgetID);
}
else if (moveRSS == "none") {
if (window.matchMedia("(orientation: portrait)").matches) {
mQueryAJAX("portrait", $rssGadgetID);
}
if (window.matchMedia("(orientation: landscape)").matches) {
mQueryAJAX("portrait", $rssGadgetID);
}
}
hideTableHeader();
});
},
error: function (xhr, status) {
alert(status);
}
});
});
});
</script>
<div class="bm2014_gadgetLoader" id="bm2014_gadgetLoader" style="display: none;">
<img src='#Url.Content("~/Content/Images/loaderGadget.gif")' width="48" height="48" alt="ajax loader image" title="ajax loader image">
</div>
<div class="bm2014_strategyContent">
#if (Model.url != null)
{
<table>
<thead>
<th>dummy header - to be hidden</th>
</thead>
<tbody>
#foreach (var url in Model.url)
{
<tr>
<td>
#url.Name
</td>
</tr>
}
</tbody>
</table>
}
</div>
need help/suggestions
If I understand correctly, you need to have 3 refresh buttons for 3 RSS gadgets e.g. one for security, one for news, one for events.
In the current example, every time you call the code to apply click event, you replace the earlier event and the 'feedname' parameter in url for ajax call also gets updated.
$("article.bm2014_bigBoxRSS #btnRefresh").on('click', function (event) {
......
}
You need to be able to distinguish between the refresh buttons and pass correct parameters. One way is to use data-feedname attribute on your btnRefresh anchor tag (if using HTML5)
I have a element parsed from html template and i want to add a click event to it, it seems not working.
but when i add element like
$('#formatMe').click();
Here click is working but when
var formats = appAPI.resources.parseTemplate("formats.html",result);
$code=$(formats);
$('#vid_div').prepend($code);
But not on element from parseTemplate
I am writing click function in appAPI.ready like below
appAPI.ready(function($) {
$("#user-header").append("<div id='formatMe'>Download</div>");
$('#some-div-in-web-site').append("<div id='vid_div'></div>");
$('#formatMe').click(function(){
var url="myurl";
appAPI.request.get({
url: url,
onSuccess: function (data) {
var result=appAPI.JSON.parse(data);
var formats = appAPI.resources.parseTemplate("formats.html",result);
$('#vid_div').html('');
$code=$(formats);
$('#vid_div').prepend($code);
}
});
});
$('#close').click(function(){
alert("dont'click on me!!!");
});
});
Formats.html is like this
<div id="vid_formats">
<div id="close">×</div>
<div class="wrapper">
<h1>Download Links</h1>
<ul>
<% for (var i=0; i<vids.length; i++) { %>
<li>
<a id="format" href="<%=vids[i]['url'] %>"><%=vids[i]['type']%> <%=vids[i]['quality']%> - <%=vids[i]['size']%> </a>
</li>
<% } %>
</ul>
</div>
</div>
Still not able to fire click event, i am testing in firefox.
Foreword: Since the contents of the formats.html file and result array are not provided and it's also not clear from your example where the element with id close is defined, I created the scenario that I believe you are experiencing.
In the scenario I recreated, the click event handler worked as expected and I can see the alert. The following are the extension files I recreated and then tested in Chrome.
formats.html:
<div>
<ul>
<% for (var i=0; i<sites.length; i++) { %>
<li><%=sites[i].name%></li>
<% } %>
</ul>
</div>
<div id="close">Close</div>
extension.js:
appAPI.ready(function($) {
var result = {
sites:[
{url:' http://cnn.com ', name:'cnn'},
{url:' http://yahoo.com ', name:'yahoo'}
]
},
formats = appAPI.resources.parseTemplate("formats.html",result);
$('<div id="player"></div>').prependTo('body');
$code=$(formats);
$('#player').prepend($code);
$('#close').click(function(){
alert('clicked me');
});
});
[Disclosure: I am a Crossrider employee]