I am currently in the process of migrating code from one project to another. Although the code works fine in the original project, it is not functioning properly in the new one. I’m uncertain if something was overlooked on my end.
Within this code, there are 3 dropdown lists that are interdependent - Country, State, and City, where Country is independent.
UPDATE: Added Model
public IEnumerable<SelectListItem> Countries { get; set; }
public IEnumerable<SelectListItem> States { get; set; }
public IEnumerable<SelectListItem> Cities { get; set; }
UPDATED: Here’s the dropdown code:
<div class="form-group">
@Html.LabelFor(model => model.Country, htmlAttributes: new { @class = "control-label" })
@Html.DropDownListFor(model => Model.Country, Model.Countries, "---Select Country---", new { @class = "", @id = "ddlCountry" })
@Html.ValidationMessageFor(model => model.Country, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label" })
@Html.DropDownListFor(model => model.State, new List<SelectListItem>(), "---Select State---", new { @class = "", @id = "ddlState" })
@Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label" })
@Html.DropDownListFor(model => model.City, new List<SelectListItem>(), "---Select City---", new { @class = "", @id = "ddlCity" })
@Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
</div>
UPDATED: My Javascript:
<script type="text/javascript">
$(function () {
$('#ddlCountry').change(function () {
//debugger;
$.ajax({
type: "post",
url: "/States/Add",
data: { countryId: $('#ddlCountry').val() },
datatype: "json",
traditional: true,
success: function (data) {
$.each(data, function (index, value) {
$('#ddlState').append('<option value="' + value.StateId + '">' + value.StateName + '</option>');
});
}
});
});
$('#ddlState').change(function () {
$.ajax({
type: "post",
url: "/Cities/Add",
data: { stateId: $('#ddlState').val() },
datatype: "json",
traditional: true,
success: function (data) {
$.each(data, function (index, value) {
$('#ddlCity').append('<option value="' + value.CityId + '">' + value.CityName + '</option>');
});
}
});
});
});
UPDATED: Controller included:
public ActionResult Create()
{
try
{
GeneralEntities generalEntities = new GeneralEntities();
List<SelectListItem> countryNames = new List<SelectListItem>();
VendorViewModel casModel = new VendorViewModel();
List<Countries> countries = generalEntities.Countries.ToList();
countries.ForEach(x =>
{
countryNames.Add(new SelectListItem { Text = x.CountryName, Value = x.CountryId.ToString() });
});
casModel.Countries = countryNames;
return View(casModel);
}
catch (Exception)
{
return View();
}
}
//Get States --- Resides in the StatesController
public JsonResult Add(string countryId)
{
int Id;
Id = Convert.ToInt32(countryId);
var states = from a in db.States where a.CountryId == Id select a;
return Json(states, JsonRequestBehavior.AllowGet);
}
The list doesn’t populate, and upon debugging in the console window, a 500 server error is shown. Could it be a permission issue or a missing piece of code?
Thank you for your assistance.
UPDATE: Stack Trace..
There is already an open DataReader associated with this Command which must be closed first.
...
UPDATE: I attempted to add ‘MultipleActiveResultSets=True’ to my connection string as recommended elsewhere, but it caused issues with my security token.
UPDATE: Although no errors appear now, the States List still isn’t populating after selecting a Country. The perplexity lies in why the original solution worked while this one does not...
UPDATE: This has been moved to a different question due to a suspected script conflict! Additional details can be found here: stackoverflow.com/questions/60386156