使用 AJAX 从列表中返回属性

Question

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

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

作为 javascript 和 Ajax 的新手，我真的很苦恼，找不到任何好的 asp.net 核心教程。

非常感谢您的建议

我的模型是：

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>

嵌入在视图底部的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

这并没有回答原来的问题，但值得一提：

您应该（必须？出于安全原因）在服务器端 (c#) 创建一个 DTO，其中包含您想要在客户端显示的内容（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);
}

Answer 2

我试图重现当前代码。

您的 URL 可能不正确，您应该允许返回 JSON return Json(list, JsonRequestBehavior.AllowGet)

 public class PersonController : Controller
    {

        public ActionResult Index()
        {
            return this.View();
        }

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


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

            //return Json(list, JsonRequestBehavior.AllowGet);
           return Json(list); // if you use NET Core
        }
}

在您的 Index.cshtml 中将 url 更改为 url: "Person/OnGetList"

<div id="dvItems" style="font-size:24px;">
</div>
$.ajax({
        type: "GET",
        url: "Home/OnGetList",
        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);
        }
    });

Answer 3

原来写法有区别

var $tr = $('<li>').append(item.PersonId + "with name " + item.PersonName + "living in" + item.PersonAddress).appendTo(dvItems);

和

var $tr = $('<li>').append(item.personId + "with name " + item.personName + "living in" + item.personAddress).appendTo(dvItems);

在“实体框架”端用 CamelCase 编写的所有属性的第一个字母都应为小写。

愚蠢的我......

感谢大家回击我。

Answer 4

使用提供的表结构，我假设该类类似于 -

public class Person
    {
        public int PersonId { get; set; }

        public string PersonName { get; set; }

        public string  PersonAddress { get; set; }

    }

这会导致 JSON 结果为 -

[{PersonId: 1, PersonName: "Person1", PersonAddress: "Charlotte"},
{PersonId: 2, PersonName: "Person2", PersonAddress: "Chicago"},
{PersonId: 3, PersonName: "Person3", PersonAddress: "Nashville"}]

我已使用 MVC 操作来模拟您的场景。你的情况应该不会有太大的不同。

public JsonResult Person()
        {
            var personArray = new Person[]
            {
                new Person(){ PersonId = 1, PersonName="Person1", PersonAddress ="Charlotte" },
                new Person(){ PersonId = 2, PersonName="Person2", PersonAddress ="Chicago" },
                new Person(){ PersonId = 3, PersonName="Person3", PersonAddress ="Nashville" }
            };

            return Json(personArray, JsonRequestBehavior.AllowGet); ;
        }

您可能要检查的其他事项是类结构是否存在差异。例如，为 JSON 序列化程序指定的自定义名称。或者如果这些元素包含在类中的其他一些对象中。

希望这能提供一些线索。