已用Bower安装jQuery UI，如何在VS2017的ASP.NET Core v2中添加到_layout.cshtml？

我懂你现在的困扰——明明已经通过Bower装好了jQuery UI，在解决方案资源管理器里也能看到包已安装，但wwwroot里就是找不到对应的文件，完全不知道怎么把它加到_Layout.cshtml里。别慌，咱们一步步来解决：

1. 先找到Bower包的实际位置 #

ASP.NET Core 2.x里，Bower默认不会把下载的包直接放到wwwroot里，而是存在项目根目录的bower_components文件夹里。你可以去项目根目录找找这个文件夹，打开后就能看到jquery-ui子文件夹，里面的dist目录下就是我们需要的js、css文件，还有主题样式。

2. 把jQuery UI文件放到wwwroot（两种方法任选） #

因为ASP.NET Core只会从wwwroot里静态引用文件，所以得把这些文件移过去：

方法一：手动复制（快速上手） #

• 打开bower_components/jquery-ui/dist，把jquery-ui.min.js复制到wwwroot下的js文件夹（没有就新建）
• 把jquery-ui.min.css和themes/base里的所有主题文件，复制到wwwroot的css或者专门的themes文件夹里

方法二：配置Bower自动安装到wwwroot（更规范） #

如果不想每次都手动复制，可以修改（或新建）项目根目录的.bowerrc文件，指定Bower的安装目录：

{
  "directory": "wwwroot/lib"
}

保存后，重新在包管理器控制台或终端执行bower install jquery-ui --save，这样jQuery UI就会直接下载到wwwroot/lib/jquery-ui里，后续更新也会自动同步。

3. 在_Layout.cshtml中引用jQuery UI #

注意！一定要先引用jQuery核心库，再引用jQuery UI——因为jQuery UI完全依赖jQuery。在_Layout.cshtml的合适位置（比如<head>里或页面底部）添加以下引用：

<!-- 先引用jQuery核心（如果还没加的话） -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>

<!-- 引用jQuery UI的JS文件 -->
<script src="~/lib/jquery-ui/dist/jquery-ui.min.js"></script>

<!-- 引用jQuery UI的基础样式和主题样式 -->
<link rel="stylesheet" href="~/lib/jquery-ui/dist/jquery-ui.min.css" />
<link rel="stylesheet" href="~/lib/jquery-ui/dist/themes/base/jquery-ui.theme.min.css" />

如果是手动复制的文件，就把路径改成你实际存放的位置，比如~/js/jquery-ui.min.js。

4. 验证是否配置成功 #

可以加个简单的测试代码，比如在某个视图里放一个日期选择器：

<input type="text" id="datePicker" />
<script>
    $(function() {
        $("#datePicker").datepicker();
    });
</script>

运行项目后，点击输入框如果弹出日期选择器，就说明一切配置正确啦！

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