Bundling jQuery in ASP.NET MVC

Model View Controller (MVC) is a design pattern that separates design (Model), presentation (View), and action (Controller). Because of its popularity with developers, Visual Studio provides ready templates that are used to create MVC projects.

Similar to web forms, jQuery can be included in MVC views using the <script> tag. In this example, however, let's take a look at the use of bundling for this purpose.

Bundling helps you reduce the number of HTTP requests made by the browser. It is a feature that allows style sheets, JavaScript, or other files to be combined together in a single file called a bundle. This combined file can be downloaded as one unit using a single HTTP request.

Getting ready

1. Launch a new ASP.NET Web Application project in Visual Studio using the Empty template. Ensure that the MVC checkbox is checked, as shown in the following screenshot:
   
2. This will create a project with MVC folders. Right-click on the Controllers folder in the Solution Explorer tab, and go to Add | Controller... as shown in the following screenshot:
   
3. This will launch the Add Scaffold dialog box. Select MVC 5 Controller – Empty, and click on the Add button:
   
4. On being prompted to add a name for the controller, type HomeController and click on the Add button:
   
5. Next, open the HomeController in the source mode, and right-click on the Index action method, as shown in the following screenshot. Click on Add View... as shown in the following screenshot:
   
6. This will launch the Add View dialog box. From the Template field, select Empty (without model). Uncheck the Use a layout page option and click the Add button to continue:
   

   Note

   In the remaining recipes, when asked to create a MVC application, follow steps 1 to 6 as mentioned earlier.

7. To use bundling, we need to install the ASP.NET Web Optimization package. This can be done from NuGet. From the File menu, launch NuGet by navigating to Project | Manage NuGet Packages. Select Microsoft.AspNet.Web.Optimization from the list of available packages. If the package is not visible, search for web.optimization, as shown in the following screenshot. Click on the Install button to download and install the latest version:
   
8. Lastly, create a Scripts folder in the project and include the jQuery library files in the folder.

How to do it…

Follow these steps to bundle jQuery in ASP.NET MVC:

1. Open the BundleConfig class in the App_Start folder in the MVC project. If the file does not exist, create a new module (VB)/class (C#) in the App_Start folder, and name it BundleConfig.vb/BundleConfig.cs.
2. In BundleConfig.vb/BundleConfig.cs, add a namespace to System.Web.Optimization at the top of the file:

   For VB, the code is as follows:

   Imports System.Web.Optimization

   For C#, the code is as follows:

   using System.Web.Optimization;

3. Register and configure a bundle for jQuery in the RegisterBundles method in BundleConfig as follows:

   For VB, the code is as follows:

   Public Module BundleConfig
      Public Sub RegisterBundles(ByVal bundles As BundleCollection)
         bundles.Add(New ScriptBundle("~/Scripts/jquery").Include(
                   "~/Scripts/jquery-{version}.js"))
      End Sub
   End Module

   For C#, the code is as follows:

   public class BundleConfig
   {
       public static void RegisterBundles(BundleCollection bundles)
       {
          bundles.Add(new ScriptBundle("~/Scripts/jquery").Include(
                   "~/Scripts/jquery-{version}.js"));
       }
   }

4. To enable bundling in the development mode (optional), add the following code to the RegisterBundles method:

   For VB, the code is as follows:

   BundleTable.EnableOptimizations = True

   For C#, the code is as follows:

   BundleTable.EnableOptimizations = true;

5. In the Global.asax file, include the namespace for System.Web.Optimization, as shown in step 2 mentioned previously. Then, register the bundle in the Application_Start method as follows:

   For VB, the code is as follows:

   BundleConfig.RegisterBundles(BundleTable.Bundles)

   For C#, the code is as follows:

   BundleConfig.RegisterBundles(BundleTable.Bundles);

6. Now, open the Index view and include the namespace for System.Web.Optimization, as shown in the following code:

   For VB, the code is as follows:

   @Imports System.Web.Optimization

   For C#, the code is as follows:

   @using System.Web.Optimization

7. Next, add the script reference for jQuery to the view in the <head> element as follows:

   @Scripts.Render("~/Scripts/jquery")

Note

Bundling is disabled in the debug mode by setting the debug attribute to true in the <compilation> element in the web.config file. To override this setting and enable bundling in the debug mode, set the EnableOptimizations property of the BundleTable class to true in the RegisterBundles method.

Unless EnableOptimizations is set to true, or the debug attribute is set to false, the files will not be bundled and the debug versions of the files will be used instead of the minified versions.

How it works…

Bundling jQuery in ASP.NET MVC can be done by following these steps:

1. The wildcard string used for bundling jQuery ~/Scripts/jquery-{version}.js includes the development as well as the minified versions. The .vsdoc file, which is used by IntelliSense, is not included in the bundle.
2. When the debug mode is on, the corresponding debug version is used. In the release mode, the minified version is bundled.
3. On running the view in a browser, the bundled file can be seen on viewing the source in the browser window, as shown in the following HTML markup:
   

See also

The Using a CDN to load jQuery in MVC recipe