You’ve learned a bit about the process of bundling in Visual Studio 2012, and now it’s time to dive into specific coding examples. This section covers the steps that you’ll need to perform in order to enable bundling in your ASP.NETMVC web application.
You’ll be using the Surf Store application as a reference for this example.
When you create an MVC 4 project in Visual Studio 2012, you’ll be presented with a screen similar to the image in figure 5.4 which shows the available project templates.
Once you’ve chosen your project template, a BundleConfig.cs file will appear in your App_Start folder of your project. As already mentioned, this can be used to set the Script and Style bundles and their associated paths.
The following listing shows how a default Global.asax file will look when it contains a reference to the BundleConfig class.
Figure 5.4 Creating a new MVC 4 project in Visual Studio 2012
67 Utilizing bundling in ASP.NET MVC
protected void Application_Start() {
AreaRegistration.RegisterAllAreas();
WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
The Global.asax file will register the bundles that you’re about to set up. The next list- ing contains the code needed to set up your bundles in the BundleConfig class.
public class BundleConfig {
public static void RegisterBundles(BundleCollection bundles) {
bundles.Add(new ScriptBundle("~/Scripts/Js").Include(
"~/Scripts/bootstrap-alert.js", "~/Scripts/jquery-1.7.2.js"
));
bundles.Add(new StyleBundle("~/Styles/Css").Include(
"~/Content/Css/bootstrap.css",
"~/Content/Css/bootstrap-responsive.css"
));
} }
The previous listing shows how the different bundles in an application can be set up.
You’re able to add multiple bundles to the BundleConfig class, then call them by their virtual path. Finally, you need to add these bundles and their virtual paths to the Lay- out view. Navigate to the _Layout.cshtml master view file in your Solution Explorer, as shown in figure 5.5.
You’re using the JavaScript and CSS file references from listing 5.7. Open the view and reference the JavaScript and CSS files using the default bundles. Two new HTML help- ers have been introduced in the ASP.NET 4.5 framework: @Styles and @Scripts. Both, as shown in the next listing, can be used as an easy way to render the full HTML you need to reference your scripts and styles.
Listing 5.6 The Global.asax file
Listing 5.7 The BundleConfig class for the SurfStore application
References the bundles you’ll set up in the BundleConfig class in the App_Start folder.
Adds a new list of JavaScript files to the bundles in the application.
You can then reference the Script bundle by its virtual path: “~/
Scripts/Js”.
Adds a new list of CSS files to the bundles in the application. Once this is in place, you can reference the Style bundle by its virtual path: “~/
Styles/Css”.
Figure 5.5 The Layout view in an MVC project
<!DOCTYPE html>
<html lang="en">
<head>
<asp:ContentPlaceHolder runat="server" ID="HeadContent">
<meta charset="utf-8">
<title>Surf Store Application</title>
<link rel="shortcut icon"
href="@Url.Content("~/Content/Images/favicon.ico")" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
@System.Web.Optimization.Styles.Render("~/Styles/Css") @System.Web.Optimization.Scripts.Render ("~/Scripts/js")
When the application is compiled and run, the HTML helpers in the previous listing will produce HTML similar to that in figure 5.6.
The code in figure 5.6 will bundle and minify all the CSS and JavaScript files in their respective directories. Notice the hashtag appended to the end of the filename. This hashtag is dynamic and will change only when the contents of the file change. By appending a different hashtag to the filename each time the contents change, you’re effectively ensur- ing that your users will receive a fresh copy of the contents each time they visit your website.
If you run the page against the developer tools in Internet Explorer, you can immediately see the differences. As shown in figure 5.7, the page requested four static files previously, which meant four HTTP requests.
Listing 5.8 _Layout.cshtml with bundling and minification applied
The updated CSS path using the Styles HTML helper.
This will bundle and minify all CSS files in this directory.
The updated JavaScript path using the Scripts HTML helper.
This will bundle and minify all JavaScript files in this directory.
Figure 5.6 The new HTML helpers automatically produce the HTML required for your bundles.
Figure 5.7 CSS and JavaScript before bundling and minification in ASP.NET MVC. Notice that there are four HTTP requests: two for the CSS and two for the JavaScript.
69 Utilizing bundling in ASP.NET Web Forms
After applying the changes to the Layout view, the HTTP requests have been reduced and you can see the virtual paths that you referenced in the BundleConfig class in figure 5.8.
Applying bundling to your ASP.NETMVC application has been made really easy with the new features in Visual Studio 2012. The new HTML helpers work with both the Razor and ASPX view engines. They are easy to use and don’t require major changes to your existing development workflow.