DropDownList引导样式 [英] DropDownList bootstrap styling

问题描述

我是ASP.NET的新手，并且一直在ASP.net MVC 5入门教程ASP.net网站上。

我遇到一个问题，我似乎不喜欢用bootstrap风格我的下拉框。我目前使用的代码下面的工作显示在一个标准的下拉，但我不确定如何让样式工作。

旧代码：

 类型：@ Html.DropDownList（movieGenre，All）
  pre> 
 
 
编辑：
 
 
 
 @Paul找到解决方案：
  @ Html.DropDownList（movieGenre，（SelectList）ViewBag.movi​​eGenre，Select genre，new {@class =form-control}）
 
解决方案
 / div> 
您需要应用CSS类 form-control 。尝试这样：
  @ Html.DropDownList（movieGenre，All，new {@class =form-control }也可以尝试 DropDownListFor      strong>，但必须显式设置模型属性：
  @ Html.DropDownListFor（model => model.MovieGenreModel，SelectList ，new {@class =form-control}）
  
感谢@Paul的更正。 
 
 
 
 
 
 
您可能必须 EXTEND 现有的HTML控制/更新重载/构造函数，如下所示： / p> 
 
 
  public static MvcHtmlString DropDownList（
 this HtmlHelper htmlHelper，
 string name，
 IEnumerable< SelectListItem> ; selectList，
 string optionLabel，
 object htmlAttributes //< ---------------你需要在这里添加这里
）
  
有关更多帮助，请阅读有关MVC HTML Helpers，并查看：
 
 
 StackOverflow：添加您自己的ASP.NET MVC中的HtmlHelper  
 
 
 在我们的ASP.NET MVC视图的下拉列表中显示枚举 
 
 
 检查ASP.NET MVC如何构建DropDownList助手 
 
 
 使用自定义数据元素下拉列表 
 
 
 StackOverflow ：扩展方法中的HtmlAttributes  -  Bootstrap& MVC 5  
 
 
 
 
 
 
 
 
 另一种选择是请查看   TwitterBootstrapMVC   
 
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.
解决方案
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 for @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:

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




Another option would be to take at a look at TwitterBootstrapMVC

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