How do I use Microsoft.jQuery.Unobtrusive.Ajax with libman (Library manager) asp.net Core 2.1?

Question

I am trying to use unobtrusive ajax to update my partial views. Unfortunately I ran in to a problem when I was about to install the package, since Bower is not working (?) or recommended anymore according to https://docs.microsoft.com/en-us/aspnet/core/client-side/bower?view=aspnetcore-2.1 . Instead they recommend us to use Libman.

I followed the steps from https://www.c-sharpcorner.com/article/unobtrusive-ajax-and-jquery-for-partial-updates-in-asp-net-mvc/ .

So I have installed the nuget Microsoft.jQuery.Unobtrusive.Ajax-package, but how do I reference the ajax-package with libman?

I looked at this How to reference Microsoft.JQuery.Unobtrusive.Ajax within my ASP.NET Core MVC project answer but it only shows how to use Bower.

Answer 1

I struggled with LibMan at first too. I found this guide that points out there's a GUI portion of LibMan . Using the UI portion of LibMan under the "project right click menu -> Add -> Client-Side Library" helped me figure out better ways to define which files I want and change the provider easier.

I ended up having most of my files come from cdnjs, but I set up jquery-ajax-unobtrusive to come from unpkg like so:

{
    "provider": "unpkg",
    "library": "jquery-ajax-unobtrusive@3.2.6",
    "destination": "wwwroot/lib/jquery-ajax-unobtrusive/"
}

Answer 2

The answer by @mybirthname is great . Another way to do that is to use libman cli . We can use the following command to install the libman :

dotnet tool install --global Microsoft.Web.LibraryManager.Cli

And now you can install jquery , jquery-validation-unobtrusive and so on as you like :

to init a libman.json :

libman init 

to install a dependency of jquery-validation-unobtrusive :

> libman install jquery-validation-unobtrusive
Destination [lib\jquery-validation-unobtrusive]:
lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js written to disk
lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js written to disk
Installed library "jquery-validation-unobtrusive@3.2.10" to "lib\jquery-validation-unobtrusive" 

to install a depenency of jquery :

> libman install jquery
Destination [lib\jquery]:
lib/jquery/core.js written to disk
lib/jquery/jquery.js written to disk
lib/jquery/jquery.min.js written to disk
lib/jquery/jquery.min.map written to disk
lib/jquery/jquery.slim.js written to disk
lib/jquery/jquery.slim.min.js written to disk
lib/jquery/jquery.slim.min.map written to disk
Installed library "jquery@3.3.1" to "lib\jquery"

[Edit]

To install jquery-ajax-unobtrusive on npm, since it's not yet on cdnjs, we can use unpkg provider :

unpkg is a fast, global content delivery network for everything on npm

libman install -p unpkg jquery-ajax-unobtrusive

Answer 3

You could use npm. Add pakage.json file in the root of your web project

{
  "version": "1.0.0",
  "name": "your-system",
  "devDependencies": {
    "jquery-ajax-unobtrusive": "^3.2.4"
  },
  "exclude": [
  ]
}

Now everything related to the library will be automatically downloaded in node_modules/jquery-validation-unobtrusive .

Be aware the node_module folder is not part of the project so you need to click Show All Files to see all folders.

After that if you want to always have latest version of the library instead of copying the file to your js folder you could use bundle config. Run this:

Install-Package BuildBundlerMinifier -Version 2.8.391

After that create json file - bundleconfig.json in the root of your web project

[ 
  {
    "outputFileName": "wwwroot/js/myjs.min.js",
    "inputFiles": [
      "node_modules/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.min.js"
    ]
  }

]

This will create on every build myjs.min.js file in your js folder in wwwroot

Answer 4

Microsoft has written a help document on Managing Client-Side Library.

https://docs.microsoft.com/en-us/aspnet/core/client-side/libman/libman-vs?view=aspnetcore-2.2

It has steps to use the 'Add Client-Side Library dialog' in Visual Studio. In Solution Explorer, right-click the project folder in which the files should be added. Choose Add > Client-Side Library. The Add Client-Side Library dialog appears.