Use Bootstrap-select with MVC Dropdown List

Question

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 comma 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?

Solution

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.

Comments

[Ctrl_Alt_Defeat]

Hi justin that worked - why do I need to create it using the underscore? Also any ideas why intellisense is warning about selectpicker being an unknown css class (will mark you answer as accepted)

[Justin Helgerson]

@Ctrl_Alt_Defeat The underscore is needed because in C# you can't use a dash for property names. The framework is smart enough to translate the underscore into a dash for the HTML though. I'm not sure why the intellisense giving you a warning because I'm not quite sure how Visual Studio tries to incorporate all of the possible stylesheets (some could be from the layout, on the view itself, or in a style bundle defined server-side). Personally I ignore the many warnings from Visual Studio that relate to the client.