无法使用 ajax、json、Boostrap、MVC 填充下拉列表

问题描述

您好，我正在尝试在 Boostrap MVC 中填充 Dropdownlist，但在 jquery 中出现错误 错误是加载资源失败：服务器响应状态为 500（内部服务器错误） 在jQuery中

下面是我写的脚本

<script>
function BindBasketDD()
{
debugger;
$.ajax({
type: "POST",url: "/Home/displayFamily",data: "{}",datatype: "json",contentType: "application/json; charset=utf-8",async: false,success: function (data) {
debugger;
var jsonData = '<option value="' +
0 + '">' + "--Select Basket--" + '</option>';
//$(".ddBasketName").append(jsonData);
for (var i = 0; i < data.length; i++)
{
jsonData += '<option value="' + data[i].BasketId + '">' + data[i].BasketName + '</option>';
}
$(".ddBasketName").html(jsonData)
//$.each(data,function (i) {
// var jsonData = '<option value="' +
//data[i].Value + '">' + data[i].Text + '</option>';
// $(".ddBasketName").append(jsonData);
//});
}
});
}
</script>

控制器

' [HttpPost]
    public ActionResult displayFamily()
    {
        try
        {
            var Json_dispayData = string.Empty;
            OrderModel sdb = new OrderModel();
            DataTable dt = sdb.BindComboBox();


            List<OrderModel.Basket> Bsk = new List<OrderModel.Basket>();
            Bsk = (from DaTarow dr in dt.Rows
                   select new OrderModel.Basket()
                   {
                       BasketId = Convert.ToInt32(dr["BasketId"]),BasketName = dr["BasketName"].ToString()

                   }).ToList();
            var res = new SelectList(Bsk,"Basket","Basket");
             Json_dispayData = JsonConvert.SerializeObject(res);
            return Json(new { Json_dispayData,SUCCESS = "SUCCESS" },JsonRequestBehavior.AllowGet);



        }
        catch
        {
            return View();
        }
    }'

解决方法

只需将您的代码更改为此

SelectList 对象的第二个和第三个参数分别指代值和文本字段，在您的情况下为 BasketName 和 BasketId

   var res = new SelectList(Bsk,"BasketName","BasketId");

您也可以像这样选择文本和值字段

   var res = new SelectList(Bsk,nameof(OrderModel.Basket.BasketName),nameof(OrderModel.Basket.BasketId));