Как показать значение в текстовом поле на основе выбора элемента из раскрывающегося списка в mvc4?

Question

Как обновить мои текстовые поля для отображения Email1 и Mobile1 свойства моей Contact модели на основе выбранного значения в DropDownList

Просмотр

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

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

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

Script

$('#CustomerContactID').change(function() { 
    $('#ContactID').empty(); 
    $.ajax({ 
     type: "GET", 
     url: "/VisitorsForm/GetEmailByCustomerContactId", 
     datatype: "Json", 
     data: { CustomerContactID: $('#CustomerContactID').val() }, 
     success: function (data) { 
      $('#Email1').val(data.Email1); 
      $('#MobileNo1').val(data.Mobile1); 
     } 
    }); 
}); 

Контроллер

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

Answer 1

Ваш запрос в GetEmailByCustomerContactId() возвращается IEnumerable<Contact>, коллекция, ни один объект, так data в Ajax успеха обратного вызова является массивом и $('#Email1').val(data.Email1); терпит неудачу, потому что массив не имеет свойство с именем Email1 (но каждый элемент коллекции делает)

поскольку вы только хотите, чтобы вернуть один Contact, изменить ваш запрос

var contact = (from a in db.Contacts where a.ContactID == Id select a).FirstOrDefault(); 

и так как вы хотите только 2 свойства Contact, а затем возвращает анонимный объект, содержащий только те свойства (нет никакого смысла унижающие производительность по sendi нг данных по проводам, которые вы никогда не используете

var data = new { Email1 = contact.Email1, Mobile1 = contact.Mobile1 }; 

и, наконец, указать опцию JsonRequestBehavior, так как ваш делать GET вызов

return Json(data, JsonRequestBehavior.AllowGet;); 

Далее, вы не генерируя никаких входов с id="Email1" и id="Mobile1". Оба Textboxes вы должны создать привязку к ContactID, поэтому я предполагаю, что они должны быть

@Html.TextBoxFor(model => model.Email1, new { @class = "form-control" }) 
@Html.TextBoxFor(model => model.Mobile1, new { @class = "form-control" }) 

при условии, что Email1 и Mobile1 также свойство модели в представлении.

Ваш Textboxes теперь будет обновляться в success обратного вызова

Боковые ноты:

1. Всегда используйте url: '@Url.Action(....)', для обеспечения правильного URL является сгенерированный
2. Использование data: { CustomerContactID: $(this).val() },
3. Изменение параметра метода до public JsonResult GetEmailByCustomerContactId(Guid CustomerContactId) и удалите Guid.Parse (DefaultModelBinder wil л сделать преобразование)
4. Удалить new { type = "text" } из ваших Html.TextBoxFor() методов (помощник уже добавляет)