how to do show the cascading value in Textbox

Question

My View

 

 

 

I done the first part. That is if i select the CustomerName the related ContactPeson Name has to be stored in ContactPerson Dropdown and also it save the Value in DB . But now my second issue is If select the ContactPerson Name the ContactPerson related Email and  MobileNo have to display in their textboxes. The email Phone no in Contact Table

 

Customer Table

 

CustomerID Uniqueidentifier not null, DisplayName varchar(100), PrintName varchar(100)

 

 Customer Contact Table

CustomerCoontactID Uniqueidentifier not null, CustomerID Uniqueidentifier null, ContactID Uniqueidentifier null

 

Contact Table

 

ContactID Uniqueidentifier not null, Email1,Emai2,Emai3,Mobile1,Mobile2,Mobile3,

 

 

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

public Nullable<System.Guid> ContactID { get; set; }

public string MobileNo1 { get; set; }
public string MobileNo2 { get; set; }

public string Email1 { get; set; }
public string Email2 { get; set; } 

 

My View

 

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

 

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

@Html.LabelFor(model => model.Email1, new { @class = "control-label" })
@Html.TextBoxFor(model => model.ContactID, new { @class = "form-control", type = "text" })
@Html.ValidationMessageFor(model => model.Email1)

</div></div> 

 

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

@Html.LabelFor(model => model.MobileNo1, new { @class = "control-label" })
@Html.TextBoxFor(model => model.ContactID, new { @class = "form-control", type = "text" })
@Html.ValidationMessageFor(model => model.MobileNo1)

</div>
</div> 

 

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

 

public JsonResult GetEmailByCustomerContactId(string CustomerContactId)
{
Guid Id = Guid.Parse(CustomerContactId);

var contacts = from a in db.Contacts where a.ContactID == Id select a;
return Json(contacts);
}

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

 

 My J-queryCode

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


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

$('#ContactID').empty();
$.ajax({

type: "POST",
url: "/VisitorsForm/GetEmailByCustomerContactId",
datatype: "Json",
data: { CustomerContactID: $('#CustomerContactID').val() },
success:function(data){
$.each(data, function (index, value) {

$('#ContactID').append('<option value="' + value.ContactID + '">' + value.Email1 + '</option>');
});

}
});
});

 I just want to show the  value in the textbox don't want to save the value in Db .So i got confusion which method have to use . and this code is not working. please any one tell me where i did mistake.

 

 

Advance Thanks..