使用Layout时DataTable无法正常显示的技术求助

从你的代码来看，问题出在重复引用脚本/样式、版本冲突以及加载顺序错误上，这是导致DataTable在使用Layout后失效的核心原因，下面一步步帮你解决：

1. 清理Layout中的重复引用 #

你的Layout里多次重复加载了jQuery和Bootstrap，这会导致jQuery对象被多次覆盖，DataTable的初始化会因为这个失效。修改后的Layout代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title Gestion Phosphate</title>
    <!-- 优先使用Bundle管理样式和脚本，避免重复 -->
    @Styles.Render("~/Content/css")
    @Styles.Render("~/bundles/bootstrap/css") <!-- 确保Bundle里包含Bootstrap CSS -->
    @Scripts.Render("~/bundles/modernizr")
    <link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
    <!-- NAVBAR -->
    <div class="row">
        @RenderBody()
    </div>
    <footer>
    </footer>
    <!-- 脚本统一放在body底部，确保DOM加载完成 -->
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    <!-- 预留脚本区块，让视图的自定义脚本在这里加载 -->
    @RenderSection("scripts", required: false)
</body>
</html>

关键修改点： #

• 移除了head里手动引入的CDN版jQuery、Bootstrap CSS和JS，改用ASP.NET Bundle管理（确保你的Bundle配置里已经包含了对应的jQuery和Bootstrap版本）
• 把所有脚本移到body底部，避免阻塞DOM加载，同时保证jQuery先于其他依赖脚本加载

2. 修正视图的脚本与样式引入 #

视图里不要重复引入jQuery，而且DataTable的资源应该放在scripts区块里，确保加载顺序正确。修改后的视图代码：

@model IEnumerable<wb01.Models.Réception_camions>

<div>
    <table class="display" id="MyDataTable">
        <thead>
            <tr>
                <th>@Html.DisplayNameFor(model => model.Date_d_arrivée)</th>
                <th>@Html.DisplayNameFor(model => model.heure_d_arrivée)</th>
                <th>@Html.DisplayNameFor(model => model.Poids_cam)</th>
                <th>@Html.DisplayNameFor(model => model.Camions.N_série)</th>
                <th>@Html.DisplayNameFor(model => model.Qualité.Qualité1)</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>@Html.DisplayFor(modelItem => item.Date_d_arrivée)</td>
                    <td>@Html.DisplayFor(modelItem => item.heure_d_arrivée)</td>
                    <td>@Html.DisplayFor(modelItem => item.Poids_cam)</td>
                    <td>@Html.DisplayFor(modelItem => item.Camions.N_série)</td>
                    <td>@Html.DisplayFor(modelItem => item.Qualité.Qualité1)</td>
                    <td>
                        @Html.ActionLink("Modifier", "Edit", new { id = item.Id_rec_cam }) |
                        @Html.ActionLink("Détails", "Details", new { id = item.Id_rec_cam }) |
                        @Html.ActionLink("Supprimer", "Delete", new { id = item.Id_rec_cam })
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

@section scripts {
    <!-- 引入DataTable样式 -->
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
    <!-- 引入DataTable脚本（注意：这里不需要再引入jQuery，Layout已经加载了） -->
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            // 初始化DataTable
            $("#MyDataTable").DataTable();
        });
    </script>
}

关键修改点： #

• 移除了视图里的jQuery引用，避免版本冲突
• 把所有DataTable相关的样式和脚本放到@section scripts里，这样会被渲染到Layout的脚本区块中，保证在jQuery之后加载
• 确保DataTable的初始化代码在jQuery和DataTable脚本加载完成后执行

3. 额外注意事项 #

• 检查你的ASP.NET Bundle配置（BundleConfig.cs），确保~/bundles/jquery和~/bundles/bootstrap引用的是兼容的版本（jQuery 1.11.x和Bootstrap 3.x是兼容DataTable 1.9.0的）
• 如果还是有问题，可以打开浏览器的开发者工具（F12），切换到Console标签页，查看是否有报错信息（比如$ is not defined或者DataTable相关的错误），这能帮你进一步定位问题

内容的提问来源于stack exchange，提问作者lot