如何解决如何将数据从控制器 (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 >');
}
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。