Cascading Dropdown is not working in mvc4?

 

 

 $(function () {
$.ajax({
type: "GET",
url: "/VisitorsForm/GetCustomers",
datatype: "Json",
success: function (data) {
$.each(data, function (index, value) {
$('#dropdownCustomer').append('' + value.DisplayName + '');
});
}
});

$('#dropdownCustomer').change(function () {

$('#dropdownCustomerContact').empty();

$.ajax({
type: "POST",
url: "/VisitorsForm/GetContactPersobByCustomerId",
datatype: "Json",
data: { CustomerID: $('#dropdownCustomer').val() },
success: function (data) {
$.each(data, function (index, value) {
$('#dropdownCustomerContact').append('' + value.ContactReference + '');
});
}
});
});
});

 

 

 
public ActionResult Create()
{
ViewBag.CustomerContactID = new SelectList(db.CustomerContacts, "CustomerContactID", "ContactReference");

ViewBag.CustomerID = new SelectList(db.Customers, "CustomerID", "DisplayName");
return View();
}

public JsonResult GetCustomers()
{
return Json(db.Customers.ToList(), JsonRequestBehavior.AllowGet);
}
public JsonResult GetContactPersobByCustomerId(string customerId)
{
Guid Id = Guid.Parse(customerId);


var customercontacts = from a in db.CustomerContacts where a.CustomerID == Id select a;

return Json(customercontacts);
}

[HttpPost]
public ActionResult Create(VisitorsViewModel visitorviewmodel)
{

ViewBag.CustomerContactID = new SelectList(db.CustomerContacts, "CustomerContactID", "ContactReference",visitorviewmodel .CustomerContactID );

ViewBag.CustomerID = new SelectList(db.Customers, "CustomerID", "DisplayName",visitorviewmodel .CustomerID );

var VisitorsViewObj = new VisitorsForm()
{
CustomerID = visitorviewmodel.CustomerID,
CustomerContactID = visitorviewmodel.CustomerContactID
};