Cascading Dropdown is not working in mvc4?

Question

Hi i have two fields "CustomerName" and "ContactPerson" in my view. if i select the CustomerName the value which is depend to CustomerName is need to store in ContactPeson dropdown. As per below code it fetch the data from Db and store in both dropdowns and also if i select the "CustomerName" the related "ContactPerson" is automatically store or display in ContactPerson Dropdown. All are working fine. But the issue is if i select the value in dropdowns and try to save it in Db its not saving the value. The value will be null for both fields. I donno where i did mistake. Any one give solution for this problem.

Advance Thanks..

My view CascadingDropDown

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 View

 <div class="col-sm-4">
            <div class="form-group">
                  @Html.LabelFor(model => model.CustomerName , new { @class = "control-label" })
   @Html.DropDownList("dropdownCustomer", new SelectList(string.Empty, "Value", "Text"), "Please select a Customer", new { @style = "width:250px;" })
</div>
</div>



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

                  @Html.LabelFor(model => model.ContactPerson, new { @class = "control-label" })
        @Html.DropDownList("dropdownCustomerContact", new SelectList(string.Empty, "Value", "Text"), "Please select a ContactPerson", new { @style = "width:250px;" })
            </div></div>

j-query code

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

    $('#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('<option value="' + value.CustomerContactID + '">' + value.ContactReference + '</option>');
                });
            }
        });
    });
});

My Controller

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

Answer 1

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

@Html.LabelFor(model => model.CustomerName , new { @class = "control-  label" })
@Html.DropDownListFor(model => model.CustomerID, new SelectList(string.Empty, "Value", "Text"), "Please select a Customer", new { @style = "width:250px;" })
                   </div>
                   </div>


   <div class="col-sm-4">
    <div class="form-group">
@Html.LabelFor(model => model.ContactPerson, new { @class = "control-label" })
@Html.DropDownListFor(model => model.CustomerContactID, new SelectList(string.Empty, "Value", "Text"), "Please select a ContactPerson", new { @style = "width:250px;" })

        </div> </div>


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