Ahmad Ahmad - 3 years ago 59
C# Question

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 view
called
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>
</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 ?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download