Problems with style of Jquery Datatable at publishing (possibly bundling issue)

Question

I have been running into some bizarre issues when I try to publish my ASP.net MVC web app to my test servers IIS. I have decided that this might have something to do with the bundling. In my application I use a jquery datatable to display real-time data from a db to the user. When I launch the application through the vs2013 debugger, the application looks and works well. However when I publish to the test server's IIS, the datatable's style seems to disappear (the table functionality still seems to be working).

I have added:

BundleTable.EnableOptimizations = true;

and changed the web.config like so

<compilation debug="false" targetFramework="4.5" />

Here is my bundling config:

public static void RegisterBundles(BundleCollection bundles)
    {
        BundleTable.EnableOptimizations = true;

        bundles.Add(new ScriptBundle("~/bundles/CustomJqueryBundle").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery-ui-{version}.js",
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate"));

        bundles.Add(new ScriptBundle("~/bundles/CustomJqueryDataTable_Scripts").Include(
                    "~/Content/DataTables-1.10.5/DataTables-1.10.5/media/js/jquery.dataTables.js",
                    "~/Content/DataTables-1.10.5/DataTables-1.10.5/extensions/Responsive/js/dataTables.responsive.js"));

        bundles.Add(new ScriptBundle("~/bundles/CustomJqueryDataTable_Styles").Include(
                    "~/Content/DataTables-1.10.5/DataTables-1.10.5/media/css/jquery.dataTables.css",
                    "~/Content/DataTables-1.10.5/DataTables-1.10.5/extensions/Responsive/css/dataTables.responsive.css"));

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

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/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/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

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

and here is where I render the datatable scripts in the _layout

@Scripts.Render("~/bundles/CustomJqueryBundle", "~/bundles/bootstrap", "~/bundles/CustomJqueryDataTable_Scripts")
@Styles.Render("~/bundles/CustomJqueryDataTable_Styles")
@RenderSection("scripts", required: false)

Its also worth noting that the mvc default styles still seem to work correctly

Through the debugger (with BundleTable.EnableOptimizations = true commented out) enter image description here

When published (or through debugger with BundleTable.EnableOptimizations = true NOT commented out) enter image description here

I have also just tried doing the following instead of using the scripts.render and the application publishes with the styles, proving that this is a bundling issue:

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/respond.js"></script>
<script src="~/Content/DataTables-1.10.5/DataTables-1.10.5/media/js/jquery.dataTables.js"></script>
<link href="~/Content/DataTables-1.10.5/DataTables-1.10.5/media/css/jquery.dataTables.css" rel="stylesheet" />
<link href="~/Content/DataTables-1.10.5/DataTables-1.10.5/extensions/Responsive/css/dataTables.responsive.css" rel="stylesheet" />
<script src="~/Content/DataTables-1.10.5/DataTables-1.10.5/extensions/Responsive/js/dataTables.responsive.js"></script>


@RenderSection("scripts", required: false)

score 2 · Accepted Answer · answered Feb 26 '15 at 15:33

You have bundled your CSS as JS scripts (ScriptBundle) rather than CSS (StyleBundle) - you need:

 bundles.Add(new StyleBundle("~/bundles/CustomJqueryDataTable_Styles").Include(
                "~/Content/DataTables-1.10.5/DataTables-1.10.5/media/css/jquery.dataTables.css",
                "~/Content/DataTables-1.10.5/DataTables-1.10.5/extensions/Responsive/css/dataTables.responsive.css"));

So it will be treated as a CSS rather than JS script during the optimisation process

Ohh gosh, I'm embarrassed, but thank you so much for catching that. I was starting to go crazy. — Validbit, Feb 26 '15 at 16:05

Problems with style of Jquery Datatable at publishing (possibly bundling issue)

1 Answers1