DROPDOWNLIST引导造型 [英] DropDownList bootstrap styling

问题描述

我是新来ASP.NET和一直在努力通过入门的ASP.NET MVC 5教程在asp.net网站我的路。

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.

我遇到的一个问题是，我似乎无法给我的样式下拉与引导框。我目前使用的code低于一个标准下降作品显示它下来，但我不能确定如何让造型工作。

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.

旧code：

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

编辑：

@保罗找到了解决办法：

@Paul Found the solution:

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

感谢大家的帮助。

Thanks for the help everyone.

推荐答案

您需要应用CSS类的形式控制。试试这个：

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

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

---

相关搜索 DropDownListFor ，但模型属性必须明确设置：

---

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

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

感谢@保罗的校正。

Thanks for @Paul for the correction.

您可能需要的扩展的现有HTML控制/更新过载/构造如下：

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
)

有关详细帮助了解MVC HTML助手，并看一看：

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

1. 计算器：添加你自己的HtmlHelper在ASP.NET MVC


2. 显示枚举在我们的ASP.NET MVC视图一个DropDownList


3. 检查ASP.NET MVC脚手架如何将DropDownList助手


4. 下拉列表中使用自定义数据元素


5. 计算器： HtmlAttributes在扩展​​方法 - 引导和放大器; MVC 5

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

的另一种选择是采取在看看的 TwitterBootstrapMVC

---

Another option would be to take at a look at TwitterBootstrapMVC

这篇关于DROPDOWNLIST引导造型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！