I am trying to figure out how i can change links on a _layout.cshtml based on the requested view.
When I am on the Home/Index I want the href to be '#Unhealthy' but when im on any other page, I want it to redirect back to the home page '/Home/Index/#Unhealthy'
When on other page
<li>
<i class="fa fa-warning warning"></i>
</li>
When on Home/Index
<li>
<i class="fa fa-warning warning"></i>
</li>
How can I determine the requested view to swap this value?
*Note: I suppose if I cant do it at the server I can always change the values with javascript/jquery
use razor if your using MVC note i did this answer because you tagged MVC. If you are doing a MVC application this is by far the best way it can be done, no need for any javascript.
#if (window.location.pathname == "/"){
<li>
<i class="fa fa-warning warning"></i>
</li>
}
else{
<li>
<i class="fa fa-warning warning"></i>
</li>
}
if you did want to do it the jQuery way this would work:
Jquery:
$( document ).ready(function() {
if (window.location.pathname == "/"){
$("#Link").prop("href", "#Unhealthy")
}
else {
$("#Link").prop("href", "/Home/Index/#Unhealthy")
}
});
html:
<li>
<a id="Link" href="#"><i class="fa fa-warning warning"></i></a>
</li>
#{
var controller = ViewContext.RouteData.Values["controller"].ToString().ToLower();
var action = ViewContext.RouteData.Values["action"].ToString().ToLower();
}
<li><i class="fa fa-warning warning"></i></li>
The answer by Josh Stevens should work using MVC razor code but you could use same code on each page using #Html.ActionLink overloads
A quick search finds this link that is old syntax but concept correct
Without Testing try
#Html.ActionLink("Link Text", "Index", "Home", null, null, "Unhealthy", null, null)
Related
Ok, this is my very first question posted to this forum so please be kind.. :)
I'm using ASP.NET MVC 5 and I am trying to do a two step process when an icon is clicked.
Select the correct page
Scroll down to a certain section on that page.
Here is what I got so far:
<a class="sidebar-brand d-flex align-items-center justify-content-start" >
<div class="notification-bell" style="color:red">
<i class="fas fa-fw fa-bell fa-2x" title="Number of Unread Comments" alert-count=#ViewBag.TotalUnreadComments.ToString() onclick='scrollToElement("CommentSection");'></i>
</div>
</a>
And the Javascript
<script type='text/javascript'>
function scrollToElement(id) {
// Set correct page
window.location.replace("/TodoListDashboard");
//Get target
var target = document.getElementById(id).offsetTop;
//Scrolls to that target location
window.scrollTo(0, target);
}
</script>
The funny thing is that either of these actions work by themselves but they won't work together.
Any ideas would be greatly appreciated!!!
Ok, I feel kind of foolish but I figured out an easy fix...
For this problem, I just created a javascript function and added both items together like this:
<script type='text/javascript'>
function scrollToComments() {
window.location.replace("/TodoListDashboard#CommentSection");
}
</script>
Then I just changed my onclick call to:
<i class="fas fa-fw fa-bell fa-2x" title="Number of Unread Comments" alert-count=#ViewBag.TotalUnreadComments.ToString() onclick='scrollToComments();'></i>
Instead of retyping repeated codes for a side bar in Javascript, I made a sidebar function which is used to populate similar codes for every pages. it looks like this:
function addSidebarTemplate(){
const template = document.createElement('template');
template.innerHTML = `<aside class="aside-container">
<header>
link here
<a class="mr-1" href="#">
<i class="fab fa-linkedin"></i>
</a>
<a class="mr-1" href="#">
<i class="fab fa-facebook"></i>
</a>
<a class="mr-1" href="#">
<i class="fab fa-github"></i>
</a>
</header>`
document.querySelector('#sidebar').appendChild(sidebar.content);
There are other elements below this code. But none of them requires user's input. I just wonder is this safe to use innerHTML in this case? If not, is there better way to insert the side bar like this?
Thanks
If no user input is used, then innerHTML is fine to use. That being said, if you're doing a lot of this you may want to look into using a UI library like React to help you out.
I have multiple drop down menus on the single page. I am using Materializecss.com. The Error is, I am getting values of the first drop down in every dropdown menu in the whole page. Here is the code.
#if($user->is_banned != 1)
<a class='dropdown-button btn-flat' href='#' data-constrainWidth="false" data-activates='dropdownUser'><i class="material-icons left">expand_more</i> More</a>
<ul id="dropdownUser" class="dropdown-content">
<li><i class="material-icons left">insert_chart</i>BAN</li>
<li><i class="material-icons left">delete</i>Delete</li>
</ul>
#else
The Problem is, For example, If I have the list of 5 users on the same page, I am getting values of the first user in all the dropdown menus. I don't know what's wrong.
I tried to change class to ID but not working. I am a bit new to Jquery.
UPDATE: Okay, I found the error. Here is the new code that works! Thanks for Help StackOverflow!
#if($user->is_banned != 1)
<a class='dropdown-button btn-flat' href='#' data-constrainWidth="false" data-activates='dropdownUser-{{ $user->id }}'><i class="material-icons left">expand_more</i> More</a>
<ul id="dropdownUser-{{ $user->id }}" class="dropdown-content">
<li><i class="material-icons left">insert_chart</i>BAN</li>
<li><i class="material-icons left">delete</i>Delete</li>
</ul>
#else
I Updated the working code instead of deleting the question because there might be many developers looking for the same solution!
I have faced same issue working with materialize css.
I used
$('#tag_id').material_select();
while document is getting ready.
I am trying to get the following bit of code to work, but I seem to be missing something
var dom = document.URL;
$("a[href=dom]").addClass("active");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<a href="http://example.com">
<i class="fa fa-home"></i>
Home
</a>
</li>
<li>
<a href="http://example.com/about">
<i class="fa fa-info"></i>
About
</a>
</li>
What's supposed to happen is when at http://example.com the class active will be added to the first a element, if at http://example.com/about then the second a will get the class.
I used javascript's alert to make sure I was getting the right URL, and it is as it shows in href, however what I have above doesn't work. I have tried the Javascript responses given here but they don't work either.
$("a[href=dom]").addClass("active");
should be
$("a[href=" + dom + "]").addClass("active");
You're mixing in a variable with a string. Also, I would recommend just adding a class to the body and targeting the current page like that. It's much more reusable.
HTML code :
<ul class="dropdown-menu" role="menu">
<li>
<a href="#/profile">
<i class="fa fa-user"></i> My Profile </a>
</li>
<li>
<a href="#/source">
<i class="fa fa-user"></i> Source </a>
</li>
<li>
<a href="/user/logout">
<i class="fa fa-user"></i> Logout </a>
</li>
</ul>
My code :
element(by.cssContainingText('i.fa.fa-user', ' My Profile ')).click();
Problem : I am trying to click on element using class and cssContaingText but am not able to it. Please help me.
please help me
You may have solved it via the by.cssContainingText also. The problem with your current approach is that you are checking the text inside the i element, which is in your case empty:
<i class="fa fa-user"></i> My Profile
The text to check is located inside the a element:
element(by.cssContainingText('ul.dropdown-menu > li > a', 'My Profile')).click();
Alternatively, you may solve it without checking the text:
element(by.css("a[href*=profile]")).click();
Though, I would agree that "by partial link text" option is a better choice in this case.
I got the answer : I tried this code, it worked nicely.
element(by.partialLinkText('My Profile')).click();