I am attempting to use Bootstrap-Select in 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.

<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 ma after the @class="selectpicker' and define it but it did not work.

Also for some reason intellisense underlines selectpicker and states 'unknown css style selectpicker'?

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?

I am attempting to use Bootstrap-Select in 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.

<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 ma after the @class="selectpicker' and define it but it did not work.

Also for some reason intellisense underlines selectpicker and states 'unknown css style selectpicker'?

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?

• javascript
• css
• asp-mvc
• twitter-bootstrap
• bootstrap-select

1 Answer 1

To add the data-style attribute simply do:

@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.