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.
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:
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:
This will launch the Add Scaffold dialog box. Select MVC 5 Controller – Empty, and click on the Add button:
On being prompted to add a name for the controller, type
HomeControllerand click on the Add button:
Next, open the HomeController in the source mode, and right-click on the
Indexaction method, as shown in the following screenshot. Click on Add View... as shown in the following screenshot:
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:
To use bundling, we need to install the ASP.NET Web Optimization package. This can be done from NuGet. From the
Filemenu, 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 forweb.optimization, as shown in the following screenshot. Click on the Install button to download and install the latest version:
Lastly, create a
Scriptsfolder in the project and include the jQuery library files in the folder.
Follow these steps to bundle jQuery in ASP.NET MVC:
Open the
BundleConfigclass in theApp_Startfolder in the MVC project. If the file does not exist, create a newmodule(VB)/class(C#) in theApp_Startfolder, and name itBundleConfig.vb/BundleConfig.cs.In
BundleConfig.vb/BundleConfig.cs, add a namespace toSystem.Web.Optimizationat 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;
Register and configure a bundle for jQuery in the
RegisterBundlesmethod inBundleConfigas 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 ModuleFor 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")); } }To enable bundling in the development mode (optional), add the following code to the
RegisterBundlesmethod:For VB, the code is as follows:
BundleTable.EnableOptimizations = True
For C#, the code is as follows:
BundleTable.EnableOptimizations = true;
In the
Global.asax file, include the namespace forSystem.Web.Optimization, as shown in step 2 mentioned previously. Then, register the bundle in theApplication_Startmethod as follows:For VB, the code is as follows:
BundleConfig.RegisterBundles(BundleTable.Bundles)
For C#, the code is as follows:
BundleConfig.RegisterBundles(BundleTable.Bundles);
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
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.
Bundling jQuery in ASP.NET MVC can be done by following these steps:
The wildcard string used for bundling jQuery
~/Scripts/jquery-{version}.jsincludes the development as well as the minified versions. The.vsdocfile, which is used by IntelliSense, is not included in the bundle.When the debug mode is on, the corresponding debug version is used. In the release mode, the minified version is bundled.
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:
