How to apply Bootstrap dropdown style to an ASP.NET MVC DropDownList?

Question

Given is the following MVC razor code which creates a dropdown from a list:

@Html.DropDownList("MyTestList", null, new { @class = "btn btn-default dropdown-toggle" }) 

This will create the following dropdown:

When using the code from getbootstrap.com:

<div class="dropdown">     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">         Dropdown         <span class="caret"></span>     </button>     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">test1</a></li>         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">test2</a></li>     </ul> </div> 

It will show the dropdown like this:

Question: Is it possible to get the same look and feel when using @Html.DropDownList as when using the HTML code from MVC?

Answer 1

It is very much possible, and really easy. Please Read: DropDownList bootstrap styling

All you need is:

@Html.DropDownList("movieGenre", "All", new { @class = "form-control"}) 

or

@Html.DropDownListFor(model => model.MovieGenreModel, SelectList, new { @class = "form-control"})