The goal of this tutorial is to implement the ScriptBundle in a ASP.NET MVC, using Microsoft Visual Studio. The purpose of Script Bundle is to reduce the resource (JavaScript, CSS, Bootstrap, or other libraries) downloading times.
In Visual Studio, first create a new Empty ASP.NET (C#) Web Application. After creating a new empty ASP.NET Web Application project, open the Nuget Console.
NuGet command – Download Web Optimization
Open the NuGet console and enter the following command:
Install-Package Microsoft.AspNet.Web.Optimization
Press the “Enter” or “Return” key to download the resource.
Creating a new file – BundleConfig.cs
After downloading the resource, under the App_Start folder create a new cs file called BundleConfig.cs
using System.Web;
using System.Web.Optimization;
namespace CodeRepository.Web
{
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/master.min.css"));
}
}
}Modify Global.asax file
Then modify your Global.asax and add a call to RegisterBundles() in Application_Start():
The source code should look like this:
using System.Web.Optimization;
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}Add a namespace in Web.Config
Open web.config under the Views folder. Add the following snippet inside the namespaces tag:
<add namespace="System.Web.Optimization"/>
Creating a new controller
Create the a Controller called Home. Right-click the Controller and mouse over Add and click Controller.
In the Add New Scaffolded Item, select MVC 5 Controller – Empty and click the Add button.
The HomeController.cs has been added under the Controllers folder.
Under the Views folder, right-click the Shared folder and add a MVC 5 Layout Page (Razor) and call it _LayoutHome.
In the _LayoutHome folder, add the following snippets:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
</head>
<body>
<div>
@RenderBody()
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
</body>
</html>
Right-click the Home folder and click MVC 5 View Page (Razor) page.
The Item name is Index and press OK button.
Open _VewStart.cshtml and add the following snippet that will display the controller’s masterpage (layout).
var controller = HttpContext.Current.Request.RequestContext.RouteData.Values["CONTROLLER"].ToString();
string cLayout = "";
switch (controller.ToLower())
{
case "home":
cLayout = "~/Views/Shared/_LayoutHome.cshtml";
break;
default:
cLayout = "";
break;
}
Layout = cLayout;
}Run the program
Run the program. A web browser is opened. View the source of the page and you will see that the CSS and JavaScript were added:
