使用 Razor DropDownList 引导答案

【问题标题】：Bootstrap with Razor DropDownList使用 Razor DropDownList 引导
【发布时间】：2014-09-07 02:25:20
【问题描述】：

我需要将 Bootstrap 样式应用于 Razor @Html.DropDownList。

我已将form-control 类应用于控件：

@Html.DropDownList("FacilityID", null, string.Empty, new { @class = "form-control" })

这会使用 Bootstrap 样式正确显示选择列表。问题是列表上的可选子项没有样式。

在查看生成的 HTML 源代码时，呈现的选项未设置样式：

<option value="1">Some Option</option>

有没有办法让 Bootstrap 在 ASP.Net MVC5 Razor 视图中正确设置整个下拉列表的样式？

【问题讨论】：

您是否尝试将选择样式设置为shown here？
我没有使用该组件，我使用的是本机 Bootstrap，我的目标是这里显示的外观：getbootstrap.com/components/#dropdowns
从该链接可以看出，html 不是包含 <option> 元素的 <select>。您无法设置这些元素的样式，因为它们是由操作系统而不是 HTML 呈现的。当您看到样式选项时，通常是因为已将 jquery 插件应用于 <select>，该插件通常隐藏 <select> 并用自己的 html 替换它
好的，有道理，谢谢。
请记住，仅此一项就意味着您将无法回发任何内容，因此它有点毫无意义。插件通常处理“假”选项的点击事件并更新“真实”（但隐藏）选择值。如果您想要一个功能性但样式化的选择，请查看我的第一条评论中的链接 - 但是您可以使用许多其他 jquery 选择控件。

【解决方案1】：

如果它可以帮助任何人......我最终选择了bootstrap-select 组件。

Razor 语法是：

@Html.DropDownList("FacilityID", null, string.Empty, new { @class = "selectpicker" })

我不喜欢 Bootstrap 将默认渐变应用于此组件生成的 button 元素，因此我在 CSS 中对其进行了修改，使其看起来像常规的 Bootstrap form-control 样式元素：

.bootstrap-select > .btn {
  background-image: none;
}

【讨论】：

【解决方案2】：

真的很简单，只需在 Razor 末尾添加以下内容DropDown：

,new { @class = "form-control" }  )

【讨论】：