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://learn.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.

score 12 · Answer 1 · answered Jan 07 '19 at 23:19

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/"
}

I tried to add through the gui... didn't work. Pasting that block into libman.json - did. Ain't that a... — WernerCD, Mar 21 '19 at 02:19

itminus · Answer 2 · 2018-10-24T13:57:45.260

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

Hi @itminus, I think you've missed the point of the question. The OP wanted to know how to include jquery.ajax.unobtrusive in his project as currently this is not available from cdnjs. I too want this and it looks like many other do too. — Ian GM, Oct 24 '18 at 13:24
@lan GM Hi, I've updated my answer to show a way to install `jquery-ajax-unobtrusive` using libman cli . — itminus, Oct 24 '18 at 14:00
That looks exactly like what I need. I am away from the project until next week but looking forward to giving it a go. Thank you very much. — Ian GM, Oct 25 '18 at 17:21

mybirthname · Accepted Answer · 2018-08-30T08:14:23.350

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

score 0 · Answer 4 · answered Mar 29 '19 at 18:08

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

https://learn.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.

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

4 Answers4