Visual Studio 2012 Bundled có điều kiện

Question

Tôi mới bắt đầu làm việc với VS 2012 RC. Tôi đã tạo một trang thử nghiệm với một trang chính và một biểu mẫu web duy nhất. Hiện nay, tôi đang sử dụng mã này để gói toàn bộ Styles folder on the site:

Global.asax

BundleTable.Bundles.EnableDefaultBundles(); 

Site.Master

<link rel="stylesheet" type="text/css" href="Styles/css" /> 

Câu hỏi: Trang web thử nghiệm có tệp CSS cấp trang web kiểm soát giao diện tổng thể của trang web. Ngoài CSS cấp trang web, mỗi trang có thể có định nghĩa CSS của riêng chúng. Chỉ có thể bao gồm tệp site.css trong trang chính và sau đó thêm các tệp .css có điều kiện vào gói theo từng trang yêu cầu?

tôi đã cố gắng này trong mã đằng sau của Default.aspx nhưng nó đã không làm việc:

BundleTable.Bundles.Add(new Bundle("~/Styles/Default.css")); 

Answer 1

Đề nghị của tôi:

Chuyển đến Global.asax. Đảm bảo phương pháp Application_Start chứa dòng sau:

protected void Application_Start() 
{ 
    ... 
    BundleConfig.RegisterBundles(BundleTable.Bundles); 
} 

Tìm hoặc tạo lớp BundleConfig như sau, tốt hơn trong thư mục App_Start:

public class BundleConfig 
{ 
    public static void RegisterBundles(BundleCollection bundles) 
    { 
     ... 

     bundles.Add(new StyleBundle("~page1").Include(
      "~/Styles/site.css", 
      "~/Styles/page1.css")); 

     bundles.Add(new StyleBundle("~page2").Include(
      "~/Styles/site.css", 
      "~/Styles/page2.css")); 

     ... 

     bundles.Add(new StyleBundle("~pageN").Include(
      "~/Styles/site.css", 
      "~/Styles/pageN.css")); 

    } 
} 

Bây giờ sử dụng gói tương ứng trong mỗi trang thích hợp:

<link rel="stylesheet" type="text/css" href="Styles/page1" /> 

Hoặc tốt hơn từ mã:

@Styles.Render("~/Styles/page1") 

(đây là cshtml, nhưng cú pháp aspx là chắc chắn rất giống nhau).

Lưu ý rằng bạn phải có một gói riêng trên mỗi trang. Bạn không nên sửa đổi một và cùng một gói trên bay. Các gói có Url ảo. Trong ví dụ của bạn, nó chỉ là css. Các trình duyệt này được lưu trong bộ nhớ cache, vì vậy bất kể thời tiết bạn đã thay đổi nội dung của gói khi đang duyệt thì trình duyệt có thể cho rằng điều này giống nhau và không tìm nạp lại.

---

Nếu bạn không muốn để chăm sóc về việc thêm mỗi trang bằng tay để các phương pháp trên. Bạn có thể tự động hóa nó. mã sau đây có thể cung cấp cho bạn một ý tưởng như thế nào:

public class MyStyleHelper 
{ 
    public static string RenderPageSpecificStyle(string pagePath) 
    { 
     var pageName = GetPageName(pagePath); 
     string bundleName = EnsureBundle(pageName); 
     return bundleName; 
    } 

    public static string GetPageName(string pagePath) 
    { 
     string pageFileName = pagePath.Substring(pagePath.LastIndexOf('/')); 
     string pageNameWithoutExtension = Path.GetFileNameWithoutExtension(pageFileName); 
     return pageNameWithoutExtension; 
    } 

    public static string EnsureBundle(string pageName) 
    { 
     var bundleName = "~/styles/" + pageName; 
     var bundle = BundleTable.Bundles.GetBundleFor(bundleName); 
     if (bundle == null) 
     { 
      bundle = new StyleBundle(bundleName).Include(
       "~/styles/site.css", 
       "~/styles/" + pageName + ".css"); 
      BundleTable.Bundles.Add(bundle); 
     } 
     return bundleName; 
    } 
} 

Cách sử dụng:

<link rel="stylesheet" type="text/css" href="<%: MyStyleHelper.RenderPageSpecificStyle(Page.AppRelativeVirtualPath) %>" />