Unable to populate dropdownlist in Json,Ajax using MVC Bootstrap

Question

Hello I am trying to populate Dropdownlist in Boostrap MVC but I am getting error in jquery

 

Error is Faild to load resource:the server responded with status of 500 (Internal server Error) in jquery

 

below is the script which I wrote

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

 

Controller

[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();
}
}