ASP.NET Core 2.2 - Manage Client-Side Libraries

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.

Ken Haggerty
Created 03/14/19
Updated 03/14/19 18:11 GMT

Log In or Reset Quota to read more.

Successfully completed. Thank you for contributing.
Contribute to enjoy content without advertisments.
Something went wrong. Please try again.

Comments(0)

Loading...
Loading...

Not accepting new comments.

Submit your comment. Comments are moderated.

User Image.
DisplayedName - Member Since ?