Visual Studio 2012条件捆绑
我刚开始使用VS 2012 RC。我创建了一个包含主页和单个Web表单的测试网站。目前,我使用这个代码捆绑在网站上整个Styles
文件夹:Visual Studio 2012条件捆绑
的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"));
我的建议:
转到Global.asax
。确保方法Application_Start
包含以下行:
protected void Application_Start()
{
...
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
找到或创造BundleConfig
类,如下所示,preferrably文件夹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"));
}
}
现在使用相应的捆绑在每一个相应的页面:
<link rel="stylesheet" type="text/css" href="Styles/page1" />
或更好的代码:
@Styles.Render("~/Styles/page1")
(这是cshtml
,但aspx
语法肯定非常相似)。
请注意,每个页面必须有单独的包。您不应该即时修改同一个包。捆绑包有虚拟的Url。在你的例子中,它只是
css
。这些由浏览器缓存,所以无论天气如何,您已经改变了捆绑的内容,浏览器可能会认为这是相同的,不会重新获取它。
如果你不想花费大约手动添加每一个网页上面的方法治疗。你可以自动化它。下面的代码可以给你一个想法如何:
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) %>" />
我错了,或者您的自动化示例假设这是一个MVC应用程序? – 2012-07-25 23:25:55
嗨詹姆斯希尔,是的,我的第一个快速草稿**是** MVC。这是记事本编码,也有一些错误。现在我将它重写成纯ASP并进行测试。它似乎运作良好。请参阅我的编辑。 – 2012-07-26 07:26:49
仅供参考 - ''ResolveUrl()'应该添加到您的使用。它不会没有它的工作。 – 2012-08-14 19:28:32
如果你只装在主的site.css,然后页面的CSS文件,那么你为什么要捆绑? – 2012-07-20 13:31:44
@TimBJames,我*加载整个文件夹的内容。我想只加载母版页中的站点级CSS,然后根据需要捆绑其他CSS文件。 – 2012-07-20 13:34:05
第一次阅读此内容。这不是打破了捆绑的目的吗?毕竟,如果没有绑定,你会在第一次加载时加载site.css和page1.css,然后当进入第2页时,它只会加载page2.css,第3页的page3.css等等。假设页面特定的CSS文件通常比一般站点小很多,捆绑你会在每个页面中加载一个不同的大文件,如果没有捆绑,你会在每个页面中加载一个小文件,只有改进会成为你第一页加载1文件,而不是2(相同的总大小) – Rodolfo 2013-10-02 20:37:04