ASP.NET MVC 4 Bundles giving 404 error

Question

I want to add Bundles into an existing ASP.NET MVC 4 (.NET 4.5) website that uses:

• Umbraco 6.1.5
• Microsoft ASP.NET Web Optimization Framework 1.1.3 (https://www.nuget.org/packages/microsoft.aspnet.web.optimization/)

I attempted to follow these directions: https://gist.github.com/jkarsrud/5143239, and the CSS loaded fine before I started down the bundles path.

On page load it inserts the style reference:

<link href="/bundles/marketingcss" rel="stylesheet">

But a 404 error happens:

> GET http://localhost:20459/bundles/marketingcss 404 (Not Found) 

Here's what I've in code:

Web.Config

<add key="umbracoReservedPaths" value="~/umbraco,~/install/,~/bundles" />

Global.asax

<%@ Application Codebehind="Global.asax.cs" Inherits="MapCom.Global" Language="C#" %>

Global.asax.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;
using System.Web.Security;
using System.Web.SessionState;
using Umbraco.Web;

namespace MapCom
{
    public class Global : UmbracoApplication
    {
        protected void Application_Start(object sender, EventArgs e)
        {
            base.OnApplicationStarted(sender, e);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}

_Layout.cshtml

@Styles.Render("~/bundles/marketingcss");

BundleConfig.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;

namespace MapCom
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            BundleTable.EnableOptimizations = true;
            ///
            ///Marketing Site CSS Bundle
            ///
            bundles.Add(new StyleBundle("~/bundles/marketingcss")
                .Include("~/plugins/bootstrap/css/bootstrap.min.css")
                .Include("~/css/font-awesome.min.css")
                .Include("~/plugins/parallax-slider/css/parallax-slider.css")
                .Include("~/css/combinedStyles.min.css")
                .Include("~/plugins/ladda-buttons/css/ladda.min.css")
                .Include("~/plugins/ladda-buttons/css/custom-lada-btn.css"));
        }
    }
}

Any ideas?

Answer 1

After much digging into Umbraco, I noticed that the project I'm working on is utilizing a class:

 public class ApplicationEventHandler : IApplicationEventHandler

Which is explained in more detail here: http://our.umbraco.org/documentation/Reference/Events/application-startup

But the gist is:

In order to bind to certain events in the Umbraco application you need to make these registrations during application startup. Based on the Umbraco version you are using there are various ways to hook in to the application starting. The higher the version you are using the more robust this becomes.

So Umbraco's overriding some of the ASP.NET start-up methods.

I solved my issue by adding a reference to System.Web.Optimization in ApplicationEventHandler.cs and moved my bundle registration to this method in that class:

public void OnApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
{
    RouteConfig.RegisterRoutes(RouteTable.Routes);
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

Answer 2

The ONLY thing that worked for me here was adding the path to the bundle to the following setting in web.config

My bundle Code

BundleTable.Bundles.Add(new ScriptBundle("~/opt/jscripts").Include(
                "~/Scripts/twitterFetcher.js"
                ));
            BundleTable.EnableOptimizations = true;

Umbraco default setting

<add key="umbracoReservedPaths" value="~/umbraco,~/install/" />

New setting

<add key="umbracoReservedPaths" value="~/umbraco,~/install/,~/opt/" />

Answer 3

try the following suggestions:

1.Do not use keyword bundles for your css virtual path so just change it to something else, and use the keyword bundles for your scripts only. like this:

 bundles.Add(new StyleBundle("~/Content/marketingcss")

(Remember you need to make sure that if you have a file called marketingcss under content folder you should change the virtual path to something else, so the virtual path shouldn't duplicate the physical path)

2.in your _Layout.cshtml use the following line instead of yours:

 @Styles.Render(BundleTable.Bundles.ResolveBundleUrl("~/Content/marketingcss"))

3.if the above suggestions didn't work then try this one in your _Layout.cshtml instead:

<link href="@System.Web.Optimization.BundleTable.
               Bundles.ResolveBundleUrl("~/Content/marketingcss")"
               rel="stylesheet"
               type="text/css" /> 

updated

4.just saw one of our friend's comment about not to putting .min files in your bundle, which is correct so you must not include .min files in your budleConfig class, and just use the normal files like bootstarp.css instead of bootstrap.min.css and do the same for all other files, of course make sure you have the normal files first so not just change the names.

I hope it helps to fix your code