Tag Helper Image dans ASP.NET Core

  • Article

Par Rick Anderson

Le Link Tag Helper génère un lien vers un fichier CSS principal ou de secours. En règle générale, le fichier CSS principal se trouve sur un réseau de distribution de contenu (CDN).

Un CDN :

  • Offre plusieurs avantages en matière de performances par rapport à l’hébergement de la ressource avec l’application web.
  • Ne doit pas être considéré comme la seule source de la ressource. Les CDN ne sont pas toujours disponibles. Par conséquent, un secours fiable doit être utilisé. En règle générale, le site hébergeant l’application web est le secours.

Le Link Tag Helper vous permet de spécifier un CDN pour le fichier CSS et un secours lorsque le CDN n’est pas disponible. Le Link Tag Helper offre l’avantage en matière de performances d’un CDN avec la robustesse de l’hébergement local.

Le balisage Razor suivant montre l’élément head d’un fichier de disposition créé avec le modèle d’application 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>

Le code HTML suivant est affiché à partir du code précédent (dans un environnement non-développement) :

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

Dans le code précédent, le Tag Helper link a généré l’élément <meta name="x-stylesheet-fallback-test" content="" class="sr-only" /> et le code JavaScript suivant qui est utilisé pour vérifier que le fichier bootstrap.css demandé est disponible sur le CDN. Dans ce cas, le fichier CSS étant disponible, le Tag Helper a généré l’élément <link /> avec le fichier CSS CDN.

Pour connaître tous les attributs, propriétés et méthodes de Link Tag Helper, consultez Link Tag Helper.

href

Adresse préférée de la ressource liée. L’adresse est passée au code HTML généré dans tous les cas.

asp-fallback-href

URL d’une feuille de style CSS à laquelle effectuer le secours en cas d’échec de l’URL principale.

asp-fallback-test-class

Nom de classe défini dans la feuille de style à utiliser pour le test de secours. Pour plus d’informations, consultez FallbackTestClass.

asp-fallback-test-property

Nom de la propriété CSS à utiliser pour le test de secours. Pour plus d’informations, consultez FallbackTestProperty.

asp-fallback-test-value

Valeur de propriété CSS à utiliser pour le test de secours. Pour plus d’informations, consultez FallbackTestValue.

Ressources supplémentaires