Вспомогательная функция тега ссылки в ASP.NET Core

  • Статья

Автор: Рик Андерсон (Rick Anderson)

Вспомогательная функция тега ссылки создает ссылку на первичный или резервный файл CSS. Обычно первичный файл CSS находится в сети доставки содержимого (CDN).

Сеть CDN:

  • Предоставляет несколько улучшений производительности по сравнению с размещением ресурса в веб-приложении.
  • Не следует полагаться на эту сеть в качестве единственного источника ресурса. Сети CDN не всегда доступны, поэтому следует использовать надежный резервный вариант. Обычно таким вариантом является сайт, на котором размещается веб-приложение.

Вспомогательная функция тега ссылки позволяет указать CDN для файла CSS и резервную копию, если CDN недоступен. Вспомогательная функция тега ссылки обеспечивает высокую производительность CDN с надежностью локального размещения.

В следующей Razor разметке показан head элемент файла макета, созданный с помощью шаблона веб-приложения ASP.NET Core:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebLinkTH</title>

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

Ниже приведен код HTML из предыдущего кода (в среде, не являющейся средой разработки):

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home page - WebLinkTH</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"
          crossorigin="anonymous" integrity="sha256-eS<snip>BE=" />
    <meta name="x-stylesheet-fallback-test" content="" class="sr-only" />
    <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 + "/>")
        }
            ("position", "absolute", ["\/lib\/bootstrap\/dist\/css\/bootstrap.css"],
                "rel=\u0022stylesheet\u0022 crossorigin=\u0022anonymous\u0022 integrity=\abc<snip>BE=\u0022 ");
    </script>

    <link rel="stylesheet" href="/css/site.css" />
</head>

В приведенном выше коде вспомогательный элемент тега link создал <meta name="x-stylesheet-fallback-test" content="" class="sr-only" /> элемент и следующий JavaScript, который используется для проверки доступности запрошенного bootstrap.css файла в CDN. В этом случае файл CSS был доступен, поэтому вспомогательная функция тега создала элемент <link /> с файлом CSS CDN.

Все атрибуты, свойства и методы вспомогательной функции тега ссылки см. в разделе LinkTagHelper Class (Класс LinkTagHelper).

href

Предпочтительный адрес связанного ресурса. Адрес передается в созданный код HTML во всех случаях.

asp-fallback-href

URL-адрес таблицы стилей CSS, к которой можно перейти в случае сбоя основного URL-адреса.

asp-fallback-test-class

Имя класса, определенное в таблице стилей для использования в качестве теста резервного экземпляра. Дополнительные сведения см. в разделе FallbackTestClass.

asp-fallback-test-property

Имя свойства CSS, используемое для теста резервного экземпляра. Дополнительные сведения см. в разделе FallbackTestProperty.

asp-fallback-test-value

Значение свойства CSS, используемое для теста резервного экземпляра. Дополнительные сведения см. в разделе FallbackTestValue.

Дополнительные ресурсы