articles

Home / DeveloperSection / Articles / Add reference of System.Web.Optimization in MVC 4

Add reference of System.Web.Optimization in MVC 4

Add reference of System.Web.Optimization in MVC 4

AVADHESH PATEL41829 29-Jan-2013

System.Web.Optimization assembly required for using feature of Bundling in MVC 4. Bundling is used for managing JavaScript and CSS files. You can read more information about Bundling form below link.

https://www.mindstick.com/Articles/1086/bundling-and-minification-in-asp-dot-net-mvc-4

In this article I tell you how to add reference of System.Web.Optimization in your existing application.

Note: When you open MVC 4 Application with “Internet Application” option than System.Web.Optimization assembly by default added in your application. But, if you open application with “Empty” option than “Are you missing an assembly reference?”  Error message come when you use System.Web.Optimization namespace.

Step 1: Open Package Manager Console from View menu, as below image (Figure 1).

Figure 1:

Add reference of System.Web.Optimization in MVC 4

Step 2: Package Manager Console command prompt will be display at bottom of Visual Studio as below image (Figure 2).

Figure 2:

Add reference of System.Web.Optimization in MVC 4

Step 3: Paste below line of code in Package Manager Console prompt and press enter button as below image (Figure 3).

Install-Package Microsoft.Web.Optimization –Pre

 
OR
 
Install-Package Microsoft.Web.Optimization

 Figure 3:

Add reference of System.Web.Optimization in MVC 4

Step 4: Wait for few minutes. When System.Web.Optimization downloaded and added in your application than confirmation message will be display as below image (Figure 4).

Figure 4:

Add reference of System.Web.Optimization in MVC 4

Step 5: Now, add one class in App_Start folder and give name BundleConfig as below image (Figure 5).

Figure 5:

Add reference of System.Web.Optimization in MVC 4

Step 6: Include the Optimization namespace and give the path of JavaScript and CSS within BundleConfig class as below line of code

using System.Web.Optimization;

 
namespace AddReference
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/Scripts/js").Include(
                "~/Scripts/jQuery.1.7.1.js",
                "~/Scripts/comboboo.js")
            );
 
            bundles.Add(new StyleBundle("~/Style/css").Include(
                 "~/Style/comboboo.css",
                 "~/Style/updates.css")
            );
        }
    }
}

 Step 7: Include the Optimization namespace and call RegisterBundles () function in Application_Start () in your global.asax.cs as below line of code.

using System.Web.Http;

using System.Web.Mvc;
using System.Web.Routing;
using System.Web.Optimization;
 
namespace AddReference
{
    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
 
            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}

 Step 8: Include the Optimization namespace and render the bundle(s) in your view page as below line of code

@using System.Web.Optimization

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    @Scripts.Render("~/Scripts/js")
    @Scripts.Render("~/Style/css")
</head>
<body>
    <div>
    </div>
</body>
</html>

 Note: Build and Save application and press F5 key for execution and see View Source of page and check included JavaScript and CSS file.



Updated 12-Dec-2019
Avadhesh Kumar Patel District Project Manager - Aligarh 14 months work experience in Panchayati Raj Department Sector as District Project Manager & 12 months work experience in IT Sector as Software Engineer. :-)

Leave Comment

Comments

Liked By