Combine Script Files using ScriptBundle in ASP.NET MVC
Here, you will learn how to combine multiple JavaScript files and create a script bundle that can be returned in a single HTTP request in ASP.NET MVC.
The ScriptBundle class represents a bundle that does JavaScript minification and bundling.
You can create style or script bundles in BundleConfig class under App_Start folder in an ASP.NET MVC project. (you can create your own custom class instead of using BundleConfig class, but it is recommended to follow standard practice.)
The following example demonstrates how to create a script bundle.
using System.Web;
using System.Web.Optimization;
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/bs-jq-bundle").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/jquery-3.3.1.js"));
//the following creates bundles in debug mode;
//BundleTable.EnableOptimizations = true;
}
}
In the above example, we created a new bundle by creating an instance of the ScriptBundle class and specified the virtual path and bundle name in the constructor. The ~/bundles/ is a virtual path and bs-jq-bundle is a bundle name.
Then, we added two js files, bootstrap.js, and jquery-3.3.1.js in this bundle.
The bundles.Add() method is used to add new bundles into the BundleCollection.
By default, the above bs-jq-bundle bundle will be created in the release mode. Use BundleTable.EnableOptimizations = true if you want to see bundles in the debug mode.
Now, to include the above bs-jq-bundle in your webpage, use Scripts.Render() method in the layout view, as shown below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
@Scripts.Render("~/bundles/bootstrap")
</head>
<body>
@*html code removed for clarity *@
</body>
</html>
Now, when you run the application in the release mode, you will see the bundle is created and loaded in a single request.
Include a Directory in Bundle
Use the IncludeDirectory method to add all the files under a particular directory in a bundle, as shown below.
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/scripts")
.IncludeDirectory("~/Scripts/","*.js", true));
}
Using Wildcards
Most third party JavaScript files include a version in the name of the script file.
For example, jQuery includes the version in the file name. The wildcard {version} will automatically pick up an available version file.
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery")
.Include( "~/Scripts/jquery-{version}.js"));
}
}
Using CDN
You can also create a bundle of the files from the Content Delivery Network (CDN), as shown below.
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
var cdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";
bundles.Add(new ScriptBundle("~/bundles/jquery", cdnPath)
.Include( "~/Scripts/jquery-{version}.js"));
}
}
BundleConfig.RegisterBundle() from the Application_Start event in the Global.asax.cs file.
So, all the bundles are added into the BundleCollection at the starting of an application.