Блог

В настоящее время я использую 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>
  

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

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

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

Ваш URL может быть неверным, и вы должны разрешить get в return 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);
        }
    });
  

Итак, оказывается, есть разница в написании

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

Какой я глупый…

Спасибо всем, что ответили мне тем же.

С предоставленной структурой таблицы я предполагаю, что класс должен быть чем-то вроде —

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

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