ASP.NET Core'da Etiket Yardımcısı'nın bağlantısını sağlama

  • Makale

Gönderen Rick Anderson

Bağlantı Etiketi Yardımcısı bir birincil dosyaya bağlantı oluşturur veya CSS dosyasına geri döner. Birincil CSS dosyası genellikle bir Content Delivery Network (CDN) üzerindedir.

A CDN:

  • Varlığı web uygulamasıyla barındırmaya kıyasla çeşitli performans avantajları sağlar.
  • Varlığın tek kaynağı olarak bağlı olmamalıdır. CDN'ler her zaman kullanılamaz, bu nedenle güvenilir bir geri dönüş kullanılmalıdır. Genellikle geri dönüş, web uygulamasını barındıran sitedir.

Bağlantı Etiketi Yardımcısı, CSS dosyası için bir CDN ve CDN kullanılabilir olmadığında bir geri dönüş belirtmenize olanak tanır. Bağlantı Etiketi Yardımcısı, yerel barındırmanın sağlamlığıyla bir CDN'nin performans avantajını sağlar.

Aşağıdaki Razor işaretleme, head ASP.NET Core web uygulaması şablonuyla oluşturulan bir düzen dosyasının öğesini gösterir:

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

Aşağıdaki, önceki koddan (Geliştirme olmayan bir ortamda) HTML olarak işlenir:

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

Yukarıdaki kodda Bağlantı Etiketi Yardımcısı, istenen bootstrap.css dosyanın CDN'de kullanılabilir olduğunu doğrulamak için kullanılan öğesini ve aşağıdaki JavaScript'i oluşturmİştir<meta name="x-stylesheet-fallback-test" content="" class="sr-only" />. Bu durumda CSS dosyası kullanılabilir olduğundan Etiket Yardımcısı, cdn CSS dosyasıyla öğeyi <link /> oluşturmşturdu.

Tüm Bağlantı Etiketi Yardımcısı öznitelikleri, özellikleri ve yöntemleri için bkz. Bağlantı Etiketi Yardımcısı.

Href

Bağlı kaynağın tercih edilen adresi. Adres, her durumda oluşturulan HTML'ye geçirilir.

asp-fallback-href

Birincil URL'nin başarısız olması durumunda geri dönüş için CSS stil sayfasının URL'si.

asp-fallback-test-class

Geri dönüş testi için kullanılacak stil sayfasında tanımlanan sınıf adı. Daha fazla bilgi için bkz. FallbackTestClass.

asp-fallback-test-property

Geri dönüş testi için kullanılacak CSS özellik adı. Daha fazla bilgi için bkz. FallbackTestProperty.

asp-fallback-test-value

Geri dönüş testi için kullanılacak CSS özellik değeri. Daha fazla bilgi için bkz. FallbackTestValue.

Ek kaynaklar