twitter-bootstrap 将 Bootstrap-select 与 MVC 下拉列表一起使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24834362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use Bootstrap-select with MVC Dropdown List
提问by Ctrl_Alt_Defeat
I am attempting to use Bootstrap-Selectin a Web Application I am developing in MVC to style a dropdown list for like a bootstrap dropdown as the rest of my Application is using bootstrap. I have a Car Manufacturers dropdown in my Layout page which calls a Html.Action to go do a controller and builds the list of manufacturers from a Table in my DB and returns the Partial View Below: - note on clicking on one of the values in Dropdown form is submitted and User is navigated to next screen.
我正在尝试在我正在 MVC 中开发的 Web 应用程序中使用Bootstrap-Select来设置下拉列表的样式，就像引导程序下拉列表一样，因为我的应用程序的其余部分正在使用引导程序。我的布局页面中有一个汽车制造商下拉列表，它调用 Html.Action 来执行控制器并从我的数据库中的表构建制造商列表并返回下面的部分视图： - 请注意单击中的一个值下拉表单被提交，用户被导航到下一个屏幕。
<script type="text/javascript" src="~/Scripts/bootstrap-select.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap-select.css"/>
<script type="text/javascript">
$(document).ready(function() {
$('.selectpicker').selectpicker();
$('#carManufacturers').change(function () {
$(this).closest('form').submit();
});
});
</script>
@using (Html.BeginForm("Index", "Cars", FormMethod.Post))
{
@Html.DropDownListFor(model => model.SelectedCarManufacturer, Model.CarManufacturersList, "Select Car Manufacturer", new { id = "carManufacturers", @class = "selectpicker" })
}
This is mostly working in that the Dropdown seems to be styled in bootstrap - one thing I am not sure of is how to add the data-style="btn-inverse"attribute to my dropdown - attempted to add a comma after the @class="selectpicker' and define it but it did not work.
这主要是因为 Dropdown 似乎在引导程序中设置了样式 - 我不确定的一件事是如何将data-style="btn-inverse"属性添加到我的下拉列表中 - 试图在 @class="selectpicker' 之后添加一个逗号并定义它但它不工作。
Also for some reason intellisense underlines selectpicker and states 'unknown css style selectpicker'?
同样出于某种原因，智能感知在 selectpicker 下划线并说明“未知的 css 样式选择器”？
Also when rendering the dropdown is looking like below - how can I get rid off the second Select Car Manufacturer Text which is getting added?
此外，在呈现下拉列表时，如下所示 - 如何摆脱添加的第二个选择汽车制造商文本？
回答by Justin Helgerson
To add the data-styleattribute simply do:
要添加data-style属性，只需执行以下操作：
@Html.DropDownListFor(model => model.SelectedCarManufacturer, Model.CarManufacturersList, "Select Car Manufacturer", new { id = "carManufacturers", @class = "selectpicker", data_style = "btn-inverse" })
Notice the underscore which will automatically be translated into a dash.
注意下划线，它会自动转换成破折号。
As for the duplicate "Select Car" text, from your picture there is no duplicate. It's showing you the currently selected value and the list of values underneath it. That's how the select list is intended to function.
至于重复的“选择汽车”文本，从您的图片中没有重复。它向您显示当前选定的值及其下方的值列表。这就是选择列表的作用方式。
