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
Related
I have a Main View and Two Partial Views.Main Views Consist of Navigation Links.
PartialViews1 Consist a Button and I need when button click it need to shows the PartialView2
PartialView1 has a Button and when i click the button i need to PartialView2(Shoe PartialView2)
Main View
<div class="container my-3">
<div class="card">
<div class="card-header bg-white border-bottom flex-center p-0">
<ul class="nav nav-pills card-header-pills main-nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#">CART</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript:void(0)"><i data-feather="arrow-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DELIVERY</a>
</li>
</ul>
</div>
<div class="card-body px-1 px-md-5 pt-5">
#Html.Partial("_PartialView1")
#*#Html.Partial("_PartialView2)*#
</div>
</div>
</div>
PartialView1
//Some code here
Delivery<i data-feather="arrow-right"></i>
Jquery
$("#iddelivery").click(function(){
});
Write an action and return PartialView2, write a function to ajax call to that action
As mentioned there are many ways to do it.
If you don't want to reload/refresh the page with new content the easiest way is to create an ActionResult in your controller and return a partial view.
in your jQuery function the first thing you need to do is to call the preventDefault function to prevent any default action on your button. the next thing is to make a ajax call and receive the view-content from your controller. then you can replace the content of your div with the result you got from controller.
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
This is my first attempt at creating a Core 2.0 MVC application. I have the following in my index.cshtml:
#if (User.IsInRole("Admin"))
{
<ul class="nav navbar-nav navbar-right">
<li><a asp-area="" asp-controller="Account" asp-
action="Register">Register</a>
</li>
</ul>
}
When User.IsInRole("Admin") is true, it does not fall into the if statement. I have even tried the following and it still doesn’t fall into the statement
#if (1 == 1)
{
<ul class="nav navbar-nav navbar-right">
<li><a asp-area="" asp-controller="Account" asp-
action="Register">Register</a>
</li>
</ul>
}
I only want to show the Register link if the current user is an admin. Why isn’t it falling into the if statement?
The code looks fine, which suggests something in the build/deploy stages.
What happens if you make a change to the index outside the if?
What happens when you put a breakpoint in and step through the code?
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.