Anonymous function error and what is anonymous function?

Question

Hi i have one view called visitors view in my project. In that view it contain two drop downsCustomerName and ContactPerson if i select the CustomerName the CustomerName related ContactPerson name will be automatically load in contact person drop down.its like Cascading DropDown. This process is working fine in normal mode that is when i run my application this cascading dropdown is working fine. But when i publish my project in LocalHost and run the application both the dropdown are not loading the values from db. These cascading is not working. so i inspect the issue in browser at that time i got these issue. The issue are below. please any one tell me what are the issue is this? Give me solution for this problem

 

 

 

 

My ViewModel

   public Nullable<System.Guid> CustomerID { get; set; }
   public string CustomerName { get; set; }
   public Nullable<System.Guid> CustomerContactID { get; set; }
   public string ContactPerson { get; set; }

 

 

 

My Controller

public ActionResult Create()

{

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

}

return View();

}

 

My View

<div class="col-sm-4">

<div class="form-group">

@Html.Label("Customer Name", new { @class = "control-label" })

@Html.DropDownListFor(model => model.CustomerID, new SelectList(string.Empty, "Value", "Text"), "Please select a Customer", new { @class = "form-control required", type = "text" })

</div>

</div>

<div class="col-sm-4">

<div class="form-group">

@Html.Label("Contact Person", new { @class = "control-label" })

@Html.DropDownListFor(model => model.CustomerContactID, new SelectList(string.Empty, "Value", "Text"), "Please select a ContactPerson", new { @class = "form-control", type = "text", id = "CustomerContactID" })

</div>

</div>

 

My Jquery

<script>

$(function () {

$.ajax({

type: "GET",

url: "/VisitorsForm/GetCustomers",

datatype: "Json",

success: function (data) {

$.each(data, function (index, value) {

$('#CustomerID').append('<option value="' + value.CustomerID + '">' + value.DisplayName + '</option>');

});

}

});

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

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

$.ajax({

type: "POST",

url: "/VisitorsForm/GetContactPersobByCustomerId",

datatype: "Json",

data: { CustomerID: $('#CustomerID').val() },

success: function (data) {

$.each(data, function (index, value) {

$('#CustomerContactID').append('<option value="' + value.CustomerContactID + '">' + value.ContactReference + '</option>');

});

}

});

});

});