Выпадающее меню Bootstrap не работает ASP.NET

Выпадающее меню не раскрывается, при нажатии ничего не происходит. Я искал все сообщения и до сих пор не могу заставить это работать. У меня есть раскрывающийся список в моем проекте веб-форм asp.net следующим образом.

<li class = "nav-item dropdown">
      <a class = "nav-link dropdown-toggle" href = "#" id = "myAccount" data-toggle = "dropdown">My Account<span class = "caret"></span></a>
      <div class = "dropdown-menu" aria-labelledby = "bd-versions">
        <a class = "dropdown-item" href = "/docs/4.1/">Messages</a>
        <div class = "dropdown-divider"></div>
        <a class = "dropdown-item" href = "/docs/4.1/">Subscription</a>
        <div class = "dropdown-divider"></div>
        <a class = "dropdown-item active" href = "/docs/4.0/">Profile</a>
      </div>
</li>

jquery-3.3.1 правильно устанавливается через nuget и упоминается перед начальной загрузкой следующим образом.

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

Что мне не хватает? Еще одна подсказка, возможно, когда я уменьшаю размер окна и отзывчивые меню начальной загрузки рушатся, «гамбургер» при расширении мигает только на секунду, а затем рушится сам по себе.

Обновлять: я добавил следующие ссылки CDN, как было предложено, и это работает. Я сбит с толку, как правильно связать эти скрипты в VS17 для jquery bootstrap и popper.

    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Опять же, вот ссылки на мои скрипты в bundleconfig.cs, а теперь как они закомментированы в site.master.

        // For more information on Bundling, visit https://go.microsoft.com/fwlink/?LinkID=303951
    public static void RegisterBundles(BundleCollection bundles)
    {

        bundles.Add(new ScriptBundle("~/bundles/jquery")
                        .Include("~/Scripts/jquery-3.3.1.js")
                        .Include("~/Scripts/jquery-3.3.1.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap")
            .Include("~/Scripts/bootstrap.js")
            .Include("~/Scripts/bootstrap.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
                        "~/Scripts/WebForms/WebForms.js",
                        "~/Scripts/WebForms/WebUIValidation.js",
                        "~/Scripts/WebForms/MenuStandards.js",
                        "~/Scripts/WebForms/Focus.js",
                        "~/Scripts/WebForms/GridView.js",
                        "~/Scripts/WebForms/DetailsView.js",
                        "~/Scripts/WebForms/TreeView.js",
                        "~/Scripts/WebForms/WebParts.js"));

        // Order is very important for these files to work, they have explicit dependencies
        bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(
                "~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
                "~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",
                "~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",
                "~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"));

        // Use the Development version of Modernizr to develop with and learn from. Then, when you’re
        // ready for production, use the build tool at https://modernizr.com to pick only the tests you need
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));
        bundles.Add(new ScriptBundle("~/bundles/popper").Include(
                       "~/Scripts/umd/popper.min.js"));
    }

    <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 = "jquery" />
            <asp:ScriptReference Name = "bootstrap" />--%>

Хотелось бы узнать рекомендуемый VS способ сделать это, поскольку мне не нравится полагаться на CDN. Спасибо

Он работает в Bootstrap 4.1.3. Поэтому проверьте консоль браузера на наличие ошибок.

VDWWD 29.01.2019 16:09

Не могли бы вы описать свою проблему более подробно, чем просто "не могу заставить это работать"? Предоставленная вами разметка работает нормально здесь

zgood 29.01.2019 16:09

Кто минусует вопрос? Я описал примеры кода и т. д. Он не выпадает.

MX313 29.01.2019 16:15

@VDWWD Я не получаю никаких ошибок через консоль браузера

MX313 29.01.2019 16:25

@zgood да, это работает в начальной загрузке, это не моя проблема, мой вопрос вращается вокруг того факта, что он не работает в asp.net, как указано в вопросе.

MX313 29.01.2019 16:28

Нет никакой разницы. Bootstrap на стороне клиента. aspnet на стороне сервера. Это не имеет никакого отношения к тому, что это жерех. В конце концов, это всего лишь html.

VDWWD 29.01.2019 16:32

@VDWWD Это имеет прямое отношение к asp.net. Я понимаю, о чем вы говорите, но да, есть много нюансов в том, как загружаются скрипты, которые могут повлиять на функциональность. Если есть проблема с jquery и тем, как на нее ссылаются, она не будет работать, поэтому я включил ссылки на свои скрипты.

MX313 29.01.2019 16:35

@ MX313 Можете ли вы подтвердить, что это ссылки на ваши сценарии .net, закомментировав их и добавив ссылки CDN в <head> в библиотеки jQuery и Bootstrap? В основном уберите .NET из картины, тогда мы сможем определить, являются ли это вашими ссылками на скрипт, а не какими-то внешними CSS или JS, мешающими вашему раскрывающемуся списку.

zgood 29.01.2019 16:46

@zgood Я попробую это и сообщу. Спасибо

MX313 29.01.2019 16:56
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
9
328
0

Другие вопросы по теме