I have the following which show the navigation path of the user inside my _layout share view:-
<ul class="breadcrumb">
<li>
<a href="#">#ViewContext.Controller.ValueProvider.GetValue("controller").RawValue
</a> <span class="divider">/</span>
</li>
<li>
#ViewContext.Controller.ValueProvider.GetValue("action").RawValue
</li>
</ul>
but i have the following two questions:-
Is using ViewContext.Controller.ValueProvider.GetValue("controller").RawValue the right way to get the controller name
how i can build the href of the a links to point to the required path ?
Regards
You can get the controller name using the RouteData:
var controller = ViewContext.RouteData.Values["Controller"].ToString();
You can then build an ActionLink like so:
#Html.ActionLink("Click me", "View", controller)
Related
In an ASP.Net MVC Application, I'm trying to generate a top navigation bar from the database table. I follow the Database first approach. using EntityFramework
My scenario as follows :
I have 3 tables MainMenu, SubMenu and ItemMenu. The ItemMenu table knows it's MainMenu and the SubMenu. According to those details, the top menu bar should be rendered on the _Layout.cshtml page.
How to implement this..? Should I create a partial view for MenuBar or is there any other easy ways to accomplish this?
You can try Foreach loop to show main menu ,sub menu and child menu.
You can try very similar like bellow
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#foreach(var item in mainMenu)
{
<li class="dropdown">
#item.MainMenu1<b class="caret"></b>
<ul class="dropdown-menu">
#foreach(var subItem in item.SubMenu){
<li class="dropdown">
#subItem.SubMenu1<b class="caret"></b>
<ul class="dropdown-menu">
#foreach(var childItem in subItem.ChildMenu){
<li>#Html.ActionLink(#childItem, "Action", "Controller")</li>
}
</ul>
</li>
}
</ul>
</li>
}
</ul>
You can fix design as yourself.
Note: Get data from action as list of data using multiple object
What I am trying to do is, add a button on my nav bar if the user is on a certain page (view).
I set my nav bar in my _Layout.cshtml
<ul class="nav navbar-nav">
<li><a asp-controller="Home" asp-action="Index" class="navbar-brand">bethany's Pie Shop</a></li>
<li><a asp-controller="Feedback" asp-action="Index">Feedback</a></li>
</ul>
So something like #IfUser is on Details view, add this list item.
Other answers don't seem to work in .netcore 2.0
In the Razor view, just access :
#this.Path
This will provide Something like :
~/Views/MailBox/Index.cshtml
If the code is in a layout file, to access the page, just write :
#this.ViewContext.View.Path
Then you can compare with a given view easily
I am trying to build a language switcher inside the navbar.
My code is the following (in _LoginPartial.cshtml)
using ( Html.BeginForm( "SetCulture", "Home", FormMethod.Post ) ) {
#Html.AntiForgeryToken()
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<img src="#selectedImgSrc" alt="#culture" />
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><img src="~/assets/images/i18n/it-IT.png" alt="Italiano" /></li>
<li role="presentation"><img src="~/assets/images/i18n/en-US.png" alt="English" /></li>
</ul>
</li>
</ul>
}
<ul class="nav navbar-nav navbar-right">
<li>#Html.ActionLink( "Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" } )</li>
<li>#Html.ActionLink( "Sign in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" } )</li>
</ul>
#selectedImgSrc value is ~/assets/images/i18n/en-US.png
#culture value is en-us
However this code produce the following result
Which has a couple of problems:
On the nav the image is not showed but only the text (en-US)
The dropdown is too large and I dont like it. Is there any way to make it smaller?
On the nav the image is not showed but only the text (en-US)
I really can't see why the image isn't be shown on the nav, but I would suggest to you first check if it's included in the solution, then, inspect with your preffered developer tool what's the Html generated, and if it's properly generated, check the request about that image. If it's successfully requested, then your problem is in CSS.
Update:
Ok, I don't know exactly why I didn't see it before, but your images are using the tilde at the start of its path. While it's exactly what you need to specify for Asp.net that the path is absolute, in plain Html paths, it's just a common character, so it's looking for "http://example.com/~/assets/images/ ..." and not in the root of your domain. (There are some browsers/WebServers that can recognize it, but it's not a standard in URLs. Take a look in the most upvoted answer here: what is the use of "~" tilde in url? and also here: use of tilde (~) in asp.net path).
Also, It's a best practice to replace the hardcoded url with a Razor Helper like #Url.Content("~/assets/images/i18n/en-US.png"). Note that now I used the tilde, because the ASP.Net will translate to the correct absolute path.
*(I assumed that You are using razor because of #Html.ActionLink)
The dropdown is too large and I dont like it. Is there any way to make it smaller?
There is a rule for class "dropdown-menu" (.dropdown-menu), which has the property min-width set to 160px (min-width: 160px;).
So, it's just override this property with a new rule like:
Html:
<ul class="dropdown-menu UlLanguageMenu" role="menu">
In your CSS layout file:
ul.dropdown-menu.UlLanguageMenu{
min-width: auto;
}
Could anyone guide me how to use MVC html helper to implement to get the same html output below . I am a junior MVC developer trying to learn the stuff.
<ul class="nav fl mrgtp7m nodisp-ie7">
<li class="prdctType">
<a class="selected" id="A1">Infy Plus®</a>
<ul class="subnav" id="Ul1"><li><a>Infy Test Plus®
</a></li><li><a>Infy® Test General</a></li></ul>
</li>
</ul>
Tried it with HTML dropdown helper but did not get same result.Not sure how can i apply above CSS classes in helper class to achive the same above
<ul class='nav fl mrgtp7m nodisp-ie7'>
<li class='prdctType'>
#Html.DropDownListFor("Test", new SelectList(listItems , "Value" , "Text") )
</li>
</ul>
You don't need any helper classes for this. Use foreach with your model based on the logic that need to implement.
My project is an asp.net and it has a master page that contains a list
<ul id="navigation">
<li id="li1" runat="server" class="selected">Events</li>
<li id="li2" runat="server">Add Event</li>
<li id="li3" runat="server">Profile</li>
<li id="li4" runat="server">Friends</li>
<li id="li5" runat="server">Find Friends</li>
<li id="li6" runat="server">Schedual</li>
<li>
<asp:LinkButton ID="LogOutButton" runat="server" OnClick="LogOutButton_Click">Log Out</asp:LinkButton>
</li>
</ul>
The selected class (css class) has a picture this picture tells the user on which page he is. How can I change this class using javascript or C# when I navigate?
I don't have a good experience with javascript
document.getElementById("li6").className = "whatever";
Should work/
$("#li1").addClass("selected");
Will work.
Example
This is very simply in JavaScript/jQuery.
But if this is for navigation, meaning it needs to be updated when you display a new page, I would do this in the markup from the server.
You didn't say much about how you are serving this page. But both ASP.NET WebForms and MVC allow you to control the HTML served in a number of different ways.
You can set for all your li tags classes like this for example:
<li class="li">
... content of the tag
</li>
and in your javascript you can add to all elements with class "li" some other class:
$(".li").addClass("classYouWantToAdd");
and in the css file:
.li
{
... needed css for the class
}
here is another post that tells you how to get elements by classname
Selecting a div by classname