MVC 4 and Javascript/StyleSheets bundling

First of all I would like to welcome any first time visitors to my blog. Before I start this blog I would like to give a brief introduction to myself. My name is Mark Anthony Farrugia and, apart from being a Computing Teacher, I am a freelance web developer based in Malta, a small island in the Mediterranean. So now let me start this blog post :)

In this blog post I will cover one of the new constructs which have been introduced in MVC 4 which is bundling. Basically MVC provides a way to bundle a set of Javascript or CSS files into one single bundle.

The outcomes of this blog are

  1. Understand how ASP.NET MVC Bundles work

The prerequisities of this blog are

  1. Have some understanding of what is JQuery
  2. Have some knowledge on ASP.NET MVC

So let me start this blog. One of the main reasons why I have moved from the traditional ASP.NET to ASP.NET MVC is its tight integration with JQuery. When an ASP.NET MVC solution is created JQuery files are automatically added with the solution. You will note that the JQuery files, whenever a new solution is created, are placed in the Scripts folder. Whilst I am writing this blog the JQuery version which Visual Studio automatically adds is JQuery.1.7.1, as shown in Figure 1. You can overwrite the JQuery version by downloading the latest JQuery library from here.

Figure 1 - JQuery files in Solution

Figure 1 – JQuery files in Solution

One of the most important issues you will encounter whilst developing with JQuery is that you would have to make use of multiple JQuery libraries to meet certain objectives. Rather than adding the libraries one by one ASP.NET MVC uses what so called bundles to bundle all the similar JQuery libraries.

To show how these bundles work open the Layout.cshtml which acts as the MasterPage and which ASP.NET MVC creates in its template project, or open a MasterPage for an existing project which you have created. Scroll down to the end of the page and you should find the two lines of code shown underneath.

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

Let me first explain the first line of code shown in the above snippet. This line of code is ensuring that all the JQuery files which are contained in the JQuery bundle are rendered in HTML. Now how does Visual Studio know what is included in the JQuery bundle? You can find this information in the BundleConfig.cs which is found under the App_Start folder.

The underneath code is a code snippet of the BundleConfig file.

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

If you examine the above code you will note that the bundle is called “~/bundles/jquery” and this matches the first line of code (@Scripts.Render(“~/bundles/jquery”)) shown in the previous code snippet. This bundle includes one single JQuery file which is located under the Scripts folder as shown in line 3 and 4 in the above code snippet. Now run your project and at the end of your HomePage you should find the HTML shown in Figure 2.

Figure 2 - JQuery HTML in MasterPage

Figure 2 – JQuery HTML in MasterPage

So basically the @Scripts.Render(“~/bundles/jquery”) found in the Layout.cshtml just renders all the JQuery files found in the JQuery bundle specified in the BundleConfig.cs.

You should have noted in the above explanation that we have used the ScriptBundle class in the BundleConfig.cs to bundle Javascript files. MVC also gives you the opportunity to bundle StyleSheets and this is already done by the MVC Template project in the BundleConfig.cs. Noe that instead of the ScriptBundle the StyleBundle class is used.

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

To render the stylesheets in your page then you should use the underneath code. The above code works exactly as the @Scripts.Render. However rather then rendering JavaScript files which are located in a Javascript bundle, CSS files are rendered.

@Styles.Render("~/Content/css")

So basically in the above code snippet you are requesting .NET to render all CSS files found under the ~/Content/css bundle.

Finally let me explain what the code at line 2 in the underneath code snippet does. This code snippet was shown in a previous code snippet but I only gave an explanation for what code at line 1 does.

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

The above code snippet is found in the Layout.cshtml which acts as your MasterPage. Basically this line of code is rendering any Scripts section found in a child page which is making use of the MasterPage. For example, let’s assume that in your child page you want to use another JQuery library apart from the main JQuery library, which will be responsible for validating data. The underneath code will basically add the validation Javascript libraries found in the jqueryval bundle

@section Scripts {
 @Scripts.Render("~/bundles/jqueryval")
}

If you run your solution and open the child page which has the above code snippet, and then open the HTML which is rendered for this page you will find the HTML shown in Figure 3. You will note that first the main JQuery library is rendered, and then there are the scripts found in the JQueryval bundle.

Figure 3 - JQuery Validation Bundle

Figure 3 – JQuery Validation Bundle

I hope you found this blog post useful and till next time take care of yourselves :) .