Post
Ask Question
Sneha K

Sneha K

  • 1.2k
  • 527
  • 196k

Cascading Text box not working correctly in MVC4?

Mar 7 2016 8:17 AM

0down votefavorite

Hi I have four fields in my view CustomerName, ContactPerson, Email, MobileNo

CustomerName , ContactPerson are Cascading Dropdown and Email and MobileNo are textboxes.

If I select the CustomerName related ContactPerson will load automatically in ContactPerson dropdown.

If i select the Contactperson the ContactPerson related Email and PhoneNo will load automatically in Email and PhoneNo textbox. I did this all task completely and all are working fine.

Now i got one issue .I explain my issue with one eg. If i select the CustomerName as "KPM Processing Limited" it load the ContactPerson (Mr.Martin) in contact person textbox which is related to CustomerName("KPM Processing Limited") and if i select the contact person name(Mr.Martin) the contact person related Email([email protected]) and phone no(123456) will automatically load in Email and PhoneNo textbox.

Now i select the another customerName (eg.N.S colors) after selecting (KPM Processing Limited) and select the contact person name related to N.S Colors(MR.Luthar). Now Mr.Luthar have mail Id but didn't have phone no so the value of phone no will be null but it shows the output as Email= [email protected] and phone no = 123456. it shows the same phone no of KPM Processing limited. it doesn't empty the text box. if it is null means it doesn't change the value . it shows the previous value This is my issue. i tried my level best to explain my issue clearly. please any one help me to resolve this issue.

My Controller Code

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, JsonRequestBehavior.AllowGet);
}

public JsonResult GetEmailByContactPersonID(Guid CustomerContactId)
{
var ContactID = db.CustomerContacts.Where(i => i.CustomerContactID == CustomerContactId).Select(i => i.ContactID).FirstOrDefault();
var contact1 = (from p in db.Contacts where p.ContactID == ContactID select p).FirstOrDefault().Email1;
if (contact1 == null)
{
var contact2 = (from a in db.Contacts where a.ContactID == ContactID select a).FirstOrDefault().Email2;
contact1 = contact2;
}
return Json(contact1, JsonRequestBehavior.AllowGet);
}

public JsonResult GetPhoneNoByContactPersonID(Guid CustomerContactId)
{
var ContactID = db.CustomerContacts.Where(i => i.CustomerContactID == CustomerContactId).Select(i => i.ContactID).FirstOrDefault();
var mobile1 = (from pn in db.Contacts where pn.ContactID == ContactID select pn).FirstOrDefault().Mobile1;
if (mobile1 == null)
{
var mobile2 = (from a in db.Contacts where a.ContactID == ContactID select a).FirstOrDefault().Mobile2;

mobile1 = mobile2;
}
return Json( mobile1, JsonRequestBehavior.AllowGet);
}
 
My View Code
 
@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" })
@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" })
@Html.LabelFor(model => model.MobileNo, new { @class = "control-label" })
@Html.TextBoxFor(model => model.MobileNo, new { @class = "form-control", type = "text",disabled = "disabled", @readonly = "readonly" })
@Html.ValidationMessageFor(model => model.MobileNo)
@Html.LabelFor(model => model.Email, new { @class = "control-label" })
@Html.TextBoxFor(model => model.Email, new { @class = "form-control", type = "text" ,disabled = "disabled", @readonly = "readonly" })
@Html.ValidationMessageFor(model => model.Email)
 
 
My Json Code
 
 
<script src="~/Scripts/jquery-ui-1.11.0.js"></script>
<script>
$(function () {
$.ajax(
'@Url.Action("GetCustomers", "VisitorsForm")',{
type: "GET",
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(
'@Url.Action("GetContactPersobByCustomerId", "VisitorsForm")',{
type: "POST",
datatype: "Json",
data: { CustomerID: $('#CustomerID').val() },
success: function (data) {
$('#CustomerContactID').append($('<option></option>').val('').text('Please select'));
$.each(data, function (index, value) {
$('#CustomerContactID').append('<option value="' + value.CustomerContactID + '">' + value.ContactReference + '</option>');
});
}
});
});
});
$("#CustomerContactID").change(function () {
alert("hhh");
$.ajax(
'@Url.Action("GetEmailByContactPersonID", "VisitorsForm")',{
type: "GET",
dataType: "json",
async: false,
data: { CustomerContactID: $("#CustomerContactID").val()
},
error: function (ex) {
alert('Failed to retrieve Email.' + ex);
},
beforeSend: function () {
},
success: function (data) {
$("#Email").val(data);
}
});
});
$("#CustomerContactID").change(function () {
alert("hhh");
$.ajax(
'@Url.Action("GetPhoneNoByContactPersonID", "VisitorsForm")',{
type: "GET",
dataType: "json",
async: false,
data: { CustomerContactID: $("#CustomerContactID").val()
},
error: function (ex) {
alert('Failed to retrieve Email.' + ex);
},
beforeSend: function () {
},
success: function (data) {
$("#MobileNo").val(data);
}
});
});
 
 

I tried my level best to explain my issue. please understand and give solution to my problem..

Advance Thanks..

 
 

Answers (1)