asp.net mvc 4 - How to Retrieve true city name for selected district in edit view -

problem?

i try more time display wrong city district selected

details

i have district controller inside controller have edit function

i retrieve selected country , city district

in edit view.

but display wrong city district selected

for country display correct country select district

code

in district controller

public actionresult edit(int id)         {              destrict d = db.destricts.find(id);             viewbag.countryid = new selectlist(db.countries.tolist(), "id", "countryname", d.city.country.id);             return view(d);          }  public jsonresult getcitybyid(int x)         {              var data = db.cities.where(a => a.countryid == x).tolist();             return json(data, jsonrequestbehavior.allowget);         } in view of edit  countryname:@html.dropdownlist("countryid","") city:<select id="citylist"></select>  in jquery fill country , city using              $("#countryid").change(function () {                   var id = $("#countryid").val();                  $("#citylist").empty();                 $.ajax({                     url: "/district/getcitybyid",                     data: {x: id},                     success:function(res)                     {                          $.each(res, function (i, e) {                                   $("#citylist").append("<option value='" + e.id + "'>" + e.cityname + "<option>")                $("#countryid").change(); 

image show have

get correct city district

look @ line

$("#citylist").append("<option value='" + e.id + "'>" + e.cityname + "<option>") 

the problem , did not close option tag, instead opened new one! reason seeing double options, half of them empty display texts.

this should fix (closing option </option>).

$("#citylist").append("<option value='" + e.id + "'>" + e.cityname + "</option>"); 

for edit screen, suggest create view model this

public class editdistrictvm {   public list<selectlistitem> countries { set;get;}   public int selectedcountry { set;get;}   public list<selectlistitem> cities { set;get;}   public int selectedcity { set;get;}   public string name { set;get;}   public int id { set;get;} } 

and in edit action, load data object of view model , send view.

public actionresult edit(int id) {   var vm = new editdistrictvm { id=id};   var d= db.disticts.firstordefault(id);   vm.name = d.name;   vm.countries = db.countries                    .select(f=>new selectlistitem { value=f.id.tostring(),                                                    text = f.countryname}).tolist();   //now cities country district   vm.cities =  db.cities                  .where(t=>t.countryid==d.city.countrid)                  .select(f=>new selectlistitem { value=f.id.tostring(),                                                  text = f.countryname}).tolist();    //set selected options in dropdowns   vm.selectedcountryid=d.city.countrid;   vm.selectedcityid = d.cityid;    return view(vm); } 

now make sure edit view typed view model

@model editdistrictvm @using(html.beginform()) {   @html.hiddenfor(f=>f.id)   @html.textboxfor(f=>f.name)   @html.dropdownlistfor(f=>f.selectedcountry, model.countries)   @html.dropdownlistfor(f=>f.selectedcity, model.cities)   <input type="submit" /> }