Question

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

所以我需要在$ .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

我试图重现当前代码。

您的URL可能不正确，您应该允许get 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: "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 2

这不能回答原始问题，但是值得一提：

出于安全原因，您应该（必须？）在服务器端（c#）中创建一个DTO，其中应包含您要在客户端端显示的内容（javascript，{{1} }。

您可以创建类似以下内容的

html

然后像这样更改代码：

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

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

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序列化程序指定的自定义名称。或者，如果这些元素包含在类中的其他对象中。

希望这会提供一些线索。

使用AJAX从列表返回属性

4 个答案: