Link Tag Helper trong ASP.NET Core
Tác giả: Rick Anderson
Link Tag Helper (trình trợ giúp thẻ link) tạo ra một liên kết đến tệp CSS (Cascading Style Sheets - bảng định kiểu) chính hoặc dự phòng. Thông thường tệp CSS chính nằm trên Content Delivery Network (CDN - mạng phân phối nội dung).
CDN:
- Cung cấp một số lợi ích về hiệu suất so với việc lưu trữ tài nguyên với ứng dụng web.
- Không nên được dựa vào là nguồn duy nhất cho tài nguyên. CDN không phải lúc nào cũng khả dụng, vì vậy nên sử dụng fallback (phương án dự phòng) đáng tin cậy. Thông thường, fallback là site lưu trữ ứng dụng web.
Link Tag Helper cho phép bạn chỉ định CDN cho tệp CSS và fallback khi CDN không khả dụng. Link Tag Helper cung cấp lợi ích hiệu suất của CDN cùng với tính bền vững của local hosting (lưu trữ cục bộ).
Razor markup (mã đánh dấu Razor) sau đây cho thấy phần tử head của tệp layout (bố cục) được tạo ra với template (mẫu) ứng dụng 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>HTML sau được render (kết xuất) từ đoạn code trên (trong môi trường không phải Development):
<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="stylesheet" crossorigin="anonymous" integrity=\abc<snip>BE=" ");
</script>
<link rel="stylesheet" href="/css/site.css" />
</head>Trong đoạn code trên, Link Tag Helper đã tạo ra phần tử <meta name="x-stylesheet-fallback-test" content="" class="sr-only" /> và JavaScript sau đây được sử dụng để kiểm tra xem tệp bootstrap.css được yêu cầu có khả dụng trên CDN không. Trong trường hợp này, tệp CSS khả dụng nên Tag Helper đã tạo ra phần tử <link /> với tệp CSS từ CDN.
Các thuộc tính Link Tag Helper thường dùng
Xem Link Tag Helper để biết tất cả các thuộc tính, thuộc tính và phương thức của Link Tag Helper.
href
Địa chỉ ưu tiên của tài nguyên được liên kết. Địa chỉ luôn được chuyển qua HTML được tạo ra trong mọi trường hợp.
asp-fallback-href
URL của stylesheet (bảng định kiểu) CSS để fallback trong trường hợp URL chính thất bại.
asp-fallback-test-class
Tên class (lớp CSS) được định nghĩa trong stylesheet để sử dụng cho kiểm tra fallback. Để biết thêm thông tin, xem FallbackTestClass.
asp-fallback-test-property
Tên thuộc tính CSS để sử dụng cho kiểm tra fallback. Để biết thêm thông tin, xem FallbackTestProperty.
asp-fallback-test-value
Giá trị thuộc tính CSS để sử dụng cho kiểm tra fallback. Để biết thêm thông tin, xem FallbackTestValue.