为何JQuery无法将数组数据填充到ASP.NET Core表格中？

我正在开发一个基于ASP.NET Core MVC的项目，HomeController.cs里的MostrarDatos()方法负责读取Excel文件并把数据存入数组，通过console.log能看到数组数据是正确的，但用JQuery把数组加载到表格时没效果。

HTML代码 #

<div class="row">
    <div class="col-sm-12">
        <div class="card">
            <div class="card-header"> Load Excel File</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-4">
                        <input class="form-control-file" type="file" id="inputExcel" />
                    </div>
                    <div class="col-sm-4">
                         <button class="btn btn-warning" onclick="mostrarDatos()">Show Info</button>
                         <button class="btn btn-success" onclick="enviarDatos()">Send info to DB</button>
                     </div>
                </div>
                <hr />
                <div class="row">
                    <div class="col-sm-12">
                        <table id="tbData" class="table table-striped">
                            <thead>
                                <tr>
                                    <th>UnixTimestamp</th>
                                    <th>Date</th>
                                    <th>Quantity</th>
                                    <th>ProductName</th>
                                    <th>Gross</th>
                                    <th>Net</th>
                                    <th>Received</th>
                                    <th>Source</th>
                                    <th>Location</th>
                                    <th>ProductID</th>
                                    <th>FromKey</th>
                                    <th>ToKey</th>
                                    <th>FromName</th>
                                    <th>ToName</th>
                                    <th>LuckyChair</th>
                                    <th>MidnightMadness</th>
                                    <th>Gatcha</th>
                                    <th>GiftCard</th>
                                    <th>TransactionID</th>
                                    <th>AffiliateKey</th>
                                    <th>AffiliateName</th>
                                    <th>VendorKey</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JQuery代码 #

<script>
        
    function mostrarDatos(){
        const input = document.getElementById("inputExcel")

        const formData = new FormData()

        formData.append("ArchivoExcel",input.files[0])

        fetch("Home/MostrarDatos", {
            method: "POST",
            body:formData
        })
        .then((response) => {return response.json()})
        .then((dataJson) => {
            
            console.log(dataJson)

            dataJson.forEach((item) => {
                $("#tbData tbody").append(
                    $("<tr>").append(
                        $("<td>").text(item.UnixTimestamp),
                        $("<td>").text(item.Date),
                        $("<td>").text(item.Quantity),
                        $("<td>").text(item.ProductName),
                        $("<td>").text(item.Gross),
                        $("<td>").text(item.Net),
                        $("<td>").text(item.Received),
                        $("<td>").text(item.Source),
                        $("<td>").text(item.Location),
                        $("<td>").text(item.ProductID),
                        $("<td>").text(item.FromKey),
                        $("<td>").text(item.ToKey),
                        $("<td>").text(item.FromName),
                        $("<td>").text(item.ToName),
                        $("<td>").text(item.LuckyChair),
                        $("<td>").text(item.MidnightMadness),
                        $("<td>").text(item.Gatcha),
                        $("<td>").text(item.GiftCard),
                        $("<td>").text(item.TransactionID),
                        $("<td>").text(item.AffiliateKey),
                        $("<td>").text(item.AffiliateName),
                        $("<td>").text(item.VendorKey),
                        $("<td>").text(item.Status)
                        )
                )
            })
        })
}
</script>

点击“Show Info”按钮选择Excel文件后，表格没有被填充，但console.log输出的dataJson数据是正确的。

排查与解决建议 #

• 确认JQuery已引入：页面必须先加载JQuery库，否则所有JQuery语法无效。可以在页面头部添加：

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  

• 清空旧数据：多次点击按钮会累积旧数据，建议填充前清空表格tbody：

  $("#tbData tbody").empty(); // 放在dataJson.forEach之前
  

• 检查字段名大小写：JS大小写敏感，确保后端返回的dataJson字段名和前端调用的完全一致（比如UnixTimestamp是否和后端实体类属性名大小写完全匹配），字段名不匹配会导致无法获取值。
• 添加错误捕获：给fetch请求加上错误处理，排查是否有请求异常：

  .catch(error => {
      console.error('请求出错:', error);
  })
  

• 验证控制器方法配置：确保MostrarDatos方法添加了[HttpPost]特性，参数名称和formData.append的ArchivoExcel一致，并且返回JsonResult：

  [HttpPost]
  public IActionResult MostrarDatos(IFormFile ArchivoExcel)
  {
      // 读取Excel逻辑
      var dataList = ...; // 你的数据数组
      return Json(dataList);
  }
  

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