Возврат атрибутов из списка с использованием AJAX

Question

В настоящее время я использую AJAX .NET Core. Я пытаюсь сделать очень простую вещь. Заполните список элементов, а затем отобразите каждый элемент в <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

Получается, что существует разница в написании

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 на стороне Entity Framework, должны иметь первую букву вв нижнем регистре.

Глупый меня ...

Спасибо всем за то, что нанес мне ответный удар.

Answer 2

Это не отвечает на оригинальный вопрос, но стоит упомянуть:

Вы должны (должны?), Из соображений безопасности, создать 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);
}

Answer 3

Я пытался воспроизвести текущий код.

Ваш 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 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. Или, если эти элементы заключены в некоторые другие объекты в классе.

Надеюсь, это даст некоторую подсказку.