如何在ASP.NET MVC 5页面正确初始化DataTables JS并解决报错

核心问题分析 #

你的代码直接在视图中编写<head>和<body>标签，和ASP.NET MVC的布局页机制冲突，导致脚本加载位置错误、可能重复加载jQuery，最终引发控制台报错（常见为$ is not defined或DataTables is not a function类问题）。

修复步骤 #

1. 遵循MVC视图规范，使用@section注入资源
   ASP.NET MVC的视图默认继承_Layout.cshtml布局页，该布局页已包含<head>、<body>等基础结构，无需重复编写。通过@section将样式和脚本注入到布局页的对应位置：

@model Website.Models.Forms.Form1

@{
    ViewBag.Title = "Form1";
}

<h2>Form1</h2>
<table id="myTable" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

@section Styles {
    <link href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.min.css" rel="stylesheet" />
}

@section Scripts {
    <!-- 若布局页已加载jQuery，删除此行 -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/2.2.2/js/dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#myTable').DataTable();
        });
    </script>
}

2. 检查布局页的jQuery加载
   打开Views/Shared/_Layout.cshtml，确认是否已加载jQuery。如果布局页中已有<script src="...jquery..."></script>，则视图中无需重复加载，避免版本冲突导致$未定义的问题。

3. 验证脚本加载顺序
   确保jQuery始终在DataTables脚本之前加载，使用@section Scripts的好处是，布局页通常会将该section的内容放在自身jQuery脚本之后、</body>标签之前，保证加载顺序正确。

额外排查点 #

• 若使用NuGet安装的本地资源，确认脚本路径是否正确（可通过浏览器开发者工具的“网络”标签查看资源是否加载成功）
• 清除浏览器缓存，避免旧的脚本文件干扰

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