Adding Bundles to ASP.NET 4.0 Web Applications

I recently encountered an opportunity while updating (rewriting the HTML) the UI on an existing application. Having worked on a a couple .Net 4.5/MVC 4 applications previously and learning the awesomeness of the .NET bundling functionality, I wanted to see if I could bring that functionality back into a .Net 4.0 Web Forms application. I hadn't heard of anyone doing it, but doesn't mean it can't happen.

I ran across a couple sites which lead me in the correct direction. They both target .Net 4.5. The Bundles and Minify CSS and Javascript in your ASP.Net Web Form Web Site post pointed me to the Microsoft ASP.NET Web Optimization Framework NuGet package. It didn't say that it required the .Net 4.5 framework so I added it to my project and it worked without issue.

using System.Web.Optimization;
public namespace SomeNS {
public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new StyleBundle("~/bundles/style.css").Include(
            "~/Content/bootstrap-cust.min.css",
            "~/Content/styles.css"));

        bundles.Add(new StyleBundle("~/bundles/kui.css").Include(
            "~/Content/styles/kendo.common.css",
            "~/Content/styles/kendo.default.css"));

        bundles.Add(new ScriptBundle("~/bundles/kui.js").Include(
                "~/Scripts/kendo.core.js",
                "~/Scripts/kendo.calendar.js",
                "~/Scripts/kendo.popup.js",
                "~/Scripts/kendo.datepicker.js",
                "~/Scripts/kendo.validator.js"));

        bundles.Add(new ScriptBundle("~/bundles/Common.js").Include(
            "~/Scripts/jquery-1.9.1.js",
            "~/Scripts/Common.js"));

        bundles.Add(new ScriptBundle("~/bundles/UserCommon.js").Include(
            "~/Secure/User/Scripts/Script.js",
            "~/Secure/User/Scripts/CustomValidation.js"));

        bundles.Add(new ScriptBundle("~/bundles/SysAdminCommon.js").Include(
            "~/Scripts/jquery-ui-1.8.17.custom.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap.js").Include(
            "~/Scripts/bootstrap-cust.js"));

        BundleTable.EnableOptimizations = true;
    }
}
}

With the NuGet package added to the project all of the functionality surrounding the CDN functionality is available.

Next add the following line to the Application_Start function in the Global.asax.

BundleConfig.RegisterBundles(BundleTable.Bundles);

The post says to use the following block to get the scripts to render. This doesn't work because Scripts/Styles do are not available.

<asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/Scripts/jquery") %>
        <%: Styles.Render("~/Styles/css") %>
</asp:PlaceHolder>

This is not a show stopper; the functions merely generate standard HTML elements. The style bundles can be added to the application pages like the example below.

<link rel="stylesheet" href="/bundles/style.css" type="text/css" />

Similarly, the script bundles can be added to the application pages like the example below.

<script src="/bundles/bootstrap.js"></script>

Using Firebug/developer tools/fiddler, it is easy to see that the files are bundled and minified.