Login/Register
How to add jQuery UI to Asp.Net Core VS2017?
Asked Answered
jqueryasp.netjquery-uibowerrazor-pages
P

6

10

I have installed jQuery UI using Bower in VS2017.

When I look in Solution Explorer I can see that the Bower package seem to have been installed but I can't find them in the wwwroot folder so I don't know how to add them to the _layout.cshtml file.

What is the procedure for adding jQuery UI to my ASP.NET Core v2 application.

enter image description here

enter image description here

Prevot answered 26/1, 2018 at 7:58 Comment(2)
maybe this will help learn.microsoft.com/en-us/aspnet/core/client-side/bower – Seigniory
I did read that article earlier but found it very confusing, seem strange that I need to add a static nuget package. I already have jquery and bootstrap installed and working – Prevot
E
26

For ASP .NET Core 2.1 (Visual Studio 15.8 or later),

  1. Click-right on your project of the solution
  2. Choose Manage Client-Side Libraries...
  3. Add the following code (this is like Bower):

code

  { "version": "1.0", "defaultProvider": "cdnjs", "libraries": [ { "library": "[email protected]", "destination": "wwwroot/lib/jquery-ui/" } ] }
  1. Rebuild the project, this will generate all the source for that library in the specified destination
  2. Reference the .js and the .css in your project (_Layout.cshtml)

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

Erlond answered 13/11, 2018 at 20:44 Comment(1)
could you please add the text, so ppl can just copy paste it? { "version": "1.0", "defaultProvider": "cdnjs", "libraries": [ { "library": "[email protected]", "destination": "wwwroot/lib/jquery-ui/" } ] } – Madra
B
5

Now in visual studio 2019 (version 16.2.2) you can add the client side library

1- Right click on the project go to add side Menu

2- Now click on the Client-side library. (a popup menu will apear)

3- Search the library which you want to install and then set the location from where you want to save all the files of the library.

4- Then press install button

5- Enjoy coding (:

Banks answered 29/7, 2020 at 5:17 Comment(0)
T
5

There is no need to add JQuery-UI with Nuget Package Manager. Instead, use this way.

  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>

This approach works for me. For more information use this reference.

Trioxide answered 12/6, 2021 at 12:30 Comment(0)
I
3

I used npm to install. I went to my project directory and in the command line ran "npm install jquery-ui-dist". This will install the package. Doesn't look like any package manager used in visual studio actually installs front-end packages. Installing nuget packages Works fine with C# libraries though.

Hope this helps.

Ideational answered 14/8, 2018 at 0:52 Comment(3)
Ah! Thank you! That was the problem. I was using jquery-ui, and there was nothing useful in there! – Rugen
No problem! Happy to help :) – Ideational
btw, current Visual Studio has no problem doing npm installs automatically. Where "NuGet Package Manager" is an option in "Tools", though, for npm I have to modify the package.json file, and then npm will run to fetch dependencies. I don't think I had to do anything special to get that functionality. – Rugen
P
1

I tried to add jquery UI to both bower and NuGet and it didn't work, no errors but the jQuery-ui files was not to be found anywhere.

Ended up downloading the package from jqueryui.com and added them to the lib folder and pointed them out in my layout file.

Prevot answered 15/3, 2018 at 7:9 Comment(0)
R
0

This might help :https://dotnetthoughts.net/working-with-client-side-packages-in-aspnet-core/

You can define where you want your packages to be installed with bower. If you want to install the packages to a wwwroot/lib instead of bower_components directory, you can create a .bowerrc in the root directory and you can add following code: 

{
    "directory" : "wwwroot/lib"
}
Recipience answered 26/1, 2018 at 8:14 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.