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

如何解决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 举报,一经查实,本站将立刻删除。

相关推荐


依赖报错 idea导入项目后依赖报错,解决方案:https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错:更换其他版本 无法下载依赖可参考:https://blog.csdn.net/weixin_42628809/a
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
错误1:gradle项目控制台输出为乱码 # 解决方案:https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
错误还原:在查询的过程中,传入的workType为0时,该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
解决方案1 1、改项目中.idea/workspace.xml配置文件,增加dynamic.classpath参数 2、搜索PropertiesComponent,添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
删除根组件app.vue中的默认代码后报错:Module Error (from ./node_modules/eslint-loader/index.js): 解决方案:关闭ESlint代码检测,在项目根目录创建vue.config.js,在文件中添加 module.exports = { lin
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
错误1:Request method ‘DELETE‘ not supported 错误还原:controller层有一个接口,访问该接口时报错:Request method ‘DELETE‘ not supported 错误原因:没有接收到前端传入的参数,修改为如下 参考 错误2:cannot r
错误1:启动docker镜像时报错:Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法:重启docker -&gt; systemctl r
错误1:private field ‘xxx‘ is never assigned 按Altʾnter快捷键,选择第2项 参考:https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2:启动时报错,不能找到主启动类 #
报错如下,通过源不能下载,最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
错误1:maven打包报错 错误还原:使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
错误1:服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
错误1:运行项目后报如下错误 解决方案 报错2:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案:在pom.
参考 错误原因 过滤器或拦截器在生效时,redisTemplate还没有注入 解决方案:在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-