Getting empty object list in ajax jquery while trying to bind dropdown in .net core

Question

I am new to .net core and while using trying to bind Drop downs from ajax request but instead of Populated list i am getting the empty object list with full count

And this is my method which is returning a list.

I also tried to bind these with the Server-side but got this error.

Please guide me on why I am not able to bind these Dropdowns with any method I already tried.

Here is my code

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);
    
                    }
                });
    
            }

Answer 1

be sure that your startup file has a right configuration for the controllers

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

Be sure that your model class properties have {get; set;}

And you have a syntax error in your java code. Define 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);

and view

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

Answer 2

Since you have used ViewBag in your view,you only need to set ViewBag before return View rather than using ajax.Here is a demo: Action:

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();
        }

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>

result: