Question

努力通过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);

成功函数中的数据元素具有正确的行数，但是所有元素均未定义。因此，我最终将页面显示为：

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

ajax错误函数也不会被命中。请帮我看看我在想什么？

谢谢

Answer 1

好吧，这需要花一些时间来挖掘，但是我在ajax成功函数的chrome中为调试器添加了断点，并向元素中添加了手表。

似乎模型属性名称已转换为小写。因此，我将ajax数据元素属性名称更改为全部小写。现在，我正在获取表数据。这教给我2件事，1）我的模型属性名称是ajax或jquery ToLowered（）中的内容，因此下次需要注意。 2）它教会了我如何使用浏览器调试器进行更深入的研究。

如果有人想为我做这个，非常感谢。

现在，我需要尝试保持排序顺序以切换方向。

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

1 个答案: