Cascading Textfeld funktioniert nicht ordnungsgemäß in MVC4?

Question

Hallo Ich habe vier Felder in meiner Sicht Kundenname, Contact, Email, MobileNo

Kundenname und Contact Dropdown sind Cascading und E-Mail und MobileNo Textfelder sind.

Wenn ich den Kundenname auswähle, wird das zugehörige ContactPerson automatisch in das Dropdown-Menü ContactPerson geladen.

Wenn ich die Kontaktperson der Ansprechpartner wählen Zusammenhang Email und PHONENO automatisch in E-Mail und PHONENO Textbox laden. Dies funktioniert wie erwartet.

Jetzt funktionieren alle gut die zwei Cascading Dropdown funktionieren gut jetzt mein Problem ist, wenn ich die Kontaktperson die Kontaktperson auswählen E-Mail und Telefon Nein wird nicht angezeigt, dass entsprechende Textfelder.

Mein 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 GetPhoneNoByContactPersonID(Guid CustomerContactId) 
    { 
     var resultMobileNumber = string.Empty; 
     var resultEmail = string.Empty; 
     var ContactID = db.CustomerContacts.Where(i => i.CustomerContactID == CustomerContactId).Select(i => i.ContactID).FirstOrDefault(); 
     if (ContactID != null) 
     { 
      var contact = (from p in db.Contacts where p.ContactID == ContactID select p).FirstOrDefault(); 
      if (contact != null) 
      { 
       if (string.IsNullOrEmpty(contact.Mobile1) == false) 
       { 
        resultMobileNumber = contact.Mobile1; 
       } 
       else if (string.IsNullOrEmpty(contact.Mobile2) == false) 
       { 
        resultMobileNumber = contact.Mobile2; 
       } 
      } 
      if (contact != null) 
      { 
       if (string.IsNullOrEmpty(contact.Email1) == false) 
       { 
        resultEmail = contact.Email1; 
       } 
       else if (string.IsNullOrEmpty(contact.Email2) == false) 
       { 
        resultEmail = contact.Email2; 
       } 
      } 
     } 
     var details = new { success = true, email = resultEmail, mobileno = resultMobileNumber }; 
     return Json(details, JsonRequestBehavior.AllowGet); 
    } 

Code anzeigen:

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

J-Abfrage-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"); 
    debugger; 
    $.ajax(
     '@Url.Action("GetPhoneNoByContactPersonID", "VisitorsForm")',{ 
      type: "GET", 
      dataType: "html", 
      async: false, 
      data: { CustomerContactID: $("#CustomerContactID").val() 
      }, 
      error: function (ex) { 
       alert('Failed to retrieve Email.' + ex); 
      }, 
      beforeSend: function() { 
      }, 
      success: function (data) { 

       $("#Email").val(data.email); 
       $("#MobileNo").val(data.mobileno) 
       alert("Success"); 
      } 
     }); 
    }); 

Jetzt sind alle ar Es funktioniert gut, wenn ich auf die Kontaktperson klicke, die es zur GetPhoneNoByContactPersonID Aktion kommt, berechnet es die Werte und kehrt zur Ansicht zurück und es ist auch im Netz auch sichtbar. Alle sind perfekt, aber es zeigt die Daten nicht in der Textbox an. Während ich den Code inspiziere, wurde in der Konsole kein Fehler angezeigt. Aber es zeigt eine Warnmeldung, die unten erwähnt wird.

Jetzt arbeiten alle in Ordnung. Aber ich weiß nicht, warum es nicht anzeigt, wo das Problem ist. Ich habe versucht mein Niveau bwst mein Problem zu erklären. - Bitte helfen Sie mir, dieses Problem zu klären.

Voraus Dank

Answer 1

Es gibt keine ID zugeordnet with.So eine ID in TextBoxFor wie dieser erste zuweisen.

@Html.TextBoxFor(model => model.MobileNo, new {@id = "MobileNo", @class = "form-control", type = "text",disabled = "disabled", @readonly = "readonly" }) 

@Html.TextBoxFor(model => model.Email, new {@id = "Email", @class = "form-control", type = "text" ,disabled = "disabled", @readonly = "readonly" }) 

Jetzt sollte diese Arbeit

$("#Email").val(data.email); 
$("#MobileNo").val(data.mobileno)