Visual Studio 2012条件捆绑

Question

我刚开始使用VS 2012 RC.我创建了一个包含母版页和单个Web表单的测试站点.目前,我正在使用此代码捆绑Styles网站上的整个文件夹:

Global.asax中

BundleTable.Bundles.EnableDefaultBundles();

的Site.Master

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

问题:测试站点有一个站点级CSS文件,用于控制站点的整体外观.除了站点级CSS之外,每个页面都可以有自己的CSS定义.是否可以仅在site.css主页中包含该文件,然后在每个页面需要时有条件地将.css文件添加到包中？

我在后面的代码中尝试了这个Default.aspx但它没有用:

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

Answer 1

我的建议:

转到Global.asax.确保该方法Application_Start包含以下行:

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

BundleConfig按如下方式查找或创建类,最好在文件夹中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"));

    }
}

现在在每个适当的页面中使用相应的bundle:

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

或者更好的代码:

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

(这是cshtml,但aspx语法肯定非常相似).

请注意,每页必须有一个单独的包.您不应该动态修改同一个包.捆绑包有虚拟网址.在你的例子中它只是css.这些都是由浏览器缓存的,因此无论天气如何,您都可以动态更改bundle的内容,浏览器可能会认为这是相同的,并且不会重新获取它.

如果您不想将每个页面手动添加到上述方法中.你可以自动化它.以下代码可以让您了解如何:

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

用法:

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