时间戳

首页 > 解决方案 > AJAX GET 从表中获取数据库列并填充 Select Drop Down - 项目显示未定义

jquery - AJAX GET 从表中获取数据库列并填充 Select Drop Down - 项目显示未定义

问题描述

我正在使用 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);
    }

阿贾克斯：

 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 检索的项目只是 DB 行 ID 和另一个名为 MarkerName 的列

下面的屏幕截图显示我正在服务器上提取正确的项目，所以这里有一些 AJAX 不喜欢的东西，我在浏览器调试工具中没有收到任何错误，所以不知道如何诊断。

在此处输入图像描述

更新：我也尝试了以下更改，但我仍然发现 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);
    }

标签： jqueryentity-framework-coreasp.net-ajax

解决方案

好吧，我终于弄清楚发生了什么，两件事。我的模型页面上的 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);

推荐阅读