Link-Taghilfsprogramm in ASP.NET Core
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.
Häufig verwendete Attribute des Link-Taghilfsprogramms
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
ASP.NET Core
Feedback
https://aka.ms/ContentUserFeedback.
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Tickets als Feedbackmechanismus für Inhalte auslaufen lassen und es durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter:Einreichen und Feedback anzeigen für