Search code examples
twitter-bootstraprazorbootstrap-select

Bootstrap-select attributes in Razor/.Net Core

I'm having trouble applying bootstrap-select attributes for drop down list form inputs in my .NET Core project. In particular I would like to apply the live search attribute.

1 - I have tried the following code. It is in a Razor page, and the '_' syntax is advised here. This successfully applies the Bootstrap style (see screenshot) but not the additional attributes:

                @Html.DropDownListFor(m => m.Observation.BirdId, new SelectList(Model.Birds, "BirdId", "EnglishName"),
                    new {
                      @class = "form-control selectpicker",
                      data_width = "auto",
                      data_live_search = "true",
                    //data_show_subtext = "true",
           })

Here's the screenshot. It shows the Bootstrap style was successfully applied, but not the live search feature. This list will eventually contain ~600 options so a search feature is required.

enter image description here

2 - I have also tried applying the following code - in a blank Razor page - lifted directly from the bootstrap-select documentation. The result is the same: it applies the Bootstrap style but not the live search functionality. Or indeed any other attribute that I have tried:

  <select class="selectpicker" data-live-search="true">
        <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
        <option data-tokens="mustard">Burger, Shake and a Smile</option>
        <option data-tokens="frosting">Sugar, Spice and all things nice</option>
 </select>

I have tried all sorts over the last couple of days. Does anyone have any suggestions? Thank you.

Solution

  • I got to the bottom of the problem. I had the NuGet package installed. I uninstalled the NuGet package. Then I added the dependencies via the links:

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-*.min.js"></script>

    The various ways of installing the required dependencies are explained in the bootstrap-select documentation.

    I had previously attempted to add the dependencies via the links. However, I think it had conflicted with the already installed NuGet dependencies.