发布时 Jquery 数据表的样式问题（可能是捆绑问题）

Question

当我尝试将我的 ASP.net MVC 网络应用程序发布到我的测试服务器 IIS 时，我运行遇到了一些奇怪的问题。我认为这可能与捆绑有关。在我的应用程序中，我使用 jquery datatable 向用户显示来自数据库的实时数据。当我通过 vs2013 调试器启动应用程序时，应用程序看起来运行良好。但是，当我发布到测试服务器的 IIS 时，datatable 的样式似乎消失了（table 功能似乎仍然有效）。

我已添加：

BundleTable.EnableOptimizations = true;

并像这样更改了 web.config

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

这是我的捆绑配置：

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"));
    }

这里是我在 _layout

中呈现数据table 脚本的地方

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

同样值得注意的是，mvc 默认样式似乎仍然可以正常工作

通过调试器（注释掉 BundleTable.EnableOptimizations = true）

发布时（或通过 BundleTable.EnableOptimizations = true 未注释掉的调试器）

我也刚刚尝试执行以下操作而不是使用 scripts.render 并且应用程序使用样式发布，证明这是一个捆绑问题：

<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)

Answer 1

您已将 CSS 捆绑为 JS 脚本 (ScriptBundle) 而不是 CSS (StyleBundle) - 你需要：

 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"));

所以在优化过程中会被当作CSS而不是JS脚本

发布时 Jquery 数据表的样式问题（可能是捆绑问题）

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

css

asp.net-mvc

datatables

bundling-and-minification

jquery-datatables