ASP.NET Core 2.0 MVC下拉按钮失效但纯HTML中正常的问题求助

你的问题其实很典型——脚本路径的引用方式错误导致jQuery没有被正确加载，而Bootstrap的下拉组件完全依赖jQuery，所以才会出现纯HTML页面能正常工作，但ASP.NET生成的页面下拉按钮失效的情况。

问题根源 #

你提到ASP.NET里用的是带根路径的绝对引用：

<script src="/lib/jquery/dist/jquery.min.js"></script>

而纯HTML里用的是相对路径：

<script src="lib/jquery/dist/jquery.min.js"></script>

在ASP.NET Core中，/开头的路径指向的是站点的根目录，而非你的应用根目录。如果你的应用部署在IIS虚拟目录下，或者开发环境中应用的访问路径不是站点根（比如https://localhost:5001/myapp），这个绝对路径就会找不到jQuery文件（浏览器控制台会显示404错误），导致Bootstrap的下拉功能无法完成初始化。

解决方法 #

用ASP.NET Core提供的路径辅助方式来生成正确的脚本路径，推荐两种简单方案：

1. 使用Tag Helper（标签助手）
   这是最简洁的方式，用~代表应用根路径，框架会自动根据部署环境解析成正确的URL：

<script src="~/lib/jquery/dist/jquery.min.js" asp-append-version="true"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js" asp-append-version="true"></script>

asp-append-version="true"还能自动给脚本添加版本号，避免浏览器缓存旧的脚本文件。

2. 使用Url.Content()方法
   如果你不想用Tag Helper，也可以通过Url.Content()来解析应用根路径：

<script src="@Url.Content("~/lib/jquery/dist/jquery.min.js")"></script>
<script src="@Url.Content("~/lib/bootstrap/dist/js/bootstrap.min.js")"></script>

验证步骤 #

修改路径后，按F12打开浏览器开发者工具，切换到「Network」标签页，刷新页面：

• 检查jquery.min.js和bootstrap.min.js的请求状态是否为200（表示成功加载）
• 如果还是出现404，先确认你的lib文件夹确实在应用根目录下，且路径拼写没有错误

只要jQuery和Bootstrap脚本正确加载，你的下拉按钮代码就能正常工作：

<div class="navbar-collapse collapse" id="navigation">
  <ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
      <a href="javascript: void(0)" class="dropdown-toggle" data-toggle="dropdown">Contact <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="contact.html">Contact option 1</a></li>
        <li><a href="contact2.html">Contact option 2</a></li>
        <li><a href="contact3.html">Contact option 3</a></li>
      </ul>
    </li>
  </ul>
</div>

内容的提问来源于stack exchange，提问作者Shaggs