ASP.NET Core中jQuery Ajax读取数据库数据到表格显示undefined

我正尝试结合弹窗与jQuery实现CRUD操作，当前先通过jQuery Ajax从数据库读取数据并展示在表格中。页面未提示错误，但无法获取数据，表格内所有列均显示undefined。

相关代码 #

site.js文件 #

$(document).ready(function () {
    GetTeams();
});

function GetTeams() {
    $.ajax(
        {
            url: '/Team/GetTeams',
            type: 'Get',
            datatype: 'json',
            success: function (response) {
                if (response == null || response == undefined || response.length ==0) {
                    var object = '';
                    object += '<tr>';
                    object += '<td class="colspan=5"> ' + 'No Team Exists' + '</td>';
                    object += '</td>';
                    object += '</tr>';

                    $('#tblBody').html(object);
                }
                else {
                    var object = '';
                    $.each(response, function (Index, item) {
                        object += '<tr>';
                        object += '<td > ' + item.TeamId + '</td>';
                        object += '<td > ' + item.TeamName + '</td>';
                        object += '<td > ' + item.Owner + '</td>';
                        object += '<td > ' + item.couchName + '</td>';
                        object += '</td>';
                        object += '</tr>';

                    });
                    $('#tblBody').html(object);
                }
            },
            error: function () {
                alert('Unable to Read Team Data13223');
            }
        }
    )}

Index视图文件 #

@model TournamentManagementSystem.Models.Team
 
@{ 
    ViewData["Title"] = "Team List";
}
<h3>@ViewData["Title"] </h3>

<hr />
<div>
    <button class="btn btn-primary" id="btnAdd">Add Team</button>
</div>

<div class="container">
    <table class="table table-success table-striped table-responsive table-hover">
        <thead>
            <tr>
                <th> Id </th>
                <th> Team Name </th>
                <th> Owner Name </th>
                <th> Coach </th>
            </tr>
        </thead>
        <tbody id="tblBody"> 
    </table>
</div>

@section scripts{
    <script src="/js/site.js"> </script>
}

TeamController代码 #

namespace TournamentManagementSystem.Controllers
{
public class TeamController : Controller
{
    public readonly WebApplication11Context context;

    public TeamController(WebApplication11Context db)
    {
        context = db;
    }

    public IActionResult Index()
    {
        return View();
    }
    
    public JsonResult GetTeams()
    {
        var team = context.Teams.ToList();
        return Json(team);
    }
}
}

解决步骤 #

1. 修复Ajax数据类型拼写错误 #

Ajax配置中datatype拼写错误，正确写法为dataType（首字母T大写）。这个错误会导致jQuery无法正确解析返回的JSON，将响应视为普通文本，遍历自然无法获取对象属性。

修正后的Ajax片段：

$.ajax(
    {
        url: '/Team/GetTeams',
        type: 'Get',
        dataType: 'json', // 修正拼写
        success: function (response) {
            // 原有逻辑代码
        }
    }
)

2. 匹配实体类属性名称 #

确认Team实体类的属性名称与前端调用完全一致：

• 前端写的item.couchName应为item.CoachName（拼写错误：Coach而非couch，且C#属性通常首字母大写）
• 检查TeamId、TeamName、Owner在实体类中是否存在且名称完全匹配（C#大小写敏感）

3. 修复HTML拼接错误 #

• 无数据场景：colspan是HTML属性而非class，且多写了一个</td>标签：

  object += '<tr>';
  object += '<td colspan="5">No Team Exists</td>';
  object += '</tr>';
  

• 有数据循环：删除多余的</td>标签：

  $.each(response, function (Index, item) {
      object += '<tr>';
      object += '<td>' + item.TeamId + '</td>';
      object += '<td>' + item.TeamName + '</td>';
      object += '<td>' + item.Owner + '</td>';
      object += '<td>' + item.CoachName + '</td>';
      object += '</tr>'; // 移除多余的</td>
  });
  

4. 验证接口返回数据 #

打开浏览器开发者工具（F12）→ 网络标签，调用接口后查看/Team/GetTeams的响应内容，确认返回的JSON结构、属性名称是否与前端预期一致。

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