Asp.net - bootstrap navbar dropdown menu not working properly

Question

0.00/5 (No votes)

See more:

Been toying around with this for a bit and have had quite a bit of success so far but there's just one problem I personally can't seem to fix.

I'm using bootstrap to create my navbar and everything in it which works fine for the most part, until I come to the point where I am using dropdowns.

What I want it to look like is something like this.

The most optimal result I have gotten so far though looks like this.

What I have tried:

@model MessePrototyp.Models.MenuItem

<li class="dropdown-submenu">

    <a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown">@Model.Caption</a>

    <ul class="dropdown-menu">
        @foreach (var subitem in @Model.MenuItems)
        {
            if (subitem.MenuItems.Count != 0)
            {

                @await Html.PartialAsync("MenuItem", @subitem)

            }
            else
            {
                <li><a a class="dropdown-item" asp-area="" asp-controller="@subitem.Controller" asp-route-id="@subitem.Notation" asp-action="@subitem.Action">@subitem.Caption</a></li>


            }


        }
    </ul>
</li>

This is the code that producess my "optimal" result. The problem, or at least the bit of code that generates the duplicate subpoint seems to be the bolded line. I have however not been able to find a way to work around it as anything I have tried has given me results that are even further away from what I am looking for.

Posted 7-Nov-18 19:51pm

Member 13777741

Updated 8-Nov-18 6:04am

Add a Solution

Comments

Richard Deeming 9-Nov-18 8:41am

Are you using Bootstrap 4[^] or Bootstrap 3[^]?

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Vincent Maverick Durano · Answer 1 · 2018-11-08T06:04:00

You can try something like this:

HTML

<div class="btn-group">
  <button type="button" class="btn">Konfiguration</button>
  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
   @foreach (var subitem in @Model.MenuItems)
        {
            if (subitem.MenuItems.Count != 0)
            {

                @await Html.PartialAsync("MenuItem", @subitem)

            }
            else
            {
                <li><a asp-area="" asp-controller="@subitem.Controller" asp-route-id="@subitem.Notation" asp-action="@subitem.Action">@subitem.Caption</a></li>

            }

        }
  </ul>
</div>

Asp.net - bootstrap navbar dropdown menu not working properly

1 solution

Solution 1

Add your solution here

Preview 0

Asp.net - bootstrap navbar dropdown menu not working properly

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us