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

【问题标题】：How can I load data from controller (JSON) to a ListBox in View?如何将数据从控制器 (JSON) 加载到 View 中的 ListBox？
【发布时间】：2021-05-07 12:57:50
【问题描述】：

我是 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>

【问题讨论】：

嗨@Wolf Alexander，我的回答是否帮助您解决了您的问题？如果可以，请您接受作为答案吗？如果没有，请您跟进让我知道吗？参考：@987654321 @.谢谢。

标签： json ajax asp.net-core get

【解决方案1】：

假设您能够成功地向 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>

【讨论】：

【解决方案2】：

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',
    contentType: "application/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 >');
        }
    }
});

【讨论】：