在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似乎是在引導程序中設置樣式-我不確定的一件事是如何向我的dropdown中添加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" })

注意下划線，它將自動轉換為破折號。

至於重復的“選擇汽車”文字，圖片中沒有重復的文字。 它向您顯示當前選定的值及其下的值列表。 這就是選擇列表的作用方式。