Link Tag Helper in ASP.NET Core
L'helper tag di collegamento genera un collegamento a un file CSS primario o di fallback. In genere il file CSS primario si trova in un rete per la distribuzione di contenuti (rete CDN).
Un rete CDN:
- Offre diversi vantaggi in termini di prestazioni rispetto all'hosting dell'asset con l'app Web.
- Non deve essere considerato come l'unica origine per l'asset. rete CDN non sono sempre disponibili, pertanto è consigliabile usare un fallback affidabile. In genere il fallback è il sito che ospita l'app Web.
L'helper tag di collegamento consente di specificare un rete CDN per il file CSS e un fallback quando il rete CDN non è disponibile. L'helper tag di collegamento offre il vantaggio delle prestazioni di un rete CDN con l'affidabilità dell'hosting locale.
Il markup seguente Razor illustra l'elemento head
di un file di layout creato con il modello di app Web 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>
Il rendering del codice HTML seguente viene eseguito dal codice precedente (in un ambiente non di sviluppo):
<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>
Nel codice precedente, l'helper tag di collegamento ha generato l'elemento <meta name="x-stylesheet-fallback-test" content="" class="sr-only" />
e il codice JavaScript seguente, usato per verificare che il file richiesto bootstrap.css
sia disponibile nel rete CDN. In questo caso, il file CSS era disponibile in modo che l'helper tag generasse l'elemento <link />
con il file CSS rete CDN.
Attributi helper tag di collegamento comunemente usati
Vedere Link Tag Helper (Helper tag di collegamento) per tutti gli attributi, le proprietà e i metodi dell'helper tag di collegamento.
href
Indirizzo preferito della risorsa collegata. L'indirizzo viene passato al codice HTML generato in tutti i casi.
asp-fallback-href
URL di un foglio di stile CSS a cui eseguire il fallback nel caso in cui l'URL primario non riesca.
asp-fallback-test-class
Nome della classe definito nel foglio di stile da utilizzare per il test di fallback. Per ulteriori informazioni, vedere FallbackTestClass.
asp-fallback-test-property
Nome della proprietà CSS da utilizzare per il test di fallback. Per ulteriori informazioni, vedere FallbackTestProperty.
asp-fallback-test-value
Valore della proprietà CSS da utilizzare per il test di fallback. Per ulteriori informazioni, vedere FallbackTestValue.
Risorse aggiuntive
Commenti e suggerimenti
https://aka.ms/ContentUserFeedback.
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedereInvia e visualizza il feedback per