3

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.

1 Answers1

18

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

lucidgold
  • 4,432
  • 5
  • 31
  • 51
  • 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 –  Jun 23 '14 at 19:27
  • 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? –  Jun 23 '14 at 19:43
  • 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 – lucidgold Jun 23 '14 at 19:47
  • Yeah it looks correct, however the genres from the database are not being displayed in it. –  Jun 23 '14 at 19:50
  • Can you updated your code in your questions so we can see where you are – lucidgold Jun 23 '14 at 19:55
  • try @Html.DropDownList("movieGenre", "All", new { @class = "form-control"}) – lucidgold Jun 23 '14 at 20:18
  • Can I just ask which file I need to place the overload in? –  Jun 23 '14 at 20:21
  • You can add a new DropDownList class and the overload is the new constructor – lucidgold Jun 23 '14 at 20:46
  • Still unsure how to get the overload to work, sorry I'm completely new to this haha. –  Jun 23 '14 at 22:11
  • 2
    If you are using DropDownListFor, you need to specify a model property...Typically, @Html.DropDownListFor(model => model.Genre, SelectList, etc...) – Paul Jun 23 '14 at 22:54