Before reading this article, I highly recommend reading the previous parts of the series on ASP.NET:

What is Bundling?

A bundle may consist of multiple CSS and JavaScript files. A bundle is a logical group of files that is loaded with a single HTTP request. You can create style and script bundle for CSS and JavaScript’s respectively by calling BundleCollection class Add() method with in BundleConfig.cs file.

What is the mean of Bundling?

What are the benefits of Bundling?

Why we use Bundling?

An Example of Bundled CSS-

  1. html, body
  2. {
  3. font - size: 2e m;
  4. font - family: ‘Arial’;
  5. margin: 10 px;
  6. }
  7. html, body
  8. {
  9. background - color: red;
  10. color: green;
  11. }
Open Visual Studio 2013, click on to “File” menu select “New” and choose “Project”.

Project

In the below figure Select Visual C# in the left side of the page and choose ASP.NET Web Application from the menu, and here I give the name of project “Bundling”. You can give the project name as you wish. Click on to “OK” button to create your project.

create your project

You can see the default MVC will be selected, select MVC and then click “OK” button.

default MVC

Here, my project is created and is ready for use. First I want to make some changes in BundleConfig.cs, so click on to App_Start folder.

click on to App

Now we are using Kendo UI

What is Kendo UI?

Kendo UI is a JavaScript tool set which is an HTML5 user interface framework for building interactive and high-performance modern web applications, websites. After installing the Kendo UI, you’ll get lots of JavaScript files, images and style sheets. The framework comes with a library of 70+ UI widgets and features. Kendo UI provides AngularJS and Bootstrap integration.Kendo UI is very easy to use.

Kendo UI provides AngularJS

So download the free trial of Kendo UI . Now Click on to the Download free trial.

download the free trial

You need to create a account for this. After filling all the required details click on to Download.

create a account

Now file will be downloaded in to your local PC. Select the downloaded file and open it.

downloaded file

Open this file and click on to styles folder.

styles folder

In Styles folder you’ll find CSS files, copy these 2 files:

  1. Kendo.common.min.css
  2. Kendo.default .min.css

CSS files

Including CSS file there would be a JavaScript folder withjs extension. Open this folder, and select below two js files.

js folder copy

In js folder copy these 2 files:

  1. .jquery.min
  2. Kendo.all.min.js

js folder

First I need to create a New Folder in to our solution, so right click on to content folder and click on “ADD” and then click on to new folder.

New Folder

Now Rename your New Folder AS “Kendo”. In Kendo folder paste these two CSS files.

  1. Kendo.common.min.css
  2. Kendo.default .min.css

Kendo

Now again I need to create a New Folder in our solution, so right click on to Scripts folder and click on “ADD” and then click on to new folder.

Scripts folder

Now Rename your New Folder AS “KendoScript”. In KendoScript folder paste these two CSS files. As shown in below screenshot,

  1. .jquery.min.js
  2. Kendo.all.min.js

KendoScript

Creating Style Bundle

Now Click on to BundleConfig.cs file And add the Bundles.Add Files as shown in following screenshot.

BundleConfig

Now I’m going to add these two files in to our layout page.

Under “View” Folder, click on “Shared” and then click on “Layout.cs.html”, to add these 2 files. Add these files into the head section of the page.

section

Now Again click on to “Views” Folder, then select “Home” folder and then open “Index.cs.html”.

Views

Cut the following section in the “Index.cs.html” view page and write some scripts over here.

Index.cs.html

Write the following code in “Index.cs.html"view page.

In this code you have to write script function. With the help of Script function you have to show a KendoCalendar.

I’ve pass a link in the head section for the calendar.

Initialize the Calendar by using a jQuery selector:

  1. <div id="calendar"></div>
  2. <script>
  3. $(document).ready(function()
  4. {
  5. $("#calendar").kendoCalendar();
  6. });
  7. </script>
Code

Now Build the Application.

Click on to the Google chrome, or press F5 to run your application.

Google chrome

Output:

Output

Now finally I get my output that is the current date.

Here, in this article, we learned about how we can use the scripts of the bundles in my project.

I hope you enjoyed this article. Stay tuned with me for more articles on all other Microsoft technologies.