Bundling javascript/css

Question

I am working with jQuery libraries in an ASP.Net MVC project.

The following code snippet is from "BundleConfig.cs"

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 ScriptBundle("~/bundles/jqgrid").Include(
            "~/Scripts/jquery.jqGrid.min.js", 
            "~/Scripts/grid.locale-en.js"));

        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",
                    "~/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",
                    "~/Content/ui.jqgrid.css"));
    }
}

This is the HTML code from my Layout file where I have @Stlyes.Render. As per my understanding, it is supposed to include all the javascript libraries and css that I have bundled in my code above. However, when I view the page source, it only includes a few libraries (as shown in the screenshot below).

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqgrid")

</head>

enter image description here

Not sure why it is not including all the javascript and css files even after specifying those into the BundleConfig.cs file.

Please help!

Added the solution explorer screenshot for list of javascript files. enter image description here

did you rebuild the project and ensure that the new dll is copied correctly to the "bin" folder? — Khanh TO, May 10 '15 at 09:44
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include( "~/Scripts/jquery-ui-{version}.js")); Also, why is this script not included. Even though this is a separate include statement. — raring sunny, May 10 '15 at 09:46
is `"~/Scripts/jquery.jqGrid.min.js"` existing in your web directory? — Khanh TO, May 10 '15 at 09:47
Yes, it is included. Please see the screenshot that I just added of the solution explorer. — raring sunny, May 10 '15 at 09:50
Possible duplicate of http://stackoverflow.com/questions/11980458/bundler-not-including-min-files — haim770, May 10 '15 at 09:52
Thanks for pointing to the similar question. I renamed the min.js version to just .js and added a few missing @Scripts.Render tags. It finally worked. — raring sunny, May 10 '15 at 10:23

score 0 · Answer 1 · answered May 10 '15 at 10:28

Please see the comment from @haim770 as the link he specified to another questions relates to this one. Looks like .Net has problem rendering or including two version of js or css even when those are minified or regular versions. What I did is to rename the jQuery library file from min.js to .js.

I was also missing few @Scripts.Render tags for few js and css files in my _Layout.cshtml (view) file. After including those the code now works fine. Thank you all for your help!

Bundling javascript/css

1 Answers1