ASP.NET Core 2.2 - Manage Client-Side Libraries

Ken Haggerty
Created 03/14/2019 - Updated 03/14/2019 18:11

This article will cover updating client libraries. I will assume you have created a new ASP.NET Core 2.2 Razor Pages project. Let's start by creating a libman.json file.

Right click on the project then click Manage Client-Side Libraries. If a libman.json file is not found, it will be created.

Manage Client-Side Libraries
Default for new libman.json:
{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": []
}

The new web application template uses 4 libraries: bootstrap, jquery, jquery-validation and jquery-validation-unobtrusive. Bootstrap and jquery-validation have updates available at the time of this article.

libman.json for bootstrap, jquery, jquery-validation and jquery-validation-unobtrusive:
{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "twitter-bootstrap@4.3.1",
      "destination": "wwwroot/lib/bootstrap/dist/"
    },
    {
      "library": "jquery@3.3.1",
      "files": [
        "jquery.min.js",
        "jquery.js",
        "jquery.min.map"
      ],
      "destination": "wwwroot/lib/jquery/dist/"
    },
    {
      "library": "jquery-validate@1.19.0",
      "files": [
        "additional-methods.js",
        "additional-methods.min.js",
        "jquery.validate.js",
        "jquery.validate.min.js"
      ],
      "destination": "wwwroot/lib/jquery-validation/dist/"
    },
    {
      "library": "jquery-validation-unobtrusive@3.2.11",
      "destination": "wwwroot/lib/jquery-validation-unobtrusive/"
    }
  ]
}

You should verify the updated files by opening each file and checking the version. I had to clean and restore a couple of times with my article project. Right click on libman.json.

Clean And Restore Libraries

You have updated the local libraries, but our production environment settings use CDN links. Open _layout. cshtml in the Pages\Shared folder. The first CDN link is for bootstrap.min.css.

_layout. cshtml > bootstrap.min.css link:
<environment exclude="Development">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
          crossorigin="anonymous"
          integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" />
</environment>

You not only need to update the href attribute, you must update the integrity hash. Browse twitter-bootstrap CDN library listings. Select 4.3.1/css/bootstrap.min.css > Copy Link Tag with SRI.

Bootstrap CDN Link Tag With SRI

Paste the link inside the environment tag.

_layout. cshtml > bootstrap.min.css link with new link:
<environment exclude="Development">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" 
          integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
          crossorigin="anonymous"
          integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" />
</environment>

Merge the attributes.

_layout. cshtml > bootstrap.min.css link with new attributes:
<environment exclude="Development">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
          integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY="
          crossorigin="anonymous" />
</environment>

The template is already configured for jQuery 3.3.1 jquery.min.js, but you need to update bootstrap.bundle.min.js.

_layout. cshtml > bootstrap.bundle.min.js link with new attributes:
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"
    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
    integrity="sha256-fzFFyH01cBVPYzl16KT40wqjhgPtq6FFUB6ckN2+GGw="
    crossorigin="anonymous">
</script>

There are CDN links in Pages\Shared > _ValidationScriptsPartial.cshtml. Browse jquery-validate CDN library listings. Select 1.19.0/jquery.validate.min.js > Copy Link Tag with SRI.

_ValidationScriptsPartial.cshtml > jquery-validate link with new attributes:
<script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"
    asp-fallback-src="~/lib/jquery-validation/dist/jquery.validate.min.js"
    asp-fallback-test="window.jQuery && window.jQuery.validator"
    integrity="sha256-bu/BP02YMudBc96kI7yklc639Mu4iKGUNNcam8D2nLc="
    crossorigin="anonymous">
</script>

If you are using Individual User Accounts, you need to scaffolded the Identity UI. There are CDN links in Identity\Pages > _ValidationScriptsPartial.cshtml. The jquery.validation.unobtrusive version is 3.2.9 but we have the updated links from Pages\Shared > _ValidationScriptsPartial.cshtml. Copy and paste both updated links to Identity.

Comment Count = 0

Please log in to comment.

Login Register
Logged in users receive web notifications.
Web Notifications