What's the difference between these approaches to reference bundled CSS in ASP.NET Web Forms 4.5?

Question

I used Visual Studio 2012 and the built-in template (under Add -> New Project) to create a brand new ASP.NET Web Forms web application project targeting .NET Framework 4.5. Inside the Site.Master page provided by default I see some markup that includes CSS on the page, which looks like this:

<webopt:BundleReference runat="server" Path="~/Content/css" />

However, I noticed that I can potentially use this other code instead....

<%: Styles.Render("~/Content/css") %>

When I look at the rendered page, the result appears to be the same thing. What is the difference between using webopt:BundleReference and using Styles.Render?

Is one of these a better approach than the other?

Answer 1

The <%: Styles.Render %> syntax is for ASP.NET MVC (which can't use ASP.NET Controls as there is no real page context for them to use). The BundleReference Control is for WebForms.

ASP.NET MVC can use WebForms as a view engine as an alternative to Razor (where you see too many '@' symbols), that's why there's a bit of crossover.

I imagine they added the Control to keep things consistent, rather than requiring WebForms folks to use the page's render function (the <% tags).

Answer 2

When I look at the rendered page, the result appears to be the same thing. What is the difference between using webopt:BundleReference and using Styles.Render?

As understand it, the BundleReference is used not only for including script and style references, but for bundling them together for efficiency of bandwidth. See the tutorial Bundling and Minification. I think the latter is just a helper for including one or more scripts that fit URL pattern.