使用Bootstrap-select和MVC下拉列表

Question

我正在尝试在我正在MVC中开发的Web应用程序中使用Bootstrap-Select来设置下拉列表，就像我的应用程序的其余部分正在使用bootstrap一样引导下拉列表。我的布局页面中有一个汽车制造商下拉列表，它调用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" })
}

这主要是因为Dropdown似乎是在bootstrap中设置样式 - 我不确定如何将data-style="btn-inverse"属性添加到我的下拉列表中 - 尝试在@class =之后添加逗号“selectpicker”并定义它但它不起作用。

同样由于某种原因，intellisense强调selectpicker并声明'未知的css样式selectpicker'？

此外，当渲染下拉列表如下所示 - 我如何摆脱第二个选择汽车制造商文本？

Answer 1

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

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

注意下划线将自动转换为短划线。

对于重复的“选择汽车”文本，从您的图片中没有重复。它显示当前选定的值及其下方的值列表。这就是选择列表的运作方式。