MVC 4 Changing multiple display fields based on DropDownListFor selection
Having some issues trying to implement the solution mentioned above. It seems like there might be a problem with either my javascript code or the controller.
JavaScript in View
$('#InstitutionDDL').change(function () {
var institutionID = $(this).val();
$.ajax({
type: 'POST',
url: '/Compendia/FillImplementationInfo?InstitutionID=' + institutionID,
dataType: 'json',
contentType: 'application/json',
data: { InstitutionID: institutionID },
success: function (ret) {
$('#RegionImplementedField').val(ret.implementedRegion);
$('#ProvinceImplementedField').val(ret.implementedProvince);
$('#DistrictImplementedField').val(ret.implementedDistrict);
$('#LocationImplementedField').val(ret.implementedLocation);
},
error: function (ex) {
}
});
return false;
});
Controller Action
[HttpGet]
public JsonResult FillImplementationInfo(int InstitutionID)
{
var ret = (from e in db.Institutions
where e.ID == InstitutionID
select new
{
implementedRegion = e.Province.Region.RegionName,
implementedProvince = e.Province.ProvinceName,
implementedDistrict = e.District,
implementedLocation = e.InstitutionAdress
}).FirstOrDefault();
return Json(ret, JsonRequestBehavior.AllowGet);
}
Source of DropDownList in View
<div class="form-group">
@Html.LabelFor(model => model.InstitutionID, "Institution", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(m => m.InstitutionID, new SelectList(""), "--Select Institution--", htmlAttributes: new { @class = "form-control", @id ="InstitutionDDL" })
@Html.ValidationMessageFor(model => model.InstitutionID, "", new { @class = "text-danger" })
</div>
</div>
Upon selecting an option from the DropDownList, the goal is to fetch related data from connected tables using the InstitutionID and populate them in respective textboxes with IDs ending in #ImplementedField
Debugging Results
After choosing an option from the DropDownList, it appears that my script can capture the institutionID up to $.ajax({ data: { InstitutionID: institutionID }. However, it skips the success: function(ret) section entirely and goes straight to return false;. The error returned is 500 Internal Server Error, and according to the debugger, variable ret is being treated as undefined. I've made several attempts to modify the controller and/or javascript without success. If there's an issue with my LINQ statement, here are the Models for reference. Apologies for the lengthy post, I'm struggling to identify the mistake.
Models
public class Compendium
{
public int ID { get; set; }
public int InstitutionID { get; set; }
public string RegionImplemented { get; set; }
public string ProvinceImplemented { get; set; }
public string DistrictImplemented { get; set; }
public string LocationImplemented { get; set; }
public virtual Institution Institution { get; set; }
}
public class Institution
{
public int ID { get; set; }
public int ProvinceID { get; set; }
public District? District { get; set; } //enum
public virtual ICollection<Compendium> Compendia { get; set; }
public virtual Province Province { get; set; }
}
public class Province
{
public int ID { get; set; }
public int RegionID { get; set; }
public virtual Region Region { get; set; }
public string ProvinceName { get; set; }
public virtual ICollection<Institution> Institutions { get; set; }
}