asp.net MVC、引导程序和 CSS。下拉列表问题答案

【问题标题】：asp.net MVC, Bootstrap and CSS. Drop down list issueasp.net MVC、引导程序和 CSS。下拉列表问题
【发布时间】：2016-02-08 22:13:32
【问题描述】：

我想弄清楚为什么 Chrome 不能正确呈现我的下拉列表。

但是，它在 IE 中正确呈现

这是显示此列表的代码行

@Html.DropDownListFor(model => model.CountryID, new SelectList(Model.CountryList, "Value", "Text"), new { @class = "form-control", size = "18px" })

我正在使用在 Visual Studio 2013 中启动新项目时提供的默认 Boostrap.css 文件。知道如何正确渲染吗？

【问题讨论】：

也显示渲染的 html 输出。看起来一个被渲染为“多个”而一个不是。奇怪。
去掉size = "18px"（无效，正确用法是size="18"是你想显示18个项目，但是你不想显示任何项目，就把它删掉）
Stephen Muecke，这就是我一直在寻找的答案。我想我忽略了这个事实。能否请您将此作为答案，以便我可以接受？

标签： css asp.net asp.net-mvc twitter-bootstrap

【解决方案1】：

您创建了无效的 html，并且无法保证各种浏览器（甚至同一浏览器的版本）将如何处理无效的 html。

您的DropDownListFor() 方法正在添加一个size 属性，该属性需要一个整数值，因此size="18px" 无效，它必须是size="18"。但是size 属性定义了在多选中显示的项目数，因此由于您不想要多选，只需删除该属性即可。你的代码应该是

@Html.DropDownListFor(m => m.CountryID, new SelectList(Model.CountryList, "Value", "Text"), new { @class = "form-control" })

旁注：您的new SelectList(Model.CountryList, "Value", "Text") 代码表明CountryList 已经是IEnumerable<SelectListItem>。如果是这样的话，从现有的SelectList 创建一个新的SelectList 是毫无意义的额外开销，所以你的代码应该是

@Html.DropDownListFor(m => m.CountryID, Model.CountryList, new { @class = "form-control" })

【讨论】：

【解决方案2】：

您需要添加htmlAttributes 才能在剃刀中设置您的课程。因此，将您的代码更改为：

@Html.DropDownListFor(model => model.CountryID, new SelectList(Model.CountryList, "Value", "Text"), htmlAttributes:new { @class = "form-control", size = "18px" })

【讨论】：