c# - 使用 AJAX 从列表返回属性

Question

我目前正在使用 .NET Core 的 AJAX。我正在尝试做非常基本的事情。填充项目列表，然后显示 <li> 中的每个项目.问题是我发送的列表是来 self 的数据库的类型。因此，如果您滚动到我的 javascript 代码，在执行每个 <li> 之后项目是“未定义的”。我很确定会发生这种情况，因为我正在发送整个对象。

所以我需要在我的 $.each 中有另一个循环来选择 PersonId、PersonName、PersonAddress 并将它们显示在行中。

作为 javascript 和 Ajax 的新手，我真的在这里苦苦挣扎，找不到任何关于 asp.net core 的好教程。

非常感谢任何建议

我的模型是:

public class Person
{
    public int PersonId { get; set; }
    public string PersonName { get; set; }
    public string PersonAddress { get; set; }
}

我的索引方法:

public JsonResult OnGetList()
{
    List<Models.Person> list = new List<Models.Person>();

    foreach (var item in _context.Person.ToList())
    {
        list.Add(item);
    }

    return new JsonResult(list);
}

数据库中的数据如下所示:

PersonId PersonName PersonAddress
1        Martin     New York
2        Sam        New Jersey
3        Eli        Ohio

我的看法:

<div id="dvItems" style="font-size:24px;">
</div>

嵌入在 View 底部的 Javascript:

<script>
    $.ajax({
        type: "GET",
        url: "/Person?handler=List",
        contentType: "application/json",
        dataType: "json",
        success: function (response) {
            var dvItems= $("#dvItems");
            dvItems.empty();
            $.each(response, function (i, item) {
                var $tr = $('<li>').append(item.PersonId + "with name " + item.PersonName + "living in" + item.PersonAddress).appendTo(dvItems);
            });
        },
        failure: function (response) {
            alert(response);
        }
    });
</script>

Answer 1

这并没有回答原始问题，但值得一提:

你应该(必须？，出于安全原因)在服务器端创建一个 DTO (c#)，它包含你想在客户端显示的内容 (javascript >, html).

你可以创建类似这样的东西:

public class PersonDto
{
    public string Name {get; }
    public string Address { get;}

    public PersonDto(string name, string address)
    {
       Name = name;
       Address = address;
    }
}

然后像这样更改您的代码:

public JsonResult OnGetList()
{
    var list = new List<PersonDto>();

    foreach (var item in _context.Person.ToList())
    {
        list.Add(new PersonDto(item.PersonName, item.PersonAddress));
    }

    return new JsonResult(list);
}