[ASP.NET MVC 4] Bundling

In the recent Web development environment, it is not rare that you need to reference many CSS and JS files across the site. Rather than reference them one by one, MVC 4 provides the “Bundling” feature that combine style or script files into a single resources.

1. MVC 3 Templates

If you look at the “_Layout.cshtml” file in MVC 3 templates, the css and js files are referenced individually.

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>

 

2. MVC 4 Templates

Create the MVC 4 application and look at the “_Layout.cshtml” file. You can see the following lines.

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")

Hover the “@Styles” or “@Scripts“. These classes are located in the “System.Web.Optimization” namespace.

 

3. Global.asax in MVC 4

What’s going on here?

Open the “Global.asax” and look at the “Application_Start()” method.

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

Interesting one is the “BundleConfig.RegisterBundles()“.

This method is defined in the “App_Start/BundleConfig.cs” file.  Open the file. You can see that a couple of bundles (ScriptBundle and StyleBundle) are added to the bundles collection.

 

4. Bundle Classes

The “ScriptBundle” and “StyleBundle” classes are derived from the “Bundle” class.

It is very easy to create a bundle.

  • Provide the virtual path to the constructor (Virtual path used to reference the Bundle from within a view)
  • Call the “Include()” method that specifies a set of files to be included in the Bundle

For example, you can create a jquery validation bundle like this:

bundles
  .Add(new ScriptBundle("~/bundles/jqueryval")
  .Include("~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*"));

The “~/bundles/jqueryval” will be used in a view to reference the bundle.

When you include files, you can use the wildcard characters “*“.

Another example is using the “{version}” wildcard.

bundles
  .Add(new ScriptBundle("~/bundles/jquery")
  .Include("~/Scripts/jquery-{version}.js"));

The -{version} basically maps to a version regex (\d+(?:.\d+){1,3}). You do not need to modify the reference when you upgrade the JavaScript libraries.

 

5. Using CDN

It is a common practice to use CDN(content delivery network) when you reference JavaScript libraries. Constructors of “Bundle” classes accept the second parameter string to specify the CDN location.

public static void RegisterBundles(BundleCollection bundles)
{
  bundles.UseCdn = true;
  var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";
  bundles
    .Add(new ScriptBundle("~/bundles/jquery", jqueryCdnPath)
    .Include("~/Scripts/jquery-{version}.js"));
}

 

6. Referencing the Bundle

In a view, you can use the static “Render(path)” method of the “Scripts” and “Styles” classes to refer to the bundles.

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")

You need to use the virtual path that you passed to the “Bundle” constructor.

 

7. Installing Web Optimization Framework

The MVC 4 templates make use of the optimization classes. But if you start with the empty project, you need do some tasks to use the MS ASP.NET Web Optimization Framework.

  • Go to “Tools” -> “Library Package Manager” -> “Manage NuGet Packages in Solution…”
  • In the “Online” tab, search “optimization”
  • Install “Microsoft ASP.NET Web Optimization Framework”

bundle1

The necessary dlls are installed but when you call the “Render()” methods in a view, you will get an compile error. You need to add the namespace to the “Web.config” in the “/Views” folder.

<system.web.webPages.razor>
  <pages pageBaseType="System.Web.Mvc.WebViewPage">
    <namespaces>
      <add namespace="System.Web.Optimization"/>
    </namespaces>
  </pages>
</system.web.webPages.razor>

Note that it is the “Web.config” in the “/View” folder, not in the root folder.

 

One thought on “[ASP.NET MVC 4] Bundling

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s