How to dynamically set a menu item class name with MVC4? - css

For a new application we are using Bootstrap v3.0, which has the navigation menu defined as follows:
<div id="sidebar">
<ul>
<li class="active"><i class="icon-home"></i> <span>Dashboard</span></li>
<li class="submenu">
<i class="icon-beaker"></i> <span>UI Lab</span> <i class="arrow icon-chevron-right"></i>
<ul>
<li>Interface Elements</li>
<li>jQuery UI</li>
<li>Buttons & icons</li>
</ul>
</li>
<li class="submenu">
<i class="icon-th-list"></i> <span>Form elements</span> <i class="arrow icon-chevron-right"></i>
<ul>
<li>Common elements</li>
<li>Validation</li>
<li>Wizard</li>
</ul>
</li>...
This is currently sitting in a shared _Layout.cshtml, and don't currently see a need to move this into its own shared view.
The layout template consists of several static files with <li class="active"> hard coded for the corresponding menu item within that file.
Since I'm building this with MVC4, I would like to know how to dynamically set this, based on the view being displayed.

Not sure best practice on this. You could try something like this:
<li class="#( RouteVariable.CurrentController.Equals("Home") ? "active" : "")">
Or RouteVariables.CurrentAction may be of use.

Related

Accessibility - make dropdown (sub) menu keyboard accessible as well

I am trying to make the dropdown menu of my navigation bar keyboard accessible as well. However, unsuccessfully. I have read WAI instructions and applied them but it doesn't seem to work. I don't want to use javascript (if possible)! The following is the code:
<nav id="main-menu" role="navigation" aria-label="Main navigation" role="navigation"class="fixed">
<ul class="sf-menu fixed" id="menu">
<li class="dropdown"> Υπουργείο
<ul role="menubar" aria-label="Main Menu" >
<li>Όραμα και Αποστολή</li>
<li>Υπουργός</li>
<li>Γενικός Διευθυντής</li>
<li>Προηγούμενοι Υπουργοί</li>
<li>Οργανωτική Δομή</li>
<li>Συμβούλια / Επιτροπές</li>
</ul>
</li>
<li class="dropdown"> Επιδόματα και Παροχές
<ul>
<li>Ελάχιστο Εγγυημένο Εισόδημα και Δημόσιο Βοήθημα</li>
<li class="dropdown">Οικογένειας και Παιδιού
<ul>
<li>Ειδικό Βοήθημα Τοκετού σε Άγαμες Μητέρες
<li>Επίδομα Τέκνου, Επίδομα Μονογονεϊκής Οικογένειας
<li>Τιμητικό Επίδομα Πολύτεκνης Μάνας
<li>Επίδομα Πατρότητας
<li>Σχέδιο Παραχώρησης Ωφελημάτων σε Οικογένειες που Αποκτούν Τρίδυμα και Άνω </ul>
</li>
<li>Εργασίας/Ανεργίας</li>
</ul>
</li>
</ul>
Also, I would like to add a small arrow which changes accordingly when the menu is expanded/collapsed. How can I do that with CSS and for it to be keyboard accessible as well?
Thanks in advance.

complex .css : Specifically I just am confused with this, and need to apply display: none; to this entire Menu Section without defecting its function [duplicate]

This question already has answers here:
What is the difference between id and class in CSS, and when should I use them? [duplicate]
(15 answers)
Closed 4 years ago.
Confused about the hierarchy for applying .css when mixing .class and #id
I would like the .css that will make this entire subsection of the menu display: none;
EDIT : Yes, the first suggestion did remove the submenu, but also removed the other items, I should have posted the entire Menu first time.
This spits out Menu where I do want some available and some not.
Overview Yes
Reerrals No
Payments No
Help No
Logout Yes
Marketing and its submenus - NO
Profile and its submenus - Yes
<div class="uap-ap-menu">
<ul>
<li class="uap-ap-menu-tab-item `enter code here`"><i class="fa-uap fa-overview-account-uap"></i>Overview</li>
<li class="uap-ap-menu-tab-item "><i class="fa-uap fa-referrals-account-uap"></i>Referrals</li>
<li class="uap-ap-menu-tab-item "><i class="fa-uap fa-payments-account-uap"></i>Payments</li>
<li class="uap-ap-menu-tab-item "><i class="fa-uap fa-help-account-uap"></i>Help</li>
<li class="uap-ap-menu-tab-item "><i class="fa-uap fa-logout-account-uap"></i>LogOut</li>
<li class="uap-ap-submenu-item"><div class="uap-ap-menu-tab-item" ><i class="uap-ap-menu-sign fa-uap fa-account-right-uap" id="uap_fa_sign-profile"></i>Profile</div>
<ul class="uap-public-ap-menu-subtabs" style="" id="uap_public_ap_profile">
</ul>
</li>
<li class="uap-ap-submenu-item"><div class="uap-ap-menu-tab-item" ><i class="uap-ap-menu-sign fa-uap fa-account-right-uap" id="uap_fa_sign-marketing"></i>Marketing</div>
<ul class="uap-public-ap-menu-subtabs" style="" id="uap_public_ap_marketing">
</ul>
</li>
<li class="uap-ap-submenu-item"><div class="uap-ap-menu-tab-item" ><i class="uap-ap-menu-sign fa-uap fa-account-right-uap" id="uap_fa_sign-reports"></i>Overall</div>
<ul class="uap-public-ap-menu-subtabs" style="" id="uap_public_ap_reports">
</ul>
</li>
</ul>
</div>
It's because in css rules any id value has much stronger effect than class, so selector with id ALWAYS override selector with class.
Please, see this answer

access parent sub array key handlbars

I have the following array / sub array structure
"filters": {
"types": {
"34": "Ford",
"22": "Jeep",
"18": "Porsche",
},
"locations": [
"Earth",
"Mars",
"Moon",
]
}
and the following handlebars template
{{#if filters}}
{{#each filters}}
<div class="cars">
<ul class="cars__list">
<li class="cars-{{#key}}__title">Filter by {{#key}}:</li>
<li class="cars-{{#key}}__filters">
<ul>
<li class="cars-{{#key}}">View All</li>
{{#each this}}
<li class="cars-{{*want to access filters[key]*}} color={{#key}}">{{this}}</li>
{{/each}}
</li>
</li>
</ul>
</div>
{{/each}}
{{/if}}
I'm having trouble accessing the filters[types] and filters[locations] within the each this loop.
In my CSS I'm using a classes called .cars-type and .cars-location. I want to be able to style each list separately and unfortunately target each li with a class. I want to apply these styles within the each this loop.
I can do it within the filters loop by using {{#key}} but not in the each this loop
I've tried
<li class="cars-{{../filters}}">{{this}}</li>
but this just returns the car type like ford - I want the key ie. '34' in this case
<li class="cars-{{lookup ../filters #index}}">{{this}}</li>
using handlebars helper lookup but again no luck
<li class="cars-{{../this}}">{{this}}</li>
and the above which gives me [object Object]
I've checked out handlebars - is it possible to access parent context in a partial?, handlebars.js: relative paths in partials not working and Lookup helper in handlebars but no luck with any of the solutions
EDIT Here's the HTML output that I want to produce
<div class="cars">
<ul class="cars__list">
<li class="cars-types__title">Filter by types:</li>
<li class="cars-types__filters">
<ul>
<li class="cars-types">View All</li>
<li class="cars-types color-34">Ford</li>
<li class="cars-types color-22">Jeep</li>
<li class="cars-types color-18">Porsche</li>
</ul>
</li>
</ul>
<ul class="cars__list">
<li class="cars-locations__title">Filter by locations:</li>
<li class="cars-locations__filters">
<ul>
<li class="cars-locations">View All</li>
<li class="cars-locations color-0">Earth</li>
<li class="cars-locations color-1">Mars</li>
<li class="cars-locations color-2">Moon</li>
</ul>
</li>
</ul>
</div>
You should reconsider your HTML because a ul cannot be a direct child of another ul. See https://developer.mozilla.org/en/docs/Web/HTML/Element/ul#Usage_context
With that said, we can solve your problem. The Handlebars docs have our answer:
Nested each blocks may access the interation variables via depth based
paths. To access the parent index, for example, {{#../index}} can be
used.
Therefore, your problematic line should look like the following:
<li class="cars-{{#../key}} color-{{#key}}">{{this}}</li>

How to add a span tag in an a tag using Html.ActionLink

How do you add a span tag inside of an a tag using Html.ActionLink? Is something like this at all possible?
I am using ASP.NET MVC 4 together with Twitter Bootstrap version 3.
I have a drop down menu and the HTML looks like this:
<ul class="nav navbar-nav">
<li class="#(Model.Equals("Home") ? "active" : "")">
<a href="#">
<span class="glyphicon glyphicon-home"></span> Home
</a>
</li>
</ul>
I was wanting to do the link like this:
<li>#Html.ActionLink("Home", "Index", "Home")</li>
But there is a span tag in the mix of things which makes it a bit more complex.
I can probably also use the following:
<a href="#Url.Action("Index", "Home")">
<span class="glyphicon glyphicon-home"></span> Home
</a>
Curious to know if the above is possible?
Your variant with Url.Action("Index", "Home") is correct and possible. Url.Action returns the url, so it can be used in a href.

Traversing back to parent node in xpath

Below is my HTML
<ul><li class="section">BROADCASTING</li>
<ul>
<li class="subsection"></li>
<li class="circle">STATION BREAK</li>
<li class="circle">Labor pains, hunger pangs</li>
<li class="circle">Wake-up call for Dream Team</li>
<li class="circle">News crew turns rescuer</li>
<li class="circle">Chopper safety had been challenged</li>
<li class="circle">Nielsen adds Dayton..</li>
<li class="circle">Mondale watch</li>
<li class="circle">Those 70s clearances</li>
<li class="circle">Oscar goes to ABC</li>
<li class="circle">Hearst-Argyle gives a green light</li>
<li class="circle">Finding Geena Davis</li>
<li class="circle">Syndication Wrap-up</li>
<li class="circle">CBS TV news pioneer dies at 86</li>
<li class="circle">New York anchor remembered</li>
<li class="circle">News sharing in West Virginia</li>
<li class="circle">News dropping in Orlando</li>
<li class="subsection">Null</li>
<li class="circle">GET WITH THE PROGRAM</li>
<li class="subsection">PEOPLE'S CHOICE</li>
<li class="circle">Syndication as branding</li>
</ul>
</ul>
Now i want to seperate sections and subsections and get the url inside subsections.
i have go to the each sections
Now as per the HTML structure, section is in seperate li which closes before subsection opens, so once i have reached section, i have to move back to ul and then have to continue to get subsection
However when i try ../ to go back to the ul (the one before section), it says ivalid token
This is what i tried to come back to the parent one.
HtmlNodeCollection sections = doc.DocumentNode.SelectNodes("//ul/li[#class='section'][contains(text(), 'BROADCASTING')]../ul");
but this does not works
Can anyone tell me where i am going wrong, it will be a kind help.
You need to change your xpath expression a bit:
var subsections = doc.DocumentNode.SelectNodes("//ul/ul[preceding-sibling::li[#class='section' and .='BROADCASTING']]/li[#class='subsection']");
It searches for <ul> inside <ul> that has <li class="section">BROADCASTING</li> as a previous sibling, and then searches for <li class="subsection"> inside it.
So the code above selects all the subsections under BROADCASTING section.
Hope this helps.

Resources