w3resource

ScriptBundle in ASP.NET MVC


In the previous tutorial we learnt about bundling and how they work in an ASP.NET MVC application.

In this tutorial, we will learn how to create a bundle of multiple JavaScript files into one http request. We will do this using the ASP.NET MVC API called ScriptBundle. The ScriptBundle class does JavaScript minification and bundling in an ASP .NET MVC application.

The BundleConfig.cs file is located at App_Start\BundleConfig.cs file in the MVC folders. The BundleConfig.cs file is created by MVC framework by default. Our custom bundling code should be written in the BundleConfig.RegisterBundles() method.

Example: BundleConfig.RegisterBundle()

using System.Web;
using System.Web.Optimization;
public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {   
        ScriptBundle scriptBundle = new ScriptBundle("~/bundles/bootstrap");
        scriptBundle.Include(
                            "~/Scripts/bootstrap.js",
                            "~/Scripts/scripts.js"
                          );
        //Add the bundle into BundleCollection
        bundles.Add(scriptBundle);
        BundleTable.EnableOptimizations = true;
    }
}

The above code snippet illustrated the RegisterBundles class. In this example, we have created a bundle of two JavaScript files, bootstrap.js and scripts.js using ScriptBundle for demo purposes.

  1. At first, we created an instance of ScriptBundle class by specifing the bundle name as a constructor parameter. This bundle name is a virtual path starting with ~/. You can give anything in virtual path but it's recommended to give a path that will be easy to identify as a bundle. Here, we have given "~/bundles/bootstrap" path, so that we can easily identify that this bundle includes bootstrap related files.
  2. Use Include method to add one or more JS files into a bundle with its relative path after root path using ~ sign.
  3. Final, add the bundle into BundleCollection instance, which is specified as a parameter in RegisterBundle() method.
  4. Last, BundleTable.EnableOptimizations = true enables bundling and minification in debug mode. If you set it to false then it will not do bundling and minification.

We can also use IncludeDirectory method of bundle class to add all the files under particular directory to a bundle as shown below.

ScriptBundle Example:

public static void RegisterBundles(BundleCollection bundles)
{            
bundles.Add(new ScriptBundle("~/bundles/scripts").IncludeDirectory("~/Scripts/","*.js",true));
}

Thus, you can create a bundle of JavaScript files using ScriptBundle. At the start of an MVC application, the framework invokes BundleConfig.RegisterBundle() method from the Application_Start event in Global.asax.cs file, so that it can add all the bundles into BundleCollection at the starting of an application.

Example: Invoke RegisterBundle() in Application_Start event

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        BundleConfig.RegisterBundles(BundleTable.Bundles);
    }
}

Using Wildcards

Sometime third-party script files include versions in a name of script file. So, it is not advisable to change the code whenever you upgrade the version of script file. With the use of wildcards, you don't have to specify a version of a script file. It automatically includes files with the version available.

For example, JQuery files includes the version in a name. So you can use {version} wildcard to pickup a version based on available version.

Example: Wildcard with bundle

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

With the above configuration, our project can pickup versioned jQuery files with changing our code or recompiling.

Using CDN

We can also use Content Delivery Network to load script files. For instance, we can load Jquery library from CDN as shown in the code snippet below:

Example: Load files from CDN

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {            
        var cdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js";
        bundles.Add(new ScriptBundle("~/bundles/jquery", cdnPath)
               .Include( "~/Scripts/jquery-{version}.js"));
    }
}

In the above code, JQuery will be requested from the CDN when on release mode and in the debug mode, JQquery library will be loaded from the local. This approach can be used as a fallback mechanism to deal with a CDN request failure.

How to use Bundle Scripts in Razor View.

We have learnt how to bundle our script files, making them to load in a single http request. Let's see how to use these bundled files in an MVC razor view.

To include the script bundles, we can do this using static Scripts class. We use Scripts.Render() method to include specified script bundle at runtime as illustrated in the code snippet below:

Example: Scripts.Render()

<!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 codes goes here *@
</body>
</html>

Now, if you run the above example then you will find two script files is combined, minified and loaded in a single request.

Ensure that the application is not in debug mode, while checking this out. This can be turn off or on in the web.config file of our application.



Inviting useful, relevant, well-written and unique guest posts