Search code examples
cssasp.net-mvctwitter-bootstrapcdn

asp.net mvc 5 - StyleBundle CdnFallbackExpression questions?

I've added bootstrap CSS files via a StyleBundle to my asp.net mvc 5 project.

(It uses as Cdn: https://www.asp.net/ajax/cdn#Bootstrap_Releases_on_the_CDN_14 )

  var bootstrapCssCdnPath = "http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css";
  var bootstrapCssBundle = new StyleBundle("~/bundles/css/bootstrap", bootstrapCssCdnPath).Include("~/Content/bootstrap.css");
  //bootstrapCssBundle.CdnFallbackExpression // ?
  bundles.Add(bootstrapCssBundle);

  var bootstrapThemeCssCdnPath = "http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap-theme.min.css";
  var bootstrapThemeCssBundle = new StyleBundle("~/bundles/css/bootstraptheme", bootstrapThemeCssCdnPath).Include("~/Content/bootstrap-theme.css");
  //bootstrapCssBundle.CdnFallbackExpression // ?
  bundles.Add(bootstrapThemeCssBundle);

However there is a problem: when I add an incorrect url as CDN (e.g. adding 'ahttp' instead of 'http') my custom "fallback" css file is not used, instead it shows 'ahttp://' in my html source. Same when I'm running my site on Debug or Release.

  1. Why is my fallback not being used?
  2. What is the CdnFallbackExpression for a StyleBundle? (and in particular for a bootstrap.css and bootstrap-theme.css)
  3. Should the .Include be the .min.css file or does it automatically search for the .min. version first?
  4. Is there a way to .Include multiple css files, using a Cdn with fallback, so that I don't have to create a new StyleBundle everytime per css file that uses a Cdn?
Solution

  • 1) This is a bug in the Microsoft ASP.NET Optimization Framework, documented here.

    2) The solution is to modify the CdnFallbackExpression to be a javascript function that both checks for the stylesheet and loads the fallback, thus ignoring the bad script from the Optimization Framework.

    Here is solution which provides a StyleBundle extension method to solve the problem: Style Bundle Fallback.

    3) There should be unminified version like bootstrap.css (not bootstrap.min.css). When you build your web application for release it uses .min version. More here: Bundler not including .min files.

    4) No, you can't use multiple CSS files with CDN (each of them must have its own bundle). Here is an article that explains when to use a CDN (or not) and why: Know When To CDN.