I have tried to implement a cascading drop box interface on the view of a form a user can submit.
I have two databases that store the information to populate the drop down lists and another that will store all the information from the form.
In my Controller, I pass the drop down lists to the view via the ViewBag.
Controller:
public ActionResult Add()
{
List<country> countries = new List<country>();
List<city> cities = new List<city>();
using (EntitiesConnection dc = new EntitiesConnection())
{
countries = dc.Countries.ToList();
cities = dc.Cities.ToList();
}
ViewBag.countryId = new SelectList(countries, "id", "name");
ViewBag.cityId = new SelectList(cities, "id", "name");
return View();
}
View:
<div class="editor-label">
@Html.LabelFor(model => model.name)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.name)
@Html.ValidationMessageFor(model => model.name)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.country_id)
</div>
<div class="editor-field">
@Html.DropDownListFor(model => model.country_id, ViewBag.countryId as SelectList)
@Html.ValidationMessageFor(model => model.country_id)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.city_id)
</div>
<div class="editor-field">
@Html.DropDownListFor(model => model.city_id, ViewBag.cityId as SelectList)
@Html.ValidationMessageFor(model => model.city_id)
</div>
I also have a POST Action Result to Validate the Form that was submitted as well as a JsonResult.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Add(Donor donor)
{
List<country> countries = new List<country>();
List<city> cities = new List<city>();
using (EntitiesConnection dc = new EntitiesConnection())
{
var countriesList = dc.Countries.ToList();
if (donor != null && donor.country_id > 0)
{
cities = dc.Cities.Where(a => a.country_id.Equals(donor.country_id)).ToList();
}
}
ViewBag.countryId = new SelectList(countries, "id", "name", donor.country_id);
ViewBag.cityId = new SelectList(cities, "id", "name", donor.city_id);
using (EntitiesConnection dc = new EntitiesConnection())
{
if (ModelState.IsValid)
{
dc.Donors.Add(donor);
dc.SaveChanges();
}
}
return RedirectToAction("Index", "Donor");
}
public JsonResult GetCities(int countryID)
{
using (EntitiesConnection dc = new EntitiesConnection())
{
var cities = (from a in dc.Cities
where a.country_id.Equals(countryID)
orderby a.name
select a).ToList();
return new JsonResult { Data = cities, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
In the View, I have a some javascript code in order for the cascading drop down function to work.
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script>
$(document).ready(function () {
$("#country_id").change(function () {
var countryID = parseInt($(this).val());
if (!isNaN(countryID)) {
var $ddcity = $("#city_id");
$ddcity.empty();
$ddcity.append($("<option></option>").val('').html('wait please ...'));
$.ajax({
url: '@Url.Action("GetCities", "Donor")',
type: 'GET',
datatype: 'json',
data: { countryID: countryID },
success: function (d) {
$ddcity.empty();
$ddcity.append($("<option></option>").val('').html('select city'));
$.each(d, function (i, item) {
$ddcity.append($("<option></option>").val(item.id).html(item.name));
});
},
error: function () {
alert("error !!");
}
});
}
});
});
</script>
}
But for some reason when you select an option from the first dropdown the second dropdown list will not display any of the option that are implemented in the database and the alert message rise an error. Any help would be appreciated.
Please :'(