Link Tag Helper in ASP.NET Core

  • Articolo

Di Rick Anderson

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.

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