liveBook · Manning

JavaScript tag helper

As explained in Pro ASP.NET Core 7, Tenth Edition

ScriptTagHelper is the built-in ASP.NET Core tag helper that processes script elements and their attributes in Razor views.

ScriptTagHelper processes `script` elements in ASP.NET Core Razor views. It can select local JavaScript files, add a cache-busting value, or provide a local fallback for a CDN script. Built-in tag helpers are enabled through view imports. section 26.4.1 section 26.8

Use `asp-src-include` to select files with a glob pattern and `asp-src-exclude` to remove matches. Patterns are evaluated within `wwwroot`. Keep them narrow: a pattern that matches every `.js` file can pull in scripts from unrelated packages, while a broad jQuery pattern can include both regular and minified variants. section 26.4.1

Table 26.5 Common globbing patterns (view table figure)

Pattern

Example

Description

?

js/src?.js

This pattern matches any single character except /. The example matches any file contained in the js directory whose name is src, followed by any character, followed by .js, such as js/src1.js and js/srcX.js but not js/src123.js or js/mydir/src1.js.

*

js/*.js

This pattern matches any number of characters except /. The example matches any file contained in the js directory with the .js file extension, such as js/src1.js and js/src123.js but not js/mydir/src1.js.

**

js/**/*.js

This pattern matches any number of characters including /. The example matches any file with the .js extension that is contained within the js directory or any subdirectory, such as /js/src1.js and /js/mydir/src1.js.

The globbing table distinguishes `?` and `*`, which do not cross directory boundaries, from `**`, which can match across them. section 26.4.1

Select one local jQuery file

In `Views/Shared/_SimpleLayout.cshtml`, `<script asp-src-include="/lib/jquery/**/*.min.js" asp-src-exclude="**.slim.**"></script>` selects minified files but excludes slim variants. The resulting HTML contains `<script src="/lib/jquery/jquery.min.js"></script>`. Inspect the response to check what a glob actually selected. section 26.4.1

Two further attributes address delivery problems:

  • `asp-append-version="true"` adds a cache-busting query value to a generated script URL. section 26.4.1
  • For a CDN `src`, set `asp-fallback-src` to a local file and `asp-fallback-test` to an expression such as `window.jQuery`. The generated HTML tests for that value and writes a local script element when needed. section 26.4.1

How Pro ASP.NET Core 7, Tenth Edition covers it

How deep it goes
Works through file selection, exclusion, versioning, and CDN fallback with rendered HTML, but does not detail helper internals.
Examples
Uses a shared layout, jQuery files under `wwwroot/lib`, generated script elements, and a jQuery CDN fallback.
What it assumes
Assumes familiarity with Razor views and layouts while identifying view imports as the way to enable built-in tag helpers.
What you can do after
Apply it via ScriptTagHelper attributes to select local scripts, add cache-busting values, and configure a CDN fallback.
How it connects
Connects Razor views, globbing, cache busting, and content delivery networks through script-element attributes.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Pro ASP.NET Core 7, Tenth Edition. The section links point to the parts of the book it draws on.