DropDownList bootstrap styling

Question

I'm new to ASP.NET and have been working my way through the Getting Started with ASP.NET MVC 5 tutorial on the asp.net site.

I've come across a problem were I can't seem to style my drop down box with bootstrap. I'm currently using the code below which works displaying it in a standard drop down but I'm unsure how to get the styling to work.

Old code:

Genre: @Html.DropDownList("movieGenre", "All")

Edit:

@Paul Found the solution:

@Html.DropDownList("movieGenre", (SelectList)ViewBag.movieGenre, "Select genre", new { @class = "form-control" })

Thanks for the help everyone.

Solution

You need to apply CSS class form-control. Try this:

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

---

Also try DropDownListFor, but a model property must be explicitly set:

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

Thanks to @Paul for the correction.

---

You may have to EXTEND existing HTML control/update overload/constructor as follows:

public static MvcHtmlString DropDownList(
    this HtmlHelper htmlHelper,
    string name,
    IEnumerable<SelectListItem> selectList,
    string optionLabel,
    object htmlAttributes  //     <--------------- You need to add this here
)

For more help read about MVC HTML Helpers and take a look at:

1. StackOverflow: Adding your own HtmlHelper in ASP.NET MVC
2. Showing Enums in a dropdownlist on our ASP.NET MVC view
3. Examining how ASP.NET MVC scaffolds the DropDownList Helper
4. Drop Down Lists with Custom Data Elements
5. StackOverflow: HtmlAttributes in Extension Method - Bootstrap & MVC 5

---

Another option would be to take at a look at TwitterBootstrapMVC

Comments

[Admin]

Thanks for the reply, getting the error message. does not contain a definition for 'DropDownList' and the best extension method overload has some invalid arguments

[Admin]

It's displaying correctly it just doesn't contain the list of genres! I'm having trouble with the 2nd block of code though. Where exactly do I want to put that?

[lucidgold]

Wait, so now it looks like a Bootstrap dropdown, but you are getting the error or no? You need to update the code to McvHTMLString DropDownList constructor

[Admin]

Yeah it looks correct, however the genres from the database are not being displayed in it.

[lucidgold]

Can you updated your code in your questions so we can see where you are

[lucidgold]

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

[Admin]

Can I just ask which file I need to place the overload in?

[lucidgold]

You can add a new DropDownList class and the overload is the new constructor

[Admin]

Still unsure how to get the overload to work, sorry I'm completely new to this haha.

[Paul]

If you are using DropDownListFor, you need to specify a model property...Typically, @Html.DropDownListFor(model => model.Genre, SelectList, etc...)