使用jQuery DataTable无法正常显示数据（仅显示表头）求助

问题现象 #

使用jQuery DataTable展示数据时，页面仅显示表头，无任何数据加载，效果如下：

当控制器方法改为返回Json(new { data = goods }, JsonRequestBehavior.AllowGet)时，能正常输出JSON数据，但原写法返回View时无法加载数据。

相关代码 #

视图脚本 #

@model IEnumerable<Vitashopper.Models.Goods>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table table-bordered table-striped" id="productTable">
    <tr>
        <th>ProductID</th>
        <th>ProductName</th>
        <th>BuyPrice</th>
        <th>SellPrice</th>
        <th>Stock</th>
        <th>Description</th>
        <th>Remarks</th>
    </tr>

</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- 注意：此处原代码用script标签引入CSS，是错误写法 -->
<script src="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css"></script>
<script src="https://cdn.datatables.net/autofill/2.5.1/css/autoFill.dataTables.min.css"></script>


@section Scripts
{

    <script type="text/javascript">
     $(document).ready(function () {
        $.ajax({
            url: '@Url.Action("GetData", "Goods")',
            method: 'get',
            dataType: 'json',
            success: function (data) {
                $('#productTable').DataTable({
                    data: data,
                    columns: [
                         { "data": "ProductId" },
                           { "data": "ProductName" },
                           { "data": "BuyPrice" },
                        { "data": "SellPrice" },
                        { "data": "Stock" },
                        { "data": "Description" },
                        { "data": "Remarks" },
                    ]
                });
            }
        });
    });

    </script>
}

控制器代码（原错误写法） #

public ActionResult GetData()
{
    GoodsDBHandle dbhandle = new GoodsDBHandle();
    var goods = dbhandle.GetGoods();
    goods.ToList().ForEach(x => x.ProductId = x.ProductId); // 无意义的赋值
    return View(goods); // 错误：返回视图而非JSON
}

DBHandle代码 #

public List<Goods> GetGoods()
{
    connection();
    List<Goods> goodslist = new List<Goods>();

    SqlCommand cmd = new SqlCommand("GetAllGoods", con);
    cmd.CommandType = CommandType.StoredProcedure;
    SqlDataAdapter sd = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();

    con.Open();
    sd.Fill(dt);
    con.Close();
    // 冗余的JSON序列化反序列化步骤
    string json = JsonConvert.SerializeObject(dt);
    DataTable dt2 = JsonConvert.DeserializeObject<DataTable>(json);
    foreach (DataRow dr in dt2.Rows)
    {
        goodslist.Add(
            new Goods
            {
                ProductId = Convert.ToInt32(dr["ProductID"]),
                ProductName = Convert.ToString(dr["ProductName"]),
                BuyPrice = Convert.ToDecimal(dr["BuyPrice"]),
                SellPrice = Convert.ToDecimal(dr["SellPrice"]),
                Stock = Convert.ToInt32(dr["Stock"]),
                Description = Convert.ToString(dr["Description"]),
                Remarks = Convert.ToString(dr["Remarks"])
                
            });
    }
    
    return goodslist;
}

问题根源与修复方案 #

1. 控制器返回值错误（核心问题） #

前端AJAX请求明确指定了dataType: 'json'，期望接收JSON格式的数据，但原控制器返回View(goods)会渲染完整的HTML视图页面，导致AJAX拿到的不是商品数据列表，DataTable无法解析加载。

修复：修改控制器返回JSON数据

public ActionResult GetData()
{
    GoodsDBHandle dbhandle = new GoodsDBHandle();
    var goods = dbhandle.GetGoods();
    // 返回符合DataTable要求的JSON格式（外层包裹data字段）
    return Json(new { data = goods }, JsonRequestBehavior.AllowGet);
}

2. 前端资源引入错误 #

原代码用<script>标签引入CSS文件，这是错误的，应该用<link>标签；同时漏了引入DataTables的JS文件，导致DataTable功能无法正常运行。

修复：修正资源引入方式

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- 正确引入CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/autofill/2.5.1/css/autoFill.dataTables.min.css">
<!-- 新增引入DataTables的JS文件 -->
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/autofill/2.5.1/js/dataTables.autoFill.min.js"></script>

3. DBHandle冗余代码优化 #

原代码中对DataTable进行JSON序列化再反序列化是完全多余的操作，直接遍历原DataTable即可，减少不必要的性能损耗。

优化后的DBHandle代码

public List<Goods> GetGoods()
{
    connection();
    List<Goods> goodslist = new List<Goods>();

    SqlCommand cmd = new SqlCommand("GetAllGoods", con);
    cmd.CommandType = CommandType.StoredProcedure;
    SqlDataAdapter sd = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();

    con.Open();
    sd.Fill(dt);
    con.Close();

    // 直接遍历原DataTable，去掉冗余的JSON转换
    foreach (DataRow dr in dt.Rows)
    {
        goodslist.Add(
            new Goods
            {
                ProductId = Convert.ToInt32(dr["ProductID"]),
                ProductName = Convert.ToString(dr["ProductName"]),
                BuyPrice = Convert.ToDecimal(dr["BuyPrice"]),
                SellPrice = Convert.ToDecimal(dr["SellPrice"]),
                Stock = Convert.ToInt32(dr["Stock"]),
                Description = Convert.ToString(dr["Description"]),
                Remarks = Convert.ToString(dr["Remarks"])
            });
    }
    
    return goodslist;
}

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