In the .NET 4.5 framework, ASP.NETMVC and ASP.NET Web Forms benefit from the System.Web.Optimization namespace. Applying bundling and minification in ASP.NET Web Forms is an easy process that is handled when you create a Web Forms project in Visual Studio 2012. You’ll notice in figure 5.9 that a BundleConfig.cs file has been cre- ated under the App_Start folder.
The Global.asax class file in your Solution Explorer will contain the following lines under the Application_Start method. The listing shows how a default Global.asax file will look when it contains a reference to BundleConfig.cs class file.
public class Global : HttpApplication {
void Application_Start(object sender, EventArgs e) {
// Code that runs on application startup
BundleConfig.RegisterBundles(BundleTable.Bundles);
BundleTable.EnableOptimizations = true;
} }
Listing 5.9 The Global.asax file
Figure 5.8 CSS and JavaScript after bundling and minification in ASP.NET MVC. There are only two requests for the CSS and the JavaScript.
Figure 5.9 The default BundleConfig.cs that is added to an ASP.NET Web Forms application upon creation in Visual Studio 2012
References the bundles that you will set up in the BundleConfig class under the App_Start folder.
If you need to test the bundling and minifying features while in Debug mode, simply add this line to force the enabling of the optimizations.
The Global.asax file in the listing will register the bundles you’re about to set up. It will do so as the application starts for the first time, so they’re ready to use as and when you need them. The following listing shows how to set up the correct 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 listing contains the code that will initialize the bundles for the JavaScript and CSS files. By using the BundleConfig class, you’re able to specify which files will get mini- fied and bundled when the application starts. Next, navigate to the Site.Master file in the Solution Explorer (figure 5.10).
Open the master page and reference the JavaScript and CSS files using the default bundles. Two new HTML helpers have been introduced in the ASP.NET 4.5 framework:
Styles and Scripts. They can both be used to render the full HTML that you need to reference your scripts and styles. This listing contains the code you need to apply to the Surf Store application.
<!DOCTYPE html>
<html lang="en">
<head>
<asp:ContentPlaceHolder runat="server" ID="HeadContent">
<meta charset="utf-8">
<title>Surf Store Application</title>
Listing 5.10 The BundleConfig class
Listing 5.11 Site.Master page with bundling and minification applied
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. You can then reference the Style bundle by its virtual path: “~/Styles/Css”.
Figure 5.10 The Site.Master file in an ASP.NET Web Forms application
71 Utilizing bundling in ASP.NET Web Forms
<link rel="shortcut icon" href="<%= "Images/favicon.ico" %>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<%= Styles.Render("~/Styles/Css")%>
<%= Scripts.Render("~/Scripts/Js")%>
The Scripts and Styles HTML helpers will minify and bundle the code when you’re in Release mode. When you’re in Debug mode, the helpers will simply return all of the JavaScript and CSS in individual HTML tags. When the application is compiled and run in Release mode, the code in listing 5.11 will produce HTML similar to that in figure 5.11.
The code in listing 5.10 will bundle and minify all the CSS and JavaScript files in the respective directories. Notice the hashtag that has been appended to the end of the file- name. This hashtag will be dynamic and only change when the contents of the file change.
By appending a different hashtag to the filename each time the contents change, you’re effectively ensuring that your users will receive a fresh copy of the contents.
If you run the application and check the Network Traffic tab in Internet Explorer’s developer tools (figure 5.12), you can immediately see the differences. The page previ- ously requested four static files, which meant four HTTP requests.
After applying the changes to the Site.Master page, the HTTP requests have been reduced and you can see the virtual paths that you referenced in the BundleConfig class (figure 5.13).
Updated CSS path using the Styles HTML helper. If the application is in Release mode, it will bundle and minify all CSS files in this directory.
The updated JavaScript path using the Scripts HTML helper. If the application is in Release mode, it will bundle and minify all JavaScript files in this directory.
Figure 5.11 The new HTML helpers automatically produce the HTML required for your bundles
Figure 5.12 CSS and JavaScript before bundling and minification in ASP.NET Web Forms.
Notice that there are four HTTP requests: two for the CSS and two for the JavaScript.
Adding these changes to the sample Surf Store application has been quick and easy.
Although you’ve run through standard implementations using bundling support in ASP.NET 4.5, I really like that this feature supports a rich extensibility API that enables you to customize the bundling settings to your personal needs.