Bootstrap-select Razor/.Net Core 中的属性

Question

我在应用 bootstrap-select attributes for drop down list form inputs in my .NET Core project. In particular I would like to apply the live search 属性时遇到问题。

1 - 我尝试了以下代码。它位于 Razor 页面中，建议使用“_”语法。这成功应用了 Bootstrap 样式（见屏幕截图）但没有应用附加属性：

                @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",
           })

这是屏幕截图。它显示 Bootstrap 样式已成功应用，但不是实时搜索功能。此列表最终将包含约 600 个选项，因此需要搜索功能。

2 - 我还尝试应用以下代码 - 在空白的 Razor 页面中 - 直接从 bootstrap-select documentation 提取。结果是一样的：它应用 Bootstrap 样式但不应用实时搜索功能。或者我尝试过的任何其他属性：

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

这几天我尝试了各种方法。有没有人有什么建议？谢谢。

Answer 1

我找到了问题的根源。我安装了 NuGet 包。我卸载了 NuGet 包。然后我通过链接添加了依赖项：

<!-- 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>

bootstrap-select documentation 中解释了安装所需依赖项的各种方法。

我之前曾尝试通过链接添加依赖项。但是，我认为它与已经安装的 NuGet 依赖项发生冲突。

Bootstrap-select Razor/.Net Core 中的属性

Bootstrap-select attributes in Razor/.Net Core

twitter-bootstrap

razor

bootstrap-select