ajax - 传递给 ajax 的列表对象具有未定义的值，但列表大小是正确的

问题描述

我正在努力通过 Ajax 更改表格。目标是按列标题排序。使用 ASP.NET MVC Core 2.2，我需要知道我做错了什么。所有这些代码都为测试/学习而简化；

模型：

public class Automobile
{
    public Automobile(){}       }
    public List<Automobile> GetAutos()
    {
       List<Automobile> autos = new List<Automobile> {
            new Automobile{ AutoId = 1,Make="Ford",Model="F150",Year="1986"},
            new Automobile{ AutoId = 2,Make="Chevy",Model="Camaro",Year="1984"},
            new Automobile{ AutoId = 3,Make="Dodge",Model="Durango",Year="2000"},
            new Automobile{ AutoId = 4,Make="Suzuki",Model="Kizashi",Year="2012"},
        };
        return autos; 
    }

    public int AutoId { get; set; }
    public string Make { get; set; }
    public string Model { get; set; }
    public string Year { get; set; }

}

HTML：

<table class="table">
<thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.AutoId)
        </th>
        <th>
            <a id="MakeSort" class="text-decoration-none">Make</a>
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Model)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Year)
        </th>
        <th></th>
    </tr>
</thead>
<tbody id="tableArea">
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.AutoId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Make)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Model)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Year)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
        </td>
    </tr>
}
</tbody>
</table>

请注意，我用排序表替换的区域是 TBody 'tableArea'。

控制器：

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View(new Automobile().GetAutos());
    }

    public IActionResult SortMake()
    {
        var autos = new Automobile().GetAutos().OrderByDescending(x => x.Make).ToList();
        return new JsonResult(autos); 
    }
}

控制器操作SortMake确实具有正确的列表计数和值，已通过设置断点和监视进行验证。

脚本：

function SortMake(){
    alert("Clicked");
    var direction = "asc";
    $.ajax({
        url: '@Url.Action("SortMake","Home")',
        contentType: 'application/json; charset=utf-8',
        type: 'Get',
        data: 'json',
        success: function (data) {
            $('#tableArea').empty();
            data.forEach(function (element) {
                $('#tableArea').append(
                    "<tr><td>" + element.AutoId + "</td>" +
                    "<td>" + element.Make + "</td>" +
                    "<td>" + element.Model + "</td>" +
                    "<td>" + element.Year + "</td></tr > ");
            });
            $('#tableArea').show();
        },
        error: function () { alert("Failed");}
    });
}

$('#MakeSort').on("click", SortMake);

Succeed 函数中的数据元素具有正确的行数，但是所有元素都未定义。因此，我最终将页面设置为：

<tbody id="tableArea">
    <tr>
        <td>undefined</td>
        <td>undefined</td>
        <td>undefined</td>
        <td>undefined</td>
    </tr> ...

Ajax 错误函数也永远不会受到影响。我错过了什么？

标签： ajaxasp.net-core-mvc

ajax - 传递给 ajax 的列表对象具有未定义的值，但列表大小是正确的

问题描述

解决方案

推荐阅读