在MVC下拉列表中使用Bootstrap-select

Question

我试图在我在MVC中开发的Web应用程序中使用Bootstrap-Select来设置下拉列表的样式，使其类似于Bootstrap下拉列表，而我的其他应用程序正在使用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似乎是在引导程序中设置样式-我不确定的一件事是如何将data-style="btn-inverse"属性添加到我的dropdown-尝试在@ 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" })

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

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