DropDown Content is not working (MVC)
I'm working on my MVCOnlineShop Project. I'm trying to make a drop down list, Categories as the dropdown button and products as the drop down content , I got the categories working , but no drop down content. Am I missing something ?
and i made a
partial viewCategoryLayout.cshtml:@model IEnumerable<MVCOnlineShop.Models.Category>
@{
ViewBag.Title = "CategoryLayout";
}
@foreach (var Category in Model)
{
<li>
<div class="dropdown">
<button class="dropbtn">@Html.ActionLink(Category.CategoryName,
"ProductList", new { Category = Category.CategoryID })</button>
</div>
</li>
<div class="dropdown-content">
@foreach (var Product in Category.Products)
{
<li>@Html.ActionLink(Product.ProductName,
"Details", new { id = Product.CategoryID })</li>
}
</div>
}
and this is what i wrote in
_Layout.cshtml<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
@Html.Partial("CategoryLayout")
</ul>
</div>
</div>
can you help me please , I'm stuck. Am I missing something ?
Having now edit your code to be actually readable, I can see you aren't producing the same layout in your View as in the howto you mentioned at https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover.
The basic structure shown there is:
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
Comparing this with your code, I think your closing </li> needs to come after the end of the div which has the class "dropdown-content", and the "dropdown-content" div needs to be within the "dropdown" div. the "dropdown-content" should not include another <li>. <li> should only be a child of <ul> or <ol>, apart from anything else, plus I'm sure it's breaking the CSS which describes the dropdown effect. Lastly your Layout page has an orphan </div> at the end.
This should be more like it:
CategoryLayout.cshtml:
@model IEnumerable<MVCOnlineShop.Models.Category>
@{
ViewBag.Title = "CategoryLayout";
}
@foreach (var Category in Model)
{
<li>
<div class="dropdown">
<button class="dropbtn">@Html.ActionLink(Category.CategoryName,
"ProductList", new { Category = Category.CategoryID })</button>
<div class="dropdown-content">
@foreach (var Product in Category.Products)
{
@Html.ActionLink(Product.ProductName,
"Details", new { id = Product.CategoryID })
}
</div>
</div>
</li>
}
_Layout.cshtml:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
@Html.Partial("CategoryLayout")
</ul>
</div>
If you're not sure why I've changed what I have , I suggest you study the how-to's HTML markup a little more closely. As a debugging tool you can also use the "View Source" feature of your browser to compare what your code's final output looks like, vs what's in the how-to. Sometimes with Razor syntax in there, and loops etc it can be hard to visualise the final result. Also, your erratic formatting and indentation was making it unclear too.