尝试在.net核心中绑定下拉列表时在ajax jquery中获取空对象列表答案

【问题标题】：Getting empty object list in ajax jquery while trying to bind dropdown in .net core尝试在.net核心中绑定下拉列表时在ajax jquery中获取空对象列表
【发布时间】：2021-09-13 18:00:22
【问题描述】：

我是 .net 核心的新手，在尝试从 ajax 请求绑定下拉列表时，我得到的不是填充列表，而是完整计数的空对象列表

这是我返回列表的方法。

我也尝试将这些与服务器端绑定，但出现此错误。

请指导我为什么我无法使用我已经尝试过的任何方法绑定这些下拉菜单。

这是我的代码

public  JsonResult GetLevels() {

        // var list =  _levelsRepositry.GetAllLevels();



        var list = new List<ClassLevelModel>() {
        new ClassLevelModel(){Id = 1 , Level= "My Level1" },
        new ClassLevelModel(){Id = 1 , Level= "My Level2" },
        };

        return new JsonResult(list);
    }

    public JsonResult GetBoards()
    {

        var list = new List<BoardTypeModel>() {
        new BoardTypeModel(){Id = 1 , Board= "My Board" },
        new BoardTypeModel(){Id = 1 , Board= "My Board" },
        };

        return new JsonResult(list);
    }


     $(document).ready(function () {
                 GetLevels();
                 GetBoards();
    
            });
    
    
            function GetLevels() {
                $.ajax({
                    method: "Get",
                    url: "/Students/GetLevels",
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        for (var i = 0; i < data.length; i++) {
                            s += '<option value="' + data[i].Id + '">' + data[i].Level + '</option>';
                        }
                        $("#levels").html(s);
    
                    }
                });
    
            }
    
            function GetBoards() {
                $.ajax({
                    method: "Get",
                    url: "/Students/GetBoards",
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        for (var i = 0; i < data.length; i++) {
                            s += '<option value="' + data[i].Id + '">' + data[i].Board + '</option>';
                        }
                        $("#boards").html(s);
    
                    }
                });
    
            }

【问题讨论】：

请注意这些方法是异步的，我想这可能是一个原因，所以我删除了 Task 和 async 但这也不是问题，我仍然严重卡在这个下拉问题上.
请编辑您的帖子并将实际代码显示为文本而不是屏幕截图。其他人无法从您的图像中复制和粘贴。 See here了解详情。
+ 使用问题上的编辑链接添加更多信息。
我已添加代码

标签： c# jquery asp.net-mvc asp.net-core .net-core

【解决方案1】：

确保您的启动文件具有正确的控制器配置

    services.AddControllersWithViews()
    .AddNewtonsoftJson(options =>
           options.SerializerSettings.ContractResolver =
              new CamelCasePropertyNamesContractResolver());

确保您的模型类属性具有 {get;设置;}

而且您的 java 代码中有语法错误。定义 s

 var s = '<option value="-1">Please Select Level </option>';
  for (var i = 0; i < data.length; i++) {
  s += '<option value="' + data[i].id + '">' + data[i].level + '</option>';
  }

$('#levels').html(s);

并查看

<select class="form-control" id="levels" ></select>

【讨论】：

【解决方案2】：

由于你在视图中使用了ViewBag，你只需要在return View之前设置ViewBag，而不是使用ajax。这里有一个demo：行动：

public IActionResult AddStudent()
        {
            ViewBag.BoardsList = new List<BoardTypeModel>() {
        new BoardTypeModel(){Id = 1 , Board= "My Board1" },
        new BoardTypeModel(){Id = 2 , Board= "My Board2" },
        };
            ViewBag.LevelsList = new List<ClassLevelModel>() {
        new ClassLevelModel(){Id = 1 , Level= "My Level1" },
        new ClassLevelModel(){Id = 2 , Level= "My Level2" },
        };
            return View();
        }

查看：

<form>
    <select asp-for="BoardId" asp-items="@(new SelectList(ViewBag.BoardsList,"Id","Board"))">
        <option value="0">Select Board</option>
    </select>
    <select asp-for="LevelId" asp-items="@(new SelectList(ViewBag.LevelsList,"Id","Level"))">
        <option value="0">Select Level</option>
    </select>
</form>

结果：

【讨论】：