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 or follow.

Login Register
Follow to get web notifications when new comments are posted to this article.
Logged in users receive web notifications for new articles, topics and assets.
Web Notifications