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.

Load Bundle in Browser

 Những điểm cần nhớ :

  1. Bundling and Minification giảm thiểu thời gian tải tập tin script hoặc tập tin css sau đó giảm thiểu thời gian tải trang.
  2. MVC cung cấp các lớp ScriptBundle, StyleBundle and DynamicFolderBundle .
  3. StyleBundle thu nhỏ các tập tin CSS.
  4. Tạo các gói script hoặc css trong lớp BundleConfig có trong thư mục App_Start.
  5. Sử dụng ký tự đại diện {Version} để hiển thị các tệp phiên bản có sẵn khi chạy.
  6. Sử dụng phương thức Styles.Render("bundle name") để gọi bundles trong razor.