Use Bootstrap-select with MVC下拉列表

Question

我正尝试在一个用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" })
}

这在很大程度上是因为下拉列表似乎是在bootstrap中设置的样式-我不确定的一件事是如何将data-style="btn-inverse"属性添加到我的下拉列表中-尝试在选择器“@class=”后面添加一个逗号并定义它，但它不起作用。

另外，出于某些原因，intellisense在selectpicker下划线，并声明“未知css样式selectpicker”？

此外，当渲染下拉菜单时，如下图所示-我如何摆脱添加的第二个Select Car added文本？

​

Answer 1

要添加data-style属性，只需执行以下操作：

@Html.DropDownListFor(model => model.SelectedCarManufacturer, Model.CarManufacturersList, "Select Car Manufacturer", new { id = "carManufacturers", @class = "selectpicker", data_style = "btn-inverse" })

请注意下划线，它将自动转换为破折号。

至于重复的"Select Car“文本，从你的图片中没有重复。它向您显示当前选定的值及其下面的值列表。这就是选择列表的工作方式。