ASP.NET - MVC - StyleBundle
StyleBundle trong MVC ASP.NET
ASP.NET MVC API có lớp StyleBundle thực hiện thu nhỏ và đóng gói CSS. StyleBundle cũng kế thừa từ một lớp Bundle vì vậy nó hỗ trợ các phương thức tương tự như ScriptBundle.
Như đã đề cập trong phần trước, bạn nên tạo các gói tập tin script và tập tin css trong phương thức RegisterBundles () của lớp BundleConfig có trong tệp App_Start -> BundleConfig.cs.
Đoạn mã sau đây cho thấy một phần của phương thức RegisterBundles ().
Sử dụng phương thức ScriptsInclude hoặc IncludeDerictory để thêm tập tin css vào chung một gói:
Ví dụ: StyleBundle
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/bundles/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"
));
// add ScriptBundle here..
}
}
Như bạn có thể thấy trong ví dụ trên, chúng ta đã tạo một thực thể StyleBundle với tên gói là đường dẫn ảo. Tên gói (đường dẫn ảo) phải bắt đầu bằng ~ /. Sử dụng phương thức Include () hoặc IncludeDirectory () với tên tệp css dưới dạng chuỗi.
Bạn có thể sử dụng đường dẫn ký tự đại diện và CDN giống như ScriptBundle như trong phần trước.
Sử dụng Style Bundle trong Razor
Bạn có thể sử dụng StyleBundle trong layout và hiển thị một loạt các tệp css trong một yêu cầu bằng cách sử dụng lớp Styles tĩnh. Styles là một lớphelper để kết xuất các gói css.
Ví dụ: Sử dụng Style Bundle trong View
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/bundles/css")
</head>
<body>
@*html code removed for clarity *@
</body>
</html>
Như trong ví dụ trên, sử dụng phương thức Styles.Render () để gọi gói css được chỉ định khi chạy. Mở công cụ phát triển của trình duyệt và kiểm tra xem nó đã thu nhỏ và tải các tập tin css như hiển thị bên dưới.
Những điểm cần nhớ :