I have a default internet application template from MVC4 and I would like to add some links to the <nav> tag depending on the user logged in.
I.e all the users have a default navigation panel, but if it is an admin logged in, he should have extra link for Managing product stock.
Right now it looks like that(from _Layout.cshtml):
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Browse", "Product")</li>
...
</ul>
</nav>
And I need somehow insert new ActionLink. I've tried to make an if statement inside the default layout, but it does not work. How could I add an extra <li> tag inside this <nav>? I am not familiar with JavaScript or JQuery, but can it be done using MVC features?
Yes this can be achieved using the razor syntax
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Browse", "Product")</li>
#if( User.IsInRole("Admin") ){
<li>#Html.ActionLink("Admin", "...", "...")</li>
}
</ul>
</nav>
Related
I'm stuck with this problem for over 2 hours and can't find the answer anywhere.
I have a project that uses Identity. I have created a register and login not using Identity scaffolded items from the beginning.
Next, I added custom fields to user identity using ApplicationUser:IdentityUSer.
Now I want to allow users to manage their profiles. I wanted to use the default Identity Manager and then customize it. I didn't have it though so I added a new scaffolded Identity with only "Identity/Pages/Account/Manage" item. It has created an area.
The problem is that I don't know how to access the Index page inside this area in my _LoginPartial view.
Part of _LoginPartial code:
#if (SignInManager.IsSignedIn(User))
{
<ul class="navbar-nav flex-grow-1 justify-content-end text-center">
<li class="nav-item mr-5 text-center">
<a //here i want to access Index page class="nav-link btn">Hello, #User.Identity.Name</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="Logout">Logout</a>
</li>
</ul>
}
else
{
}
My project structure:
Is this a good way to manage user profile though?
To have your first <a> tag link to your new Account | Manage page, you can include the asp-area, asp-controller and asp-action attributes. (similar to what you already have on your second <a> tag).
Try changing the line to this:
<a asp-area="Identity" asp-controller="Account" asp-action="Manage" class="nav-link btn">Hello, #User.Identity.Name</a>
So moving over to MVC finally from web forms
so within my main _Layout.vbhtml I have a menu as follows:
<i class="material-icons">person</i> Account
<ul>
<li>Sign In / Sign Up</li>
<li>Profile Page</li>
<li>Orders List</li>
<li>Order Detail</li>
<li>Wishlist <span class="badge badge-primary badge-pill">3</span></li>
<li>Address</li>
</ul>
I want this to now come from the DB dynamically
in the web forms world this would have been a master page, I would have then added a literal and then populated it on the page load in the code behind.
But how do I archive the same now in MVC
ended up doing this in _layout.html, works but unsure if its the correct way :-)
#Code
Dim listGroups As List(Of ProductGroups) = ProductGroups.MenuList()
End Code
then further down the page:
<li>
<i class="material-icons">shopping_cart</i> Shop
<ul>
#For Each item In listGroups
#<li>#Html.DisplayFor(Function(modelItem) item.Group)</li>
Next
</ul>
</li>
as I said does what i expect but not sure if that's how your 'supposed' to do it?
I can't get the anchor Tag helper to work in combination with data-toggle = tag.
I manage to set the active class on the correct tab but my code on my controller will never be run. What am I missing?
<div class="navbar">
<div>
<ul class="nav nav-tabs">
<li class="active"><a asp-controller="Customer" asp-action="Device" asp-fragment="PlantInfo" data-toggle="tab" >Enhetsinformation</a></li>
<li><a asp-controller="Customer" asp-action="Start" data-toggle="tab" >Larm</a></li>
<li><a asp-controller="Customer" asp-action="Start" data-toggle="tab" >Historik</a></li>
<li><a asp-controller="Customer" asp-action="MeterReading" asp-fragment="MeterReading" data-toggle="tab" >Avläsningar</a></li>
<li><a asp-controller="Customer" asp-action="Start" data-toggle="tab" >Ärenden</a></li>
</ul>
</div>
</div>
Tabs are not really supposed to actually hit your controller. The whole point is that you're switching between content on page. The Bootstrap tab javascript is going to prevent the default action of the link such that it doesn't actually take you to a new page, but just loads the reference content area. That's also why the actual href of your tab links should be targets, point to the ids of the various content areas on your page:
Content 1
...
<div id="content1">
Tab content
</div>
If I had to guess at your confusion here, I'd imagine you're thinking that by linking to an actual controller action, that content should be fetched from the server and rendered on the page when you click that tab. That's incorrect and not how Bootstrap tabs work. If you wanted it to function that way, you'd need your own JavaScript to define the tab switching behavior (Bootstrap's code will not work anymore for this) and as part of that, you'd need to issue AJAX requests to fetch that content. That's all on you. It doesn't happen automatically.
I am using bootstrap tabs in my ASP.NET MVC project. In this tab, I need to give external link so when users click on particular tab it will redirect to particular link.
Basically I have four controller. Now I need to redirect to each controller when user clicks on tab.
Below is the code I tried to use but it is not working :
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
Update :
If we remove data-toggle="tab", then it will loose tab functionality. I mean when i click on tab, it loads page and redirect. So my question is, can we redirect to other controller without loading page like what we are doing now and make it works like tab?
Just remove the data-toggle="tab" attribute and it will work as you expected.
Demo
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home
</li>
<li>Profile
</li>
<li>Messages
</li>
<li>Settings
</li>
</ul>
I'm using Zend/Navigation in Zend Framework 2. It prints this:
<ul class="Navigation">
<li>
Home Page
</li>
<li>
Contact
</li>
</ul>
But i want to put a <span> element inside every <li> like this:
<ul class="Navigation">
<li>
<span>
Home Page
</span>
</li>
<li>
<span>
Contact
</span>
</li>
</ul>
Is there any way to do that without using a "partial" solution?
There's no other way, how to change html output from menu view helper (except indentation and <ul> class).
Well, of course, you can write your own menu view helper - extend Zend\View\Helper\Navigation\Menu and override htmlify method:
https://github.com/zendframework/zf2/blob/release-2.2.5/library/Zend/View/Helper/Navigation/Menu.php#L472,
but I think, partial template is much better and easier solution.
For anyone who is intrested this guy has created a helper doing this job. http://cmyker.blogspot.gr/2012/11/zend-framework-2-navigation-menu-to.html