How to apply bootstrap dropdown style to dropdown in mvc razor

Question

I am trying to apply bootstrap style(same as the one given here) to a dropdown. I am using razor syntax to display the dropdown. The items of the dropdown are coming from another .cs file.
I have followed some of the posts here in SO, but still not getting the right way to do it.
It is just getting displayed as a plan dropdown without any bootstrap style applied.

<div class="col-md-2 col-lg-2">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
            @Html.DropDownListFor(m => m.Menu, new SelectList(Dropdown.DDMenu(), "Value", "Text"), new { @class = "form-control" })
        </button>

</div>

The dropdown menu is not displayed when I add the <button></button> but when I remove it, it works.

Your code will create a select tag inside the button and that is not valid. You should follow the documentation and use <ul> and <li> instead — AnotherGeek
– AnotherGeek, Commented May 19, 2016 at 12:07
@oussama_gd but the dropdown items are defined in a separate class file, how can I follow <ul> and <li>? din't get you. In the entire application we have defined all the dropdowns in a separate file and I cannot declare the dropdown items inside the view — Sumedha Vangury
– Sumedha Vangury, Commented May 19, 2016 at 12:20

AnotherGeek · Accepted Answer · 2016-05-19 12:45:38Z

6

I mean something like this

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
        Dropdown Example
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        @foreach (var item in Dropdown.DDMenu())
        {
            <li><a href="#" data-value="@item.Value">@item.Text</a></li>
        }
    </ul>
</div>

answered May 19, 2016 at 12:45

AnotherGeek

9041 gold badge6 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to apply bootstrap dropdown style to dropdown in mvc razor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related