Link-Taghilfsprogramm in ASP.NET Core

  • Artikel

Von Rick Anderson

Das Link-Taghilfsprogramm generiert einen Link zu einer primären oder Fallback-CSS-Datei. Die primäre CSS-Datei befindet sich in der Regel in einem Content Delivery Network (CDN).

Für ein CDN gilt Folgendes:

  • Es bietet einige Leistungsvorteile im Vergleich zum Hosten einer Ressource mit der Web-App.
  • Es sollte nicht als einzige Quelle für eine Ressource verwendet werden. CDNs sind nicht immer verfügbar, daher sollte eine zuverlässige Fallbackquelle eingerichtet werden. Hierbei handelt es sich üblicherweise um die Website, auf der die Web-App gehostet wird.

Mit dem Link-Taghilfsprogramm können Sie ein CDN für die CSS-Datei und eine Fallbackquelle angeben, wenn das CDN nicht verfügbar ist. Das Link-Taghilfsprogramm bietet den Leistungsvorteil eines CDN kombiniert mit der Stabilität des lokalen Hostings.

Das folgende Razor-Markup zeigt das head-Element einer Layoutdatei, die mit der Web-App-Vorlage von ASP.NET Core erstellt wurde:

<!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>

Das folgende Beispiel zeigt den gerenderten HTML-Code aus dem vorherigen Beispiel (in einer nicht zur Entwicklung dienenden Umgebung):

<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>

Im vorherigen Beispiel hat das Link-Taghilfsprogramm das <meta name="x-stylesheet-fallback-test" content="" class="sr-only" />-Element und den folgenden JavaScript-Code generiert, mit dem überprüft wird, ob die angeforderte Datei bootstrap.css im CDN verfügbar ist. In diesem Fall war die CSS-Datei verfügbar, sodass das Taghilfsprogramm das <link />-Element mit der CSS-Datei aus dem CDN generiert hat.

Sie finden alle Attribute, Eigenschaften und Methoden des Link-Taghilfsprogramms in der Referenz zur LinkTagHelper-Klasse.

href

Die bevorzugte Adresse der verknüpften Ressource. Die Adresse wird in allen Fällen an den generierten HTML-Code übergeben.

asp-fallback-href

Die URL eines Cascading Stylesheet (CSS), das als Fallback verwendet wird, falls die primäre URL nicht verfügbar ist.

asp-fallback-test-class

Der in der Formatvorlage definierte Klassenname, der zum Fallbacktest verwendet werden soll. Weitere Informationen finden Sie unter FallbackTestClass.

asp-fallback-test-property

Der CSS-Eigenschaftsname, der für den Fallbacktest verwendet werden soll. Weitere Informationen finden Sie unter FallbackTestProperty.

asp-fallback-test-value

Der CSS-Eigenschaftswert, der für den Fallbacktest verwendet werden soll. Weitere Informationen finden Sie unter FallbackTestValue.

Zusätzliche Ressourcen