如何将数据从控制器 (JSON) 加载到 View 中的 ListBox？

问题描述

我是 ASP.NET Core 的新手。我只想简单地将 JSON 文件的数据加载到列表框中。

这是控制器类：

 public class EmployeeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
    [HttpGet]
    public JsonResult GetEmpList()
    {
        var empList = new List<Employee>()
        {
            new Employee { Id=1,Name="Manas"},new Employee { Id=2,Name="Tester"}
        };

        return Json(empList);
    }

}

这是视图：

<select id="ddlEmployees"></select>
<script>
var ddlEmployees = $("#ddlEmployees");
$.ajax({
    type: "GET",url: "/EmployeeController/GetEmpList",dataType: 'JSON',contentType: "application/json",success: function (data) {
        alert(data);
        for (var i = 0; i < data.length; i++) {
            ddlEmployees.append('<option> ' + data[i] + '</option >');
        }
    }
}); </script>

解决方法

假设您能够成功地向您的 API 端点发出请求，我认为需要更新的部分实际上是您在视图中的 jQuery。由于您将列表作为 JSON 返回，因此 data 参数中将包含一个对象数组。因此，为了使用 JSON 对象中的值填充 <option> 标记的值，您需要访问您在控制器中定义的 JSON 字段。

<select id="ddlEmployees"></select>
<script>
var ddlEmployees = $("#ddlEmployees");
$.ajax({
    type: "GET",url: "/EmployeeController/GetEmpList",dataType: 'JSON',contentType: "application/json",success: function (data) {
        alert(data);
        for (var i = 0; i < data.length; i++) {
            ddlEmployees.append('<option value="' + data[i].Id + '"> ' + data[i].Name + '</option >');
        }
    }
}); </script>

,

asp.net core 中响应 json 的命名约定是 camel case 而不是 pascal case。

您可以添加 console.log(data) 以检查 Console 面板中的响应（在浏览器中按 F12）。然后你会发现响应的属性名称是camel case。

更改如下：

$.ajax({
    type: "GET",url: "/Employee/GetEmpList",//it should be Employee/xxx instead of EmployeeController/xxx
    dataType: 'JSON',success: function (data) {
        console.log(data);
        for (var i = 0; i < data.length; i++){
            ddlEmployees.append('<option value="' + data[i].id + '"> ' + data[i].name + '</option >');
        }
    }
});