ASP.NET MVC5 JQuery 数据表 CSS 不适用于 Bootstrap Lumen

Posted 2023-03-06

【中文标题】ASP.NET MVC5 JQuery 数据表 CSS 不适用于 Bootstrap Lumen

【英文标题】：ASP.NET MVC5 JQuery Datatables CSS not working with Bootstrap Lumen

【发布时间】：2018-07-28 18:56:37

【问题描述】：

我无法为我的数据表获得正确的样式。 This is how my datatables look right now

这是我的 BundleConfig.cs 文件：

public static void RegisterBundles(BundleCollection bundles)
    
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-version.js",
                    "~/Scripts/DataTables/jquery.dataTables.js",
                    "~/Scripts/DataTables/dataTables.bootstrap.js"
            ));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));


        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/scripts/bootbox.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap-lumen.css",
                  "~/Content/datatables/css/dataTables.bootstrap.css",
                  "~/Content/site.css"
            ));
    

这就是我在 _Layout.cshtml 中呈现的内容：

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/dataTables.bootstrap.css">
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/modernizr")
@RenderSection("scripts", required: false)
@Styles.Render("~/Content/css")

It works 如果我从我的 BundleConfig.cs 中删除 Lumen css 文件：

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

我正在使用 Bootstrap 3.0.0、JQuery 1.10.2 和数据表 1.10.11。我知道这些版本很旧，但我正在从 Mosh Hamedani 的课程中​​学习 MVC，他正在使用这些版本，所以我只是想在 atm 上跟随他。

【参考方案1】：

原来问题出在 Lumen 主题上。我更改了其他各种主题以检查它们是否有相同的问题，并且只有 Lumen。数据表在所有其他主题中运行良好。

【参考方案2】：

我在流明主题上遇到了完全相同的问题。而不是使用本地或下载的文件。我使用了 jquery.datatables 的 cdn 链接，它对我有用。 在你的布局文件中使用它：-

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>