I have this error in the navbar in asp.net mvc
And this id my code
<li class="nav-item nav-link" role="presentation">
<a class="nav-link" #Html.ActionLink("Customers", "Index", "Customers") />
</li>
So why this character come />
The close for the
You're using Html.ActionLink inside anchor tag, which is totally wrong:
<a class="nav-link" #Html.ActionLink("Customers", "Index", "Customers") />
I suggest you to use ActionLink helper alone with #class attribute instead:
#Html.ActionLink("Customers", "Index", "Customers", null, new { #class = "nav-link" })
Or use #Url.Action with anchor tag:
<a class="nav-link" href="#Url.Action("Index", "Customers")">Customers</a>
You need to change the line:
<a class="nav-link" #Html.ActionLink("Customers", "Index", "Customers") />
to
<a class="nav-link" href="#Url.Action("Index", "Customers")">Customers</a>
or:
#Html.ActionLink("Customers", "Index", "Customers", null, new {#class = "nav-link"})
This is because #Html.ActionLink() generates the entire anchor (<a>) element whereas #Url.Action() just generates the URL for the route, you need to do one or the other.
Related
I'm new to cypress and lately I have to extract text variables within websites using cypress. Now, I've finally figured out how to extract text variables of a specific class/id in html. However, I cannot find the right way to extract the exact nth element within the class/id.
For example, here is my html:
<div class ="main-menu-wrapper align-self-stretch align-items-stretch" id="navbarCollaspse">
<ul region="header" class="clearfix nav navbar-nav navbar-nav-center mx-auto">
<li class="nav-item menu-item--expanded dropdown">
<a href="https://example/subwebsite/aaaaa"
class="nav-link dropdown-toggle main-menu-1" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
TEXTAAAAA </a>
<li class="nav-item menu-item--expanded dropdown">
<a href="https://example/subwebsite/bbbbb"
class="nav-link dropdown-toggle main-menu-2" data-toggle="dropdown"
aria-expanded="false" aria-haspopup="true">
TEXTBBBBBB </a>
<li class="nav-item menu-item--expanded dropdown">
<a href="https://example/subwebsite/ccccc"
class="nav-link dropdown-toggle main-menu-3" data-toggle="dropdown" aria-
expanded="false" aria-haspopup="true">
TEXTCCCCCC </a>
</div>
Here is my cypress javascript code:
cy.visit('https://example/website')
cy.get([class="clearfix nav navbar-nav navbar-nav-center mx-auto"]).each(($el) => {
cy.wrap($el).invoke('text')
.then(text => {
//do something with the text
//Here, I could get TEXTAAAAA TEXTBBBBBB TEXTCCCCCC orderly, however, i want to extract only TEXTBBBBBB
})
})
Now, when I cy.get([class="clearfix nav navbar-nav navbar-nav-center mx-auto"]).each($el) I could get TEXTAAAAA TEXTBBBBBB TEXTCCCCCC. However, now, I only want to get the second element within the class , in this case, TEXTBBBBBB. I tried to reference the way from here but cypress couldn't found the path.
Any ideas on how to get specific element within a class using cypress is a great help! Thanks a million!
If you want to extract the text for a particular element, you can do it by using the index value, it should look something like this. Here we ae extracting the second element.
cy.get('locator').each(($el, index) => {
if (index == 1) {
cy.wrap($el).invoke('text').then((text) => {
//do something with the text
})
}
})
I have an application in vue in which I show different links in the header.
depending on the environment the root of the link varies, so I have saved an environment variable with the value of this root of the link.
I import it in the component to use the reference to this variable, but I can't find the way to include it in the href tag.
in my component's script I import the config file where the variable is declared and return
<script>
import Config from './../../config.js';
export default {
data: function () {
return {
hoverHome: false,
testUrl: Config.TEST_URL
}
},
the value brought by the environment variable at this time is https://www.test.sp, and in my template I try to use it but I don't find how to do it neither in case of being the only value nor combining it with a url termination
<li class="nav-item">
<a class="nav-link head" href=testUrl>Business</a>
</li>
<li class="nav-item">
<a class="nav-link head" href=testUrl/shops>Shops</a>
</li>
how can i use this variable inside the href tag?
You need to bind the href value using the v-bind:href or shortly :href for v-bind
So simply you can bind any variable that has some link to your href like
<a v-bind:href="'/anylink/' + testUrl">
You need to use v-bind: or its alias :. For example,
<li class="nav-item">
<a class="nav-link head" v-bind:href="testUrl">Business</a>
</li>
<li class="nav-item">
<a class="nav-link head" v-bind:href="testUrl + '/shops'">Shops</a>
</li>
or
<li class="nav-item">
<a class="nav-link head" :href="testUrl">Business</a>
</li>
<li class="nav-item">
<a class="nav-link head" :href="testUrl + '/shops'">Shops</a>
</li>
See How to pass a value from Vue data to href?
I have my navbar on my base.html, so I extend it on all other pages.
But I have a class "active" on the home page, so it also stays active in all other pages.
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="http://127.0.0.1:8000/backend/">
<i class="ni ni-shop text-primary"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://127.0.0.1:8000/backend/clientes">
<i class="ni ni-ungroup text-orange"></i>
<span class="nav-link-text">Clients</span>
</a>
</li>
</ul>
How can I change the active class to a different menu item based on the page I am?
There's no one-size-fits-all answer to your question, it really depends on your project's structure, url hierarchy etc. But usually, the best solutions are either a custom template tag taking the request as argument (and/or other context variables or plain constants, depending on your own project's logic) to compute the current "section" and render the navbar accordingly.
Send name as variable and value with active.
def index(request):
# your code
context = {
'dashboard': 'active',
}
return render(request, 'index.html', context)
def clients(request):
# your code
context = {
'clients': 'active',
}
return render(request, 'clients.html', context)
Use variable like this:
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link {{ dashboard }}" href="http://127.0.0.1:8000/backend/">
<i class="ni ni-shop text-primary"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link {{ clients }}" href="http://127.0.0.1:8000/backend/clientes">
<i class="ni ni-ungroup text-orange"></i>
<span class="nav-link-text">Clients</span>
</a>
</li>
</ul>
OPTION 1
You can use django contex_processors.
add your settings.py
TEMPLATES = [
{
#other settings
'BACKEND': 'django.template.backends.django.DjangoTemplates',
#other settings
'OPTIONS': {
'context_processors': [
#other options
'context_file_path.defaults',
],
},
},
]
in your context_file.py
def defaults(request):
active_bar = "" # your active bar logic
return {
'active_bar': active_bar,
}
with this method, each request decide which bar active. And active_bar variable is being passed to your template. In your template you can add active class if active_bar variable equals your bar name. Like that:
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link {% if active_bar == 'dashboard' %}active{% endif %}" href="http://127.0.0.1:8000/backend/">
<i class="ni ni-shop text-primary"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item {% if active_bar == 'clients' %}active{% endif %}">
<a class="nav-link" href="http://127.0.0.1:8000/backend/clientes">
<i class="ni ni-ungroup text-orange"></i>
<span class="nav-link-text">Clients</span>
</a>
</li>
</ul>
OPTION 2
You can write a custom js file and add your base html. In this js file you can detect url and decide active pane. After that you can add active class to list pane.
I am trying to implement routing in my project. I have implemented navigation tabs. I cant seem to solve this below problem. Whenever i click on other tabs, home tab is always active.
I have tried to add routerLinkActiveOption, which everywhere is the working solution. But its not just for me.
<ul class="nav nav-tabs">
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a class="nav-link active" [routerLink]="['/']" data-toggle="tab" role="tab">Home</a></li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link " [routerLink]="['/users']" data-toggle="tab" role="tab">Users</a></li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link " [routerLink]="['/servers']" data-toggle="tab" role="tab">Servers</a></li>
</ul>
Routes:
const routes: Routes = [
{path : '' , component:HomeComponent},
{path : 'users', component:UsersComponent},
{path : 'servers', component:ServersComponent}
];
You need to use routerLinkActiveOptions
<li><a routerLinkActive="active" routerLink="product" [routerLinkActiveOptions]="{exact:true}">Shop</a></li>
Your first route should look like this
{path : '' , component:HomeComponent, pathMatch: 'full'}
Take a look at this Link for explanation what pathMatch: 'full' exacly does.
I am currently finishing the Authentication side of my server and could use some help.
I'm trying to disable and enable specific tabs depending on wether an User is authenticated. As I was following a video (part 8), the author was using if conditions ( {{#if}} {{/if}} ) in the HTML file to check if a variable in the app.js file was true or not.
I tried it but with no success. Is there a I need to pass in the top of the HTML file? Or is there a better way of doing it?
app.js:
app.use(function(req, res, next) {
res.locals.isAuthenticated = req.isAuthenticated(); //variable in question
next();
});
HTML:
<ul class="nav navbar-nav navbar-right">
{{#if isAuthenticated}} //check if this variable is true or not and if so, show the following elements
<li class="nav-item" class="navbar-right">
<a class="nav-link" href="/Profile">Profile</a>
</li>
<li class="nav-item" class="navbar-right">
<a class="nav-link" href="/Logout">Logout</a>
</li>
{{else}}
<li class="nav-item" class="navbar-right">
<a class="nav-link" href="Register.html">Register</a>
</li>
<li class="nav-item" class="navbar-right">
<a class="nav-link" href="Login.html">Login</a>
</li>
{{/if}}
</ul>
Thanks in advance!
Edit 1: Better explanation
The best option is to use view engine (e.g. EJS) and then render the view with given variables.
app.set('view engine', 'ejs')
^ to set view engine (firstly npm install ejs)
app.set('views', './views')
^ allows you to set your views directory
Then create views directory and, for example, index.ejs file:
<h1> <%= title %> </h1>
Next, write your route:
app.get('/', (req, res) => {
res.render('index', { title: 'Sample title' }) // refers to views/index.ejs
})
Within render method you can pass an object (2nd argument) with parameters that you can use in your view. Further info: http://www.embeddedjs.com/