Selected District not retrieved for employee in edit view ge

Question

in image above show what i need

I have three drop down list Country,City,District

three drop down list cascade each other

meaning select country fill City and select City fill District in edit or create both

in edit view i can get value selected previous for country and city for employee i need to edit

but District cannot get selected value for employee i need to edit

in Edit view (get)
@model WebCourse.Models.Customemployee2
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Edit</title>
<script src="~/scripts/jquery-1.10.2.js"></script>
<script>
$(function () {
$("#CountryId").change(function () {
$("#citylist").empty();
// alert("error");
var x = $(this).val();
$.ajax({
url: "/empcourse/getcitybyid",
data: { id: x },
success:function(res)
{
$.each(res, function (i, e) {
if (e.Id == $("#cityidhidden").val())
{
$("#citylist").append("<option selected value='" + e.Id + "'>" + e.CityName + "<option>")
}
else
{
$("#citylist").append("<option value='" + e.Id + "'>" + e.CityName + "<option>")
}
});
}
});
});
$("#CountryId").change();
$("#citylist").change(function () {
$("#districtlist").empty();
// alert("error");
var y = $(this).val();
$.ajax({
url: "/empcourse/getdistrictbyid",
data: { id: y },
success: function (res) {
$.each(res, function (i, e) {
if (e.Id == $("#disthidden").val()) {
$("#districtlist").append("<option selected value='" + e.Id + "'>" + e.DistrictName + "<option>")
}
else
{
$("#districtlist").append("<option value='" + e.Id + "'>" + e.DistrictName + "<option>")
}
});
}
});
});
$("#citylist").change();
});
</script>
</head>
<body>
<div>
@using (Html.BeginForm())
{
<div>
<input type="hidden" value="@ViewBag.Cityid" id="cityidhidden" />
<input type="hidden" value="@ViewBag.dist" id="disthidden" />
Name:@Html.TextBoxFor(a => a.Name)
<br />
Country:@Html.DropDownList("CountryId")
<br />
City:<select id="citylist" name="CityId"></select>
<br />
District:<select id="districtlist" name="DistrictId"></select>
<br />
<input type="submit" />
</div>
}
</div>
</body>
</html>
in Edit function in controller empcourse
public class empcourseController : Controller
{
mycourseEntities db = new mycourseEntities();
// GET: empcourse
public ActionResult Edit(int id)
{
Employee old = db.Employees.Find(id);
if (old != null)
{
// country and city working
//district not working
int countryid = old.Destrict.City.Country.Id;
var vm = new Customemployee2();
vm.Name = old.Name;
ViewBag.CountryId = new SelectList(db.Countries.ToList(), "Id", "CountryName",countryid);
ViewBag.Cityid = old.Destrict.City.Id;
ViewBag.dist = old.DistrictId;
return View(vm);
}
//getcitybyid retrieve city it call in ajax in jquery and it working
public JsonResult getcitybyid(int id)
{
db.Configuration.ProxyCreationEnabled = false;
return Json(db.Cities.Where(a => a.CountryId == id), JsonRequestBehavior.AllowGet);
}
//getdistrictbyid retrieve district it call in ajax in jquery and it working
public JsonResult getdistrictbyid(int id)
{
db.Configuration.ProxyCreationEnabled = false;
return Json(db.Destricts.Where(a => a.CityId == id), JsonRequestBehavior.AllowGet);
}
}
in model Customemployee2
public class Customemployee2
{
public string Name { get; set; }
public int DistrictId { get; set; }
}
}

Midhun T P · Answer

Hi It's because when we call ajax function it will take some time to execute and get the result and before that rest of the code will be executed. So while you calling ajax for binding city it was executing in background and before it's completion rest of the code i.e your $( #citylist ).change(); is executed. But while that is executed there is not options in city dropdown and hence no records for district. Please accept the answer if it solves the issue. It will be helpful for others and will be something for me to cheer :)

ahmed salah · Answer

Thank you very much it solved but what is the reason of the problem

Midhun T P · Answer

Hi Please put it here - $.ajax({ url: /empcourse/getcitybyid data: { id: x } success:function(res) { $.each(res function (i e) { if (e.Id == $(#cityidhidden).val()) { $(#citylist).append(  + e.CityName +  ) } else { $(#citylist).append(  + e.CityName +  ) } }); //Put it here } });

ahmed salah · Answer

can you actually tell me which place i can put $(#citylist).change();

ahmed salah · Answer

can you tell me which place i will call if possible

Midhun T P · Answer

Hi it may be because you are calling $(#citylist).change(); - this method before the city dropdown is filled. Try calling that function inside the success function of city filling ajax