MVC C#中Jquery Datatable请求控制器报500内部服务器错误

使用jQuery DataTable向Controller发送Ajax请求获取数据时，触发Internal Server Error（500内部服务器错误）。控制器代码执行正常且能得到正确结果，但无论是GET还是POST请求都会报错。

相关代码 #

Employee.cshtml #

依赖项

<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/DataTables/DataTables-1.13.4/js/jquery.dataTables.js" defer="defer"></script>
<script src="~/Scripts/DataTables/DataTables-1.13.4/js/dataTables.bootstrap.js" defer="defer"></script>

DataTable初始化代码

$(document).ready(function () {
    debugger;
    $('#empTable').DataTable({
        "columnDefs": [
            { "searchable": true,  targets: "_all" },
            { "className": "text-center custom-middle-align", targets: "_all" }
        ],
        "processing": true,
        "serverSide": true,
        "ajax":
        {
            "url": "/Employee/GetEmployeeDetails",
            "type": "POST",
            "dataType": "json",
            "dataSrc": function (response) {
                debugger;
                resultObj = $.parseJSON(response.data)
                return resultObj.data;
            },
            "error": function (jqXhr, textStatus, errorMessage) { // error callback 
                console.log('Error: ' + errorMessage + '    request.statusText:' + jqXhr.statusText);
            }
        }
    });
});

Employee.cs（控制器代码） #

[HttpPost]
public JsonResult GetEmployeeDetails()
{
    connection();
    SqlCommand cmd = new SqlCommand("GetEmployeeDetails", con);
    cmd.CommandType = CommandType.StoredProcedure;
    con.Open();
    SqlDataReader dr = cmd.ExecuteReader();
    DataTable dt = new DataTable();
    dt.Load(dr);

    //Note I have tried both SqlDataAdapter and SqlDataReader
    //SqlDataAdapter da = new SqlDataAdapter();
    //da.Fill(dt);

    con.Close();
    return Json(dt);
}

1. 修复Json序列化问题
   ASP.NET MVC直接返回DataTable容易出现序列化异常，建议转换为可序列化的集合再返回：

   var dataList = dt.AsEnumerable()
                    .Select(row => dt.Columns.Cast<DataColumn>()
                                            .ToDictionary(col => col.ColumnName, col => row[col]))
                    .ToList();
   return Json(new { data = dataList });
   

2. 修正前端dataSrc解析逻辑
   控制器返回的是标准Json数据，无需额外调用$.parseJSON解析，修改dataSrc：

   "dataSrc": function (response) {
       return response.data;
   }
   

3. 适配服务器端请求参数
   开启serverSide: true后，DataTables会自动发送分页、排序等参数，控制器需接收并处理这些参数，同时返回符合DataTables格式的响应：

   public JsonResult GetEmployeeDetails(int draw, int start, int length)
   {
       // 根据参数处理分页、过滤逻辑
       int totalRecords = // 查询总记录数
       int filteredRecords = // 查询过滤后记录数
       var dataList = // 查询当前页数据
       
       return Json(new {
           draw = draw,
           recordsTotal = totalRecords,
           recordsFiltered = filteredRecords,
           data = dataList
       });
   }
   

4. 添加异常捕获排查问题
   控制器未做异常捕获，可能存在隐藏的数据库操作异常，添加try-catch块定位问题：

   [HttpPost]
   public JsonResult GetEmployeeDetails()
   {
       try
       {
           connection();
           // 原有数据库操作代码
           var dataList = dt.AsEnumerable()
                            .Select(row => dt.Columns.Cast<DataColumn>()
                                                    .ToDictionary(col => col.ColumnName, col => row[col]))
                            .ToList();
           return Json(new { data = dataList });
       }
       catch (Exception ex)
       {
           // 输出异常信息到日志或控制台
           return Json(new { error = ex.Message });
       }
       finally
       {
           if(con != null && con.State == ConnectionState.Open)
               con.Close();
       }
   }
   

5. 处理防伪造令牌验证
   ASP.NET MVC默认验证POST请求的防伪造令牌，若页面未包含令牌会触发500错误：

   • 在页面添加令牌：

     @Html.AntiForgeryToken()
     

   • Ajax请求中携带令牌：

     "headers": {
         "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val()
     },
     

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