Tautkan Pembantu Tag di ASP.NET Core

Artikel
11/30/2023

Link Tag Helper menghasilkan tautan ke file CSS utama atau fallback. Biasanya file CSS utama ada di Content Delivery Network (CDN).

A CDN:

Memberikan beberapa keuntungan performa vs menghosting aset dengan aplikasi web.
Tidak boleh diandalkan sebagai satu-satunya sumber untuk aset. CDN tidak selalu tersedia, oleh karena itu fallback yang andal harus digunakan. Biasanya fallback adalah situs yang menghosting aplikasi web.

Link Tag Helper memungkinkan Anda menentukan CDN untuk file CSS dan fallback saat CDN tidak tersedia. Link Tag Helper memberikan keuntungan performa CDN dengan ketahanan hosting lokal.

Markup berikut Razor menunjukkan head elemen file tata letak yang dibuat dengan templat aplikasi 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>

Berikut ini dirender HTML dari kode sebelumnya (di lingkungan non-Pengembangan):

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

Dalam kode sebelumnya, Link Tag Helper menghasilkan <meta name="x-stylesheet-fallback-test" content="" class="sr-only" /> elemen dan JavaScript berikut yang digunakan untuk memverifikasi file yang diminta bootstrap.css tersedia di CDN. Dalam hal ini, file CSS tersedia sehingga Pembantu Tag menghasilkan <link /> elemen dengan file CSS CDN.

Atribut Link Tag Helper yang umum digunakan

Lihat Menautkan Tag Helper untuk semua atribut, properti, dan metode Link Tag Helper.

href

Alamat pilihan sumber daya yang ditautkan. Alamat diteruskan dipikirkan ke HTML yang dihasilkan dalam semua kasus.

asp-fallback-href

URL lembar gaya CSS yang akan di-fallback jika URL utama gagal.

asp-fallback-test-class

Nama kelas yang ditentukan dalam lembar gaya yang akan digunakan untuk pengujian fallback. Untuk informasi selengkapnya, lihat FallbackTestClass .

asp-fallback-test-property

Nama properti CSS yang akan digunakan untuk pengujian fallback. Untuk informasi selengkapnya, lihat FallbackTestProperty .

asp-fallback-test-value

Nilai properti CSS yang akan digunakan untuk pengujian fallback. Untuk informasi selengkapnya, lihat FallbackTestValue .

Bagikan melalui