使用 Bootstrap-Select 时，Bootstrap 下拉菜单需要 popperJs答案

【问题标题】：Bootstrap dropdowns require popperJs when using Bootstrap-Select使用 Bootstrap-Select 时，Bootstrap 下拉菜单需要 popperJs
【发布时间】：2023-03-15 15:07:01
【问题描述】：

我正在尝试将 bootstrap-select 导入我的 Webforms 应用程序，但是当我将 CSS 和 JS 文件添加到项目中时，下拉菜单无法正确加载。如何将此包添加到我的项目中而不会出现标题错误？它正确地应用 CSS 并且没有问题。唯一不起作用的是脚本部分。

我在 C# 中使用 Visual Studio 19 的 webform 应用程序模板。

引导版本：4.3.1 jQuery版本：3.4.1 PopperJS 版本：1.14.0

引导选择版本：1.13.9

我已经尝试不使用 CDN 导入它，而是在本地下载和添加文件，但也没有用。

头

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - Mi aplicación ASP.NET</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>

    <webopt:BundleReference runat="server" Path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

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

    <link href="Content/bubbly_button.css" rel="stylesheet" />
</head>

在 bootstrap-select 之前加载所需的脚本，按照它们应该被导入的顺序。：

<body id="top">
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>
        <nav class="navbar navbar-inverse bg-dark">
            <div class="container">
                <a class="navbar-brand mb-0 h1" runat="server" href="~/">ECEG Migration</a>
            </div>
        </nav>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <div class="top-button bubbly-button custom-fab">
                <i class="fas fa-chevron-up"></i>
            </div>
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - ECEG_Migration</p>
            </footer>
        </div>
    </form>
    <script src="https://kit.fontawesome.com/1ba00c8269.js"></script>

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

    <script src="Scripts/myScripts.js"></script>
</body>

在一个占位符内使用下拉菜单

<asp:DropDownList ID="dropdown_year" runat="server" CssClass="form-control m-lateral selectpicker"
                    OnSelectedIndexChanged="dropdown_year_SelectedIndexChanged"
                    AutoPostBack="true" AppendDataBoundItems="true">
                    <asp:ListItem Text="All years" Value="All" Selected="True"></asp:ListItem>
                </asp:DropDownList>

我认为我做了正确的导入，但下拉菜单不起作用。

【问题讨论】：

我相信 WebForms 写了一个 <select> 元素，而 Bootstrap/Popper 的“下拉菜单”组件使用了一个 <div> 元素。要使用 Popper，您可能必须使用 Repeater 而不是 DropDownList。

标签： c# bootstrap-4 webforms bootstrap-select

【解决方案1】：

您需要在引导之前导入 popperjs 以使其工作：

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.js

或跟随你的包导入

<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="popper.js" Assembly="System.Web" Path="~/Scripts/Popper/popper.js" />
<asp:ScriptReference Name="bootstrap" />

【讨论】：