ASP.NET DataTable调用脚本错误：DeleteRow未定义问题求助

问题根源 #

出现DeleteRow is not defined错误，主要是这几个原因：

• 脚本加载顺序乱了：DataTables依赖jQuery，但你先加载了DataTables脚本，之后才引入jQuery，导致依赖失效；同时重复加载jQuery会覆盖上下文，可能弄丢函数绑定。
• DeleteRow函数位置不对：函数定义在@section Scripts外部，可能DOM元素渲染完了函数还没加载，或者被重复加载的jQuery冲掉。
• onclick语法不规范：函数调用的参数没加引号，要是Course_id是字符串类型，直接就会触发语法错误。

修复步骤 #

1. 调整脚本加载顺序，删掉重复的jQuery #

把jQuery放在最前面加载，DataTables必须在jQuery之后引入；同时删除重复的jquery.min.js引用，避免冲突。

2. 把DeleteRow函数移到@section Scripts内部 #

ASP.NET的@section Scripts会把脚本渲染到页面底部（DOM加载完成的位置），确保点击删除按钮时函数已经存在。

3. 修正onclick的参数引号 #

给函数参数加上引号，不管Course_id是数字还是字符串都能兼容，避免语法报错。

修复后的完整代码 #

DataTable部分

<table id="dataTable" class="table table-striped table-bordered" width="100%">
  <thead>
         <tr>
             <th>Course Name</th>
             <th></th>
             <th></th>
         </tr>
  </thead>
<tbody>
       @foreach (var academicCourse in Model.AcademicCourses)
       {
           <tr>
                 <td>@Html.DisplayFor(modelItem => academicCourse.Course_name)</td>
                 <td><a class='btn btn-outline-primary' asp-action="Update" asp-route-courseId="@academicCourse.Course_id">Update</a></td>
                 <td><a class='btn btn-danger' onclick="DeleteRow('@academicCourse.Course_id')">Delete</a></td>
           </tr>
       }
</tbody>
</table>

Scripts部分

@section Scripts {
    <script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
    <script>
            $(document).ready(function () {
                $("#dataTable").dataTable({
                    "language": {
                        "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Turkish.json"
                    },
                    "searching": true,
                    "ordering": true,
                    "paging": true,
                    "pagingType": "full_numbers",
                    "pageLength": 10,
                    "responsive": true,
                    "columnDefs": [{
                        "targets": 2, // 列索引从0开始，原来的3超出表格列数，修正为最后一列的索引2
                        "orderable": false
                    }]
                });

                function DeleteRow(id) {
                    if (confirm("确定要删除这条记录吗？")) {
                        jQuery.ajax({
                            type: 'POST',
                            url: '@Url.Action("delete", "AcademicCourse")',
                            data: { "courseId": id },
                            datatype: 'JSON',
                            success: function (response) {
                                if (response == "success") {
                                    window.location.reload();
                                }
                            },
                            error: function (msg) {
                                alert(msg.responseText);
                            }
                        });
                    }
                }
            });
        </script>
}

额外优化建议 #

• 尽量别用内联onclick事件，推荐用jQuery事件绑定（比如$(document).on('click', '.btn-danger', function(){...})），更符合现代开发规范，还能解决动态生成元素的事件绑定问题。
• 注意DataTables的列索引：你的表格只有3列，索引是0、1、2，原来的targets:3是无效的，已经修正为targets:2对应最后一列。

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