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.
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
I would like to visualize data from my model in my layout page - specifically when user adds an item to the shopping cart I would like to count number of items in the shopping cart and display it in the navbar next to the image of shopping cart.
User can add the product from more then 1 page (e.g. from Index page, or Product/index page etc.).
Anyone dealt with something similar?
I would like my navbar to look like this :
Navbar
<div class="navbar-collapse collapse show" id="navbarColor01" style="">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a asp-page="/Index" class="nav-link" >Home <span class="sr-only">(current)</span></a>
</li>
<li>
<a asp-page="/ShoppingCart/Index"> <i class="fas fa-shopping-cart fa-1x fa-cog "></i></a>
<div class="badge badge-danger badge-pill">5</div> //here is the number to be displayed
</li>
</ul>
</div>
There are different ways to achieve this, evaluate your options then decide what to do.
You can achieve this by:
Using view bags. This would cause code reputation throughout your project. Because you are going to set the view bag for each page visit.
Using partial views. By calling Ajax request to the action, and then return partial view. Partial views usually intended to be part of the Controller/Page, which wouldn't make sense to have GetCart from different controller/page. Also it is best for avoiding view reputation.
View Component. This is usually the ideal way to do it, since you need to do work behind the scene then return the value. View Components can live in their own, which is good for SoC.
My personal recommendation would be View Component, it is a new feature in asp.net core (replacing ChildAction).
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;
}
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