Why are my bundles not loaded even when they have been included in the BundlesConfig?

Question

I have jQuery, Bootstrap bundles I wish to load in my view, I have added them to my bundlesconfig and added it to my view in @script.render, however my scripts files are clearly not rendering as I cannot even make use of bootstrap tags.

bundles

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

namespace XXXX
{
    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",
                        "~/Scripts/bootstrap.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",
                "~/Content/bootstrap.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }
    }
}

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
    <body>
        <div>
            <p>This is a test</p>
        </div>
        @RenderBody()

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

View

@{
    ViewBag.Title = "Search";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="jumbotron">
    <div class="container">
        <h1>Find</h1>
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button">Go!</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

Rendered HTML

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Search</title>


</head>
<body>
    <div>


<div class="jumbotron">
    <div class="container">
        <h1>Find</h1>
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button">Go!</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

    </div>
</body>
</html>

Have you looked in the dev tools to try to see where the browser is looking for you bundle? — peinearydevelopment, Apr 22 '15 at 19:18
Does this happen in both DEBUG and RELEASE mode? It depends greatly because the bundling mechanism creates optimizations based on the DEBUG compiler directive being set. — Steve Danner, Apr 22 '15 at 19:23
try to add this: `bundles.IgnoreList.Clear();` as the first line in `BundleConfig.cs` file — IndieTech Solutions, Apr 22 '15 at 19:44
@Alundrathedreamwalker Hi thank you, that seems to work but why do i have to do that ? is that a hack ? and is there a better approach to doing it ? — floormind, Apr 22 '15 at 22:54

score 0 · Accepted Answer · answered Apr 22 '15 at 23:36

it’s important to note that Bundle and Minification are different process. ASP.Net site explains it as: Bundling Bundling is a new feature in ASP.NET 4.5 that makes it easy to combine or bundle multiple files into a single file. You can create CSS, JavaScript and other bundles. Fewer files means fewer HTTP requests and that can improve first page load performance. Minification Minification performs a variety of different code optimizations to scripts or css, such as removing unnecessary white space and comments and shortening variable names to one character. Consider the following JavaScript function.

Back to your question:ASP.Net MVC 4 Bundles has ignore list. And the .min extension is included in the ignore list. To override the ignore list:

bundles.IgnoreList.Clear();

Why are my bundles not loaded even when they have been included in the BundlesConfig?

1 Answers1