Tag-хэлперы в ASP.NET Core MVC. Tag-хэлперы LinkTagHelper, ScriptTagHelper и EnvironmentTagHelper

Содержание

LinkTagHelper
Определение шаблона пути загрузки
ScriptTagHelper
EnvironmentTagHelper
Итого

Tag-хэлперы LinkTagHelper и ScriptTagHelper, обычно, широко используются в макетах приложения для подключения в проект css-файлов и скриптов.

LinkTagHelper

Хэлпер LinkTagHelper определяет тег <link>, используемый для подключения файлов стилей (*.css). Для этого tag-хэлпера могут использоваться следующие атрибуты:

Атрибут	Описание
`asp-append-version`	если имеет значение `true`, то к пути к названию файла стиля добавляется номер версии.
`asp-fallback-href`	указывает вспомогательный путь к файлу стиля, который используется, если загрузка файла, указанного в атрибуте `href` пройдет неудачно
`asp-fallback-test-class`	определяет класс, который используется для теста загрузки стиля из атрибута `href`
`asp-fallback-test-property`	определяет свойство, которое используется для тестирования загрузки стиля из атрибута `href`
`asp-fallback-test-value`	определяет значение свойства из атрибута `asp-fallback-test-property`, которое используется для теста загрузки стиля из атрибута `href`
`asp-href-include`	определяет через запятую набор шаблонов подключаемых файлов стилей
`asp-href-exclude`	определяет через запятую набор шаблонов для тех файлов, которые следует исключить из загрузки
`asp-fallback-href-include`	определяет через запятую набор шаблонов файлов, которые подключаются в том случае, если загрузка основного файла стиля из атрибута `href` прошла неудачно
`asp-fallback-href-exclude`	определяет через запятую набор шаблонов файлов, которые следует исключить из загрузки в том случае, если загрузка основного файла стиля из атрибута `href` прошла неудачно

Использование этого tag-хэлпера можно увидеть в основном макете шаблонного приложения ASP.NET Core MVC:

!DOCTYPE html>
<html lang="en">
<head>
    ...
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/AspTagHelpers.styles.css" asp-append-version="true" />
</head>
<body>
    ...
</body>
</html>

В качестве примера, изменим способ загрузки фреймворка Bootstrap в проект (первая ссылка в коде выше) следующим образом:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
                       asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
                       asp-fallback-test-class="hidden" 
                       asp-fallback-test-property="visibility" 
                       asp-fallback-test-value="hidden" />

В данном случае, в атрибуте href мы указываем основной файл фреймворка, который должен загружаться с внешнего ресурса. Если по каким-либо причинам файл не загрузится, то будет использоваться локальная версия файла, которая располагается в папке wwwroot/lib/bootstrap/dist/css/. Для того, чтобы протестировать возможность загрузки файла, расположенного по основному пути мы используем атрибуты asp-fallback-test-class, asp-fallback-test-property, asp-fallback-test-value. В значениях этих атрибутов мы указываем класс, свойство и значение, определенные в файле стилей.

В итоге, будет сформирована следующая разметка:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" />
<meta name="x-stylesheet-fallback-test" content="" class="hidden" /><script>!function(a,b,c,d){var e,f=document,g=f.getElementsByTagName("SCRIPT"),h=g[g.length-1].previousElementSibling,i=f.defaultView&&f.defaultView.getComputedStyle?f.defaultView.getComputedStyle(h):h.currentStyle;if(i&&i[a]!==b)for(e=0;e<c.length;e++)f.write('<link href="'+c[e]+'" '+d+"/>")}("visibility","hidden",["/lib/bootstrap/dist/css/bootstrap.min.css"], "rel=\u0022stylesheet\u0022 ");</script>

Определение шаблона пути загрузки

Шаблоны пути используются в атрибутах asp-{..}-href-include или asp-{..}-href-exclude для того, чтобы указать сразу несколько файлов для загрузки. Для создания шаблона пути загрузки мы можем применять символы подстановки:

? — заменяет любой одиночный символ за исключением слеша /.
* — заменяет любое количество символов за исключением слеша.
** — заменяет любое количество символов, в том числе и слеш.

Например, мы можем указать такой путь в атрибуте asp-href-include:

<link asp-href-include="~/css/**/*.css" asp-append-version="true" />

то, в итоге, в проект будут загружены все css-файлы расположенные в каталоге wwwroot/css и всех его подкаталогах.

ScriptTagHelper

Tag-хэлпер ScriptTagHelper используется для подключения файлов со скриптами . Данный хэлпер также может принимать ряд атрибутов, которые по своему действию аналогичны атрибутам хэлпера LinkTagHelper

Атрибут	Описание
`asp-append-version`	если значение `true`, то к пути к файлу скрипта добавляется номер версии
`asp-fallback-src`	указывает вспомогательный путь к скрипту, который используется, если загрузка скрипта, указанного в атрибуте `src` пройдет неудачно
`asp-fallback-test`	определяет выражение, которое тестирует загрузку основного скрипта из атрибута `src`
`asp-src-include`	определяет шаблон подключаемых файлов, через запятую можно задать несколько шаблонов
`asp-src-exclude`	определяет через запятую набор шаблонов для тех файлов, которые следует исключить из загрузки
`asp-fallback-src-include`	определяет через запятую набор шаблонов файлов, которые подключаются в том случае, если загрузка основного скрипта из атрибута `src` прошла неудачно
`asp-fallback-src-exclude`	определяет через запятую набор шаблонов файлов, которые следует исключить из загрузки в том случае, если загрузка основного скрипта из атрибута `src` прошла неудачно

По сути, как было сказано выше, действие этих атрибутов аналогично действиям атрибутов LinkTagHelper поэтому, рассматривать их не имеет особого смысла.

EnvironmentTagHelper

Tag-хэлпер EnvironmentTagHelper позволяет генерировать определенную html-разметку в зависимости от состояния приложения. Состояние приложения определяется с использованием среды окружения ASPNETCORE_ENVIRONMENT. Ключевой атрибут этого хэлпера — names позволяет установить названия состояний среды, при которых применяется данный тег. Например,

<footer class="border-top footer text-muted">
    <environment names="Production">
        <div class="container">
            &copy; 2023 - AspTagHelpers - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </environment>
    <environment names="Development">
        <div class="container">
            <p>Приложение находится в стадии разработки</p>
        </div>
    </environment>
</footer>

Здесь, в зависимости от имени среды окружения в футер сайта будет выводится различная информация. Если имя среды окружения Development:

Если имя среды окружения Production:

Имя среды окружения можно менять различными способами, например, с использованием файла launchSettings.json.

Итого

Tag-хэлперы LinkTagHelper, ScriptTagHelper и EnvironmentTagHelper используются, в основном, в макетах приложений. LinkTagHelper и ScriptTagHelper используются для загрузки файлов стилей и скриптов. Tag-хэлпер EnvironmentTagHelper используется для генерации определенной html-разметки в зависимости от того, в какой стадии находится приложение (Development, Production и т.д.)