Lwrnc Crz Lwrnc Crz -3 years ago 81
Ajax Question

Autofill Textbox based on DropDownList

MVC 4 Changing multiple display fields based on DropDownListFor selection

I'm trying to follow the above example but I think I'm having problems either with my javascript or my 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>


^from which after selecting, I want to pull all related data from connected tables using InstitutionID and put it in their respective textboxes known with IDs ending in #ImplementedField

Debugging Results

After selecting an option from the DropDownList, my script could capture the institutionID up to $.ajax({ data: { InstitutionID: institutionID }. However, it skips the success: function(ret) entirely and goes straight to return false; . Furthermore, the error that is being returned is 500 Internal Server Error, and based on the debugger, ret is being treated everywhere as undefined. I've already tried modifying my controller and/or javascript multiple times but with no success. If I'm having a problem with my linq statement, I'm also posting here my Models. Apologies in advance for the long post, I really have no idea where I went wrong.

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

Answer Source

First, this URL pattern with query string is not correct to initiate an AJAX call:

url: '/Compendia/FillImplementationInfo?InstitutionID=' + institutionID,

You need to change int Url.Action or simply remove query string on it:

url: '/Compendia/FillImplementationInfo',

// or
url: '@Url.Action("FillImplementationInfo", "Compendia")'

and then remove contentType: 'application/json' since the return type already declared as JSON with dataType: 'json'.

Second, as a general convention, the HTTP method used by jQuery AJAX call & the controller action method must be match to send the argument data successfully. In view side the AJAX call sent as POST method:

$.ajax({
           type: 'POST',
           ...
      });

But the action method uses HTTP GET, which causes AJAX call cannot reach the action method since it only accepts GET request:

[HttpGet]
public JsonResult FillImplementationInfo(int InstitutionID)
{
    ...
}

Note that you can use either GET or POST method with AJAX call, but ensure both of them are matched each other. Here is an example below:

View (jQuery AJAX)

$.ajax({
          type: 'GET', // ensure this HTTP method same as used by controller action method
          ...
      });

Controller

[HttpGet]
public JsonResult FillImplementationInfo(int InstitutionID)
{
    ...
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download