Mvc: Создать<link/> Tag Helper с поддержкой резервных источников

Это эквивалент таблицы стилей CSS # 1576.

LinkTagHelper который позволяет указать резервную таблицу стилей для загрузки в случае, если основная не загружается. Сбой определяется путем введения фиктивного тега <meta> с указанным именем класса (атрибут asp-fallback-test-class ), а затем тестирования вычисленного стиля этого элемента, чтобы увидеть, есть ли указанное свойство CSS ( asp-fallback-test-property attribute) равно указанному значению ( asp-fallback-test-value ).

использование

<link href=""
      asp-fallback-href=""
      asp-fallback-test-class=""
      asp-fallback-test-property=""
      asp-fallback-test-value="" />

Все атрибуты должны присутствовать и иметь ненулевое значение для работы Tag Helper. Если какие-либо из них отсутствуют, в журнале будет отображаться предупреждение и отключение.

Аргументы

| Имя атрибута | Тип | Подробности |
| --- | --- | --- |
| asp-fallback-href | string | URL-адрес, к которому следует вернуться в случае сбоя основного (как указано в атрибуте href ) |
| asp-fallback-test-класс | string | Имя класса, определенное в таблице стилей для использования в резервном тесте |
| asp-fallback-test-свойство | string | Имя свойства CSS, которое будет использоваться для резервного теста |
| asp-fallback-test-value | string | Значение свойства CSS, которое нужно использовать для резервного теста |

Пример

Исходный CSHTML

 <link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"
       asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
       asp-fallback-test-class="hidden" asp-fallback-test-property="visibility" asp-fallback-test-value="hidden" />

Выходной HTML

<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<meta name="x-stylesheet-fallback-test" class="hidden" />
<script>
    (function (a, b, c) {
        var d = document,
            s = d.getElementsByTagName("SCRIPT"),
            meta = s[s.length-1].previousSibling;
        (d.defaultView.getComputedStyle(meta)[a] === b ||
            d.write('\u003clink rel="stylesheet" href="' + c + '" /\u003e'));
    })("visibility", "hidden", "/lib/bootstrap/css/bootstrap.min.css");
</script>