ASP.NET Core Razor Pages集成jQuery DataTables失败求助

问题根源 #

你的代码里存在多处资源加载错误，直接导致DataTables无法正常初始化：

• Bootstrap的JS文件错误使用<link>标签，JS资源必须用<script>标签加载，<link>仅用于CSS。
• 重复加载3个不同版本的jQuery，最后加载的jQuery会覆盖之前的实例，导致DataTables绑定失效。
• 同时混用Bootstrap 5的CSS和Bootstrap 4的JS，版本不兼容引发冲突。
• 部分<script>标签未正确闭合，导致后续资源加载异常。
• 加载顺序错误：DataTables依赖jQuery，但你的代码里DataTables先于最后一个jQuery版本加载，绑定逻辑失效。
• 页面模型不匹配：Privacy.cshtml指定的模型是GamesModel，但后台代码是PrivacyModel，属于代码错误。

修复步骤 #

第一步：修正布局页的资源引用 #

替换_Layout_Overzicht.cshtml的head和底部script部分为以下内容：

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - </title>
    <!-- 按顺序加载CSS资源 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
    <!-- 原有header、main、footer内容保持不变 -->

    <!-- 底部按依赖顺序加载JS资源 -->
    <script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
    <!-- 加载Bootstrap 5的bundle版JS，已包含popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <!-- 最后加载DataTables，确保依赖的jQuery已加载完成 -->
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#example").DataTable();
        })
    </script>
</body>

第二步：修正Privacy.cshtml的模型引用 #

把页面头部的模型声明改为和后台代码一致：

@page
@model organizer.Pages.PrivacyModel
@{ ViewData["Title"] = "Player Statistics"; Layout = "_Layout_Overzicht"; }

验证方法 #

1. 打开浏览器F12开发者工具，切换到控制台，查看是否有报错信息，如有根据提示进一步排查。
2. 切换到网络标签，确认所有CSS和JS资源都成功加载（状态码为200）。

内容的提问来源于stack exchange，提问作者New' asp.net core' One