AJAX GET столбцы базы данных из таблицы и заполнение Select Drop Down - элементы, отображаемые как неопределенные - PullRequest
Новая
       44

AJAX GET столбцы базы данных из таблицы и заполнение Select Drop Down - элементы, отображаемые как неопределенные

0 голосов
/ 03 ноября 2019

Я использую AJAX для получения элементов из таблицы базы данных на сервере, чтобы заполнить раскрывающийся список выбора на моей странице бритвы.

В самой таблице БД содержится гораздо больше столбцов, чем я на самом деле хочу вернутьиспользуя AJAX.

Я пытаюсь просто вытащить только два столбца из каждой строки таблицы, однако в моей попытке выпадающий список выбора показывает элементы как неопределенные.

У меня есть аналогичный AJAX-запрос, который работает, когда я извлекаю содержимое всей таблицы, но эта конкретная таблица в любом случае имеет только два столбца. В этом сценарии мне нужны только два столбца из большой таблицы, и я не хочу снижать эффективность приложения, вытягивая на веб-страницу больше данных, чем необходимо.

Модель страницы: 

 public IActionResult OnGetSelectAllMarkers()
    {
        var marker = _context.Marker
                 .Where(x => x.LayerGroupID == 1)
                 .Select(x => new
                 {
                     x.ID,
                     x.MarkerName,
                     // etc, we only include the columns we need for the query.
                 }).ToList();

        return new JsonResult(marker);
    }

AJAX: 

 var options = {};
    options.url = "/Maps/Edit?handler=SelectAllMarkers";
    options.type = "GET";
    options.dataType = "json";
    options.success = function (data) {
        data.forEach(function (element) {
            $("#editMarkerSelect").append('<option value="' + element.ID + '">' + element.MarkerName + '</option>');
        });
        $('#editMarkerSelect option').clone().appendTo('#bindToMapObjectSelect');
    }
    options.error = function () {
        $("#editMarkerSelectMessageBar").html("Error while making Ajax call!");
        setTimeout(function () { $("#editMarkerSelectMessageBar").html(''); }, 5000);
    };
    $.ajax(options);

Элементы, которые я хочу получить с помощью AJAX, - это просто идентификатор строки базы данных и еще один столбец с именем MarkerName

На приведенном ниже снимке экрана показано, что я вытягиваю правильные элементына сервере, поэтому здесь есть что-то, что не нравится AJAX, я не получаю никаких ошибок в инструменте устранения ошибок браузера, поэтому не знаю, как его диагностировать.

enter image description here

Обновление: я также попробовал указанные ниже изменения, но все же обнаружил, что AJAX видит массив объектов как неопределенный: 

 public IActionResult OnGetSelectAllMarkers()
    {
        List<Marker> data = _context.Marker
                 .Where(x => x.LayerGroupID == 1)
                 .Select(x => new Marker
                 {
                     ID = x.ID,
                     MarkerName = x.MarkerName,
                     // etc, we only include the columns we need for the query.
                 }).ToList();

        return new JsonResult(data);
    }

1 Ответ

0 голосов
/ 04 ноября 2019

Ну, я наконец понял, что происходит, две вещи. Метод OnGetSelectAllMarkers () на моей странице модели, показанный в первой части моего вопроса, оказался неверным. Метод возвращал список с анонимными типами, и AJAX, похоже, не нравился, учитывая, что объекты, которые они возвращали с сервера, были неопределенными.

Следующая часть была неверным запросом LINQ. Я основывал оператор WHERE на столбце, который находится на полпути по строке таблицы, но пытался вернуть значение столбца, расположенное перед ним. Не понимал, что это будет проблемой, и обнаружил это только при попытке вернуть другой столбец во время тестов. После изменения порядка столбцов в таблице и обновления по мере новой миграции все работало нормально

Рабочий код показан ниже: 

 public IActionResult OnGetSelectAllMarkers()
    {
        List<Marker> data = _context.Marker
                 .Where(x => x.LayerGroupID == 1)
                 .Select(x => new Marker
                 {
                     ID = x.ID,
                     MarkerName = x.MarkerName,
                     // etc, we only include the columns we need for the query.
                 }).ToList();

        return new JsonResult(data);
    }

 var options = {};
    options.url = "/Maps/Edit?handler=SelectAllMarkers";
    options.type = "GET";
    options.dataType = "json";
    options.success = function (data) {
        data.forEach(function (element) {
            $("#editMarkerSelect").append('<option value="' + element.id + '">' + element.markerName + '</option>');
        });
        $('#editMarkerSelect option').clone().appendTo('#bindToMapObjectSelect');
    }
    options.error = function () {
        $("#editMarkerSelectMessageBar").html("Error while making Ajax call!");
        setTimeout(function () { $("#editMarkerSelectMessageBar").html(''); }, 5000);
        alert("error");
    };
    $.ajax(options);
...