如何将jQuery UI添加到Asp.Net Core VS2017?

10

我已经使用Bower在VS2017中安装了jQuery UI。

当我在解决方案资源管理器中查看时,可以看到Bower包已被安装,但我找不到它们在wwwroot文件夹中的位置,因此不知道如何将它们添加到_layout.cshtml文件中。

如何将jQuery UI添加到我的ASP.NET Core v2应用程序的步骤是什么。

输入图像描述

输入图像描述


1
也许这会有所帮助:https://learn.microsoft.com/zh-cn/aspnet/core/client-side/bower - Carsten Løvbo Andersen
1
我之前确实读过那篇文章,但是觉得很困惑,感觉很奇怪需要添加一个静态的NuGet包。我已经安装并且使用了jQuery和Bootstrap。 - Thomas Adrian
6个回答

26

对于ASP .NET Core 2.1(Visual Studio 15.8或更高版本),

  1. 右键单击解决方案中的项目
  2. 选择“管理客户端库…”
  3. 添加以下代码(类似于Bower):

code

  { "version": "1.0", "defaultProvider": "cdnjs", "libraries": [ { "library": "jqueryui@1.12.1", "destination": "wwwroot/lib/jquery-ui/" } ] }
  1. 重新构建项目,这将在指定目标位置生成该库的所有源代码
  2. 在你的项目(_Layout.cshtml)中引用 .js 和 .css

来源: https://learn.microsoft.com/en-us/aspnet/core/client-side/libman/libman-vs?view=aspnetcore-2.1


2
你可以添加以下文本,以便其他人可以直接复制粘贴使用吗?{ "version": "1.0", "defaultProvider": "cdnjs", "libraries": [ { "library": "jqueryui@1.12.1", "destination": "wwwroot/lib/jquery-ui/" } ] } - misanthrop

5

现在在Visual Studio 2019(版本16.2.2)中,您可以添加客户端库。

1- 在项目上右键点击,选择添加侧边栏菜单

2- 点击客户端库。(会弹出一个菜单)

3- 搜索您想要安装的库,然后设置保存库所有文件的位置

4- 然后按安装按钮

5- 尽情编码(:


3
无需使用Nuget包管理器添加JQuery-UI。请使用以下方法。
  1. Right-click on wwwroot/lib-->Add--> client-side Library (note: you can add each library in the wwwroot folder, but in this scenario, it is better add it in the lib folder near other jQuery files) client-side Library windows

  2. Provider: You can use the default provider or change it.

  3. Library: Write the name of the library you want to add as an example JQuery UI. There is an IntelliSense in this text box that helps you to write the name of your library.

  4. Select Files: If you want to install light-weight pure jquery-UI without themes, just select these items. pure JQuery_UI

  5. Then in the Views/ Shared/ _Layout.cshtml add .css file to head:

    <head>
    <link rel="stylesheet" href="~/lib/jqueryui/jquery-ui.min.css"/>
    </head>
    
  6. Add .js file to body :

    <body>
      <script src="~/lib/jqueryui/jquery-ui.min.js"></script>
    </body>
    
这种方法对我有效。如需更多信息,请使用此参考链接

3
我使用npm进行安装。我进入我的项目目录,然后在命令行中运行“npm install jquery-ui-dist”。这将安装该软件包。看起来Visual Studio中使用的任何包管理器都没有安装前端包。不过,使用nuget包安装C#库是有效的。
希望这可以帮到你。

1
啊!谢谢!那就是问题所在。我正在使用 jquery-ui,但里面没有任何有用的东西! - Auspex
没问题!很乐意帮忙 :) - mbuchok
1
顺便提一下,当前的Visual Studio在自动执行npm安装方面没有问题。不过,在“工具”中选择“NuGet包管理器”选项时,对于npm,我必须修改package.json文件,然后npm将运行以获取依赖项。我认为我没有做任何特殊的事情来获得这个功能。 - Auspex

1
我尝试将jQuery UI添加到bower和NuGet中,但没有成功,没有错误,但是jQuery-ui文件无法找到。
最终从jqueryui.com下载了该包并将其添加到lib文件夹中,并在布局文件中指定了它们。

0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接