Adding the new ASP.NET Web Optimization framework to MVC4 projects after manually upgrading them

Question

After manually upgrading an ASP.NET MVC project to MVC4 using these instructions, how do you then set up the new CSS and JavaScript asset bundling and minimization features of the ASP.NET Web Optimization Framework in MVC4? The default templates have this all set up, but how do you do it by hand?

Answer 1

• Right click References then Manage NuGet Packages and add “Microsoft.AspNet.Web.Optimization” (or type Install-Package Microsoft.AspNet.Web.Optimization into the NuGet console).
• In your Web.config file, add the following to <system.webServer>, allowing the minified bundles to be served with extensionless URLs.

<handlers>
<remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" />
<remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" />
<add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>

• In your App_Start folder, add a new class called BundleConfig.cs. It should look something like this:

using System.Web;
using System.Web.Optimization;

namespace MvcApplication1
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.unobtrusive*",
                "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

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

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css"));
        }
    }
}

• Edit the above to add the script and stylesheet bundles you require then add the following lines to the using section and Application_Start in Global.asax.cs:

//using section
using System.Web.Optimization;

//Application_Start
BundleConfig.RegisterBundles(BundleTable.Bundles);

• Replace your CSS and JavaScript and tags in _Layout.cshtml with calls to @Styles.Render("~/Content/css") and @Scripts.Render("~/bundles/jquery"), replacing the parameters with the names of the bundles you added to BundleConfig.cs. Make sure not to name any of the bundles the same as folders in your project.

You should now be all set – read up on how to use the full featureset here: http://www.asp.net/mvc/overview/performance/bundling-and-minification