数据字段在ASP中没有定义.. Net Core MVC使用JSON

Question

所以，我有一个问题与我的Javascript代码。我使用级联下拉菜单，一个是汽车品牌，另一个是汽车模型。根据逻辑，当我从下拉菜单中选择一个品牌时(例如丰田或奥迪等)，第二个下拉菜单应该显示所选品牌的车型。通常，我在控制器中使用GetModelsJson方法来连接Brand和Model表，并以json形式返回模型。

public JsonResult GetModelsJson(int p)
{
var models = (from x in GetModels() 
join y in GetBrands() on x.BrandId equals y.Id 
where x.BrandId == p
select new
{
Text = x.Name,
Value = x.Id.ToString()
}).ToList();
return new JsonResult(new { data = models });
}

在视图中，我想使用以下代码显示下拉列表:

@Html.Label("Brands")
@Html.DropDownList("drpBrand",Model.BrandList,"--Select Brand--", new {@class = "form-control"})
@Html.Label("Models")
@Html.DropDownList("drpModel",Model.ModelList,"--Select Model--", new {@class = "form-control"})

问题从javascript代码开始。在出现for循环之前，一切正常。由于某些原因，数据变量的长度和其他字段(如text和value)未定义。

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
$(function(){
$('#drpBrand').change(function(){
var id = $('#drpBrand').val();
$.ajax({
url: '/Admin/Vehicle/GetModelsJson',
data: {p : id},
type: "POST",
dataType: "Json",
success: function(data){
console.log(data);
$('#drpModel').empty();
for (let i = 0; i < 3; i++){
$('#drpModel').append("<option value ='" + data[i].value + "'>" + data[i].text + "</option>");
}
}
});
});
});
</script>

结果，模型的第二个下拉框变为空。网站图片

从这张图中可以看到，第二个下拉框是空的，尽管根据控制台数据有它的字段，如"A5"， "A4"， "A6"

Answer 1

由于您从服务器上传的图片对象具有"data"字段，它包含数组，所以像这样编辑代码:

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
$(function(){
$('#drpBrand').change(function(){
var id = $('#drpBrand').val();
$.ajax({
url: '/Admin/Vehicle/GetModelsJson',
data: {p : id},
type: "POST",
dataType: "Json",
success: function(data){
console.log(data);
$('#drpModel').empty();
for (let i = 0; i < data.data.length; i++){
$('#drpModel').append("<option value ='" + data.data[i].value + "'>" + data.data[i].text + "</option>");
}
}
});
});
});
</script>