Visual Studio 2019 MVC引导程序4.5.2下拉按钮将不起作用

问题描述

我为罗word而道歉，但是我在这里尝试了很多事情，但没有任何效果。我将提供一个指向OneDrive文件共享的链接，其中已打包了整个解决方案，因为我敢肯定这里的设置有问题，而不是代码本身。

所以我遇到的问题是，我正在尝试创建一个简单的MVC网站，并且在一页上，我想要一个显示“ Demos”的按钮，它是一个下拉按钮，因此会看到各种演示的链接，与菜单栏上的“ Demos”子菜单几乎相同。所有其他Bootstrap东西似乎都可以正常工作，包括菜单（我将其重做为与Bootstrap 4.5.2兼容，因为原始MVC支架仍旧是过时的版本。当我单击下拉列表时...什么都没发生。这些东西可以在我浏览过的其他网页上运行，我什至只是从bootswatch网站上逐字复制了相同的代码，但仍然无法正常工作，我对开发工具不是很精通，所以我“我不太确定如何调试CSS / JS并找出不起作用的方法，但是尽我所能，一切都正确，这应该就可以了。

这是我尝试过的一些事情（不分先后）

• 为popper.js创建一个脚本包，并将其添加到我的_layout.cshtml页面中（以防万一它没有被加载）
• 试图将脚本移动到整个位置...到布局页面的顶部，头部，正文...
• 我正在使用Bootswatch的darkley主题，根据文件，该主题是Bootstrap 4.5.1，即使4.5.2是最新的，但我也只是切换回了4.5.2的默认主题。
li>
• 使用nuget将所有软件包（包括Bootstrap升级到4.5.2）及其各自的最新版本进行升级
• 暂时将引导程序降级为4.5.1，以与Darkly它们兼容
• 重新升级回Bootstrap 4.5.2
• 删除了菜单栏的所有标记并登录了部分页面（以确保其中的一些不良标记不会在页面的更深处造成麻烦。）

因此，如果我使用Chrome和开发工具打开index.cshtml页面，则可以导航至下拉菜单DIV元素，并观察其样式。如果我手动将其更改为“下拉菜单显示”，则会显示弹出窗口；删除“显示”将关闭弹出窗口。我的JavaScript并不是很好（我是.net C＃的人；这只是我正在做的一个辅助项目，我在UI中也不是特别强）。我更像是后端业务逻辑/数据库专家。无论如何，在bootstrap.js中，我发现似乎是单击类dropdown-menu的处理程序，但是我无法确定它是如何被调用的，以及为什么该事件处理程序无法正确触发/响应

所以我希望有人能告诉我我在这里做错了什么，或者我缺少什么，因为我似乎无法使它正常工作，而且我已经花了好几个小时搞定了。非常感谢。

https://1drv.ms/u/s!AgawIUVttIqOmGmH_AzeS7W_uyz6?e=tRJx8O

有问题的代码在index.cshtml页面中。具体来说，以下块

<p>
    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
        <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Hear a Demo
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <a class="dropdown-item" href="#">Commercial</a>
            <a class="dropdown-item" href="#">Industrial</a>
            <a class="dropdown-item" href="#">Promotional</a>
            <a class="dropdown-item" href="#">Podcast</a>
        </div>
    </div>
    &nbsp;
    <button type="button" class="btn btn-primary">Book Now &raquo;</button>
</p>

对不起，文件大小。我对解决方案进行了彻底的清理，但是事情仍然很大。令我惊讶不已的是，Visual Studio中的一个项目如何比当时的整个Visaul Studio安装大十倍（我相信Visual Studio '97可以装在10张软盘上。）

---

好吧，我最终解决了自己的问题，但是我认为应该在此处发布解决方案。我不敢相信以前似乎没有人遇到过这种情况，但是我已经在网上搜索了一个多星期，却一无所获。值得庆幸的是，我让它工作了。我仍然对为什么其他解决方案不起作用感到有些困惑。因此，如果有人可以解释这一点，我将不胜感激，因为我正试图提高使用Bootstrap的效率，并且花两周时间调试一些愚蠢的UI思维（像一年级CS学生一样）是不切实际的。所以，这是交易...

在Dev Tools中进行了一些调试之后（顺便说一句，如果您想更熟练地使用此视频，我发现这特别有用https://www.youtube.com/watch?v=H0XScE08hy8）。我发现菜单处理程序失败，因为“ Popper”是未定义的类型。当我仔细研究时，确实发现了一些信息，该信息指示popper.js库用于Bootstrap弹出窗口，并且在bootstrap.js之前包含popper.js。我做到了，但还是没有骰子。另一种建议是使用bootstrap.bundle.js，其中包含popper，这行得通！但是，我仍然不了解以下内容：

• 如果bootstrap.bundle.js包含popper.js，那为什么即使我包含popper.js也不能正常工作？
• 我还提供了popper-utils.js来很好地衡量。还是没有骰子
• 该错误实际上发生在dropdown.js中，它甚至不是我的解决方案中包含的脚本文件。在哪里引用的？我尝试在botstrap.js文件中搜索它，但没有找到该参考。我对JavaScript不太了解，所以也许我不是在寻找正确的东西。

我之所以提出这些问题，是因为我真的在努力提高效率，并理解它们的组合方式，以便将来更好地解决此类古怪的问题。这是一个非常令人沮丧的问题，而且我是一个拥有15年以上经验的开发人员，所以这就像我刚开始做这件事一样（尽管再次承认Javascript和UI并不是我真正的核心能力。）任何帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）