如何在 Visual Studio Net Core 中将 bootstrap-select 包含到 cshtml 中？页面上没有显示

问题描述

我有 Visual Studio 社区 2019。 我已经使用 .NET 5.0 创建了一个 ASP.NET Core Web App 项目。 所以包含了 bootstrap v4.3.1。

现在我想添加一个引导选择下拉菜单： https://developer.snapappointments.com/bootstrap-select/

我已经使用 NuGet 包管理器安装了 bootstrap-select。

问题 1：我现在是否必须复制一些 js 文件或更新任何配置，因为在 wwwroot/js 或 wwwroot/lib 中 bootstrap-select.js 文件不可用。

问题 2：请参阅下面的代码。我添加了一个选择项目，但页面上没有显示任何内容？为什么？

@{
    ViewData["Title"] = "Home Page";
}


<select class="selectpicker from-control" multiple data-live-search="true">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Barbecue</option>
</select>

<script type="text/javascript">
    $(document).read(function () {
        $('select').selectpicker();
    });
</script>

解决方法

这取决于您，您可以使用该提供商的 CND 到您的布局页面，或者您可以将所有必要的文件复制并粘贴到 wwwroot 文件夹中，并将它们包含到布局页面中。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/i18n/defaults-*.min.js"></script>

但最终您需要将其包含到布局页面中，并且还需要像这样添加 javascript 或 jquery 以使其工作。

$('.your-dropdown-class').selectpicker();