Json заполняет мое динамически заполненное выпадающее меню с неопределенным

Question

Я боролся с этим в течение дня. и до сих пор не может его решить, и это должно быть что-то простое. У меня есть два выпадающих списка: «Страна и город». Когда выбрана Страна, я хочу показать доступные города для этой страны в БД. но выпадающий список заполняется большим списком элементов с текстом undefined, идентификатор возвращается правильно, когда я проверил, и значение является правильным идентификатором. Также я уже посмотрел на Json filling dropdown with undefined, но, похоже, не помог, поэтому здесь я оставляю свой фрагмент кода, чтобы узнать, может ли кто-то определить, что я не могу.

HomeController.cs

public class HomeController : BaseController 
    { 
     private XecuDateDevEntities db = new XecuDateDevEntities(); 
     List<SelectListItem> country = new List<SelectListItem>(); 
     List<SelectListItem> _city = new List<SelectListItem>(); 

     public ActionResult Index() 
     { 

      ViewBag.var1 = GetCountries(); 
      ViewBag.var2 = _city; 
      return View(); 
     } 

     private SelectList GetCountries() 
     { 

      foreach (Country c in db.Countries) 
      { 
       country.Add(new SelectListItem { Text = c.Country1, Value = c.IDCountry.ToString() }); 
      } 
      return new SelectList(country, "Value", "Text", "id"); 

     } 

     public JsonResult GetCities(string id) 
     { 
      foreach (City c in db.Cities.Where(x=> x.IDCountry.ToString() == id)) 
      { 
       _city.Add(new SelectListItem { Text = c.City1, Value = c.IDCity.ToString() }); 
      } 
      return Json(_city, JsonRequestBehavior.AllowGet); 

     } 
    } 

Index.cshtml

<h2>Index</h2> 
Country @Html.DropDownList("var1", "Choose Country") 
City  @Html.DropDownList("var2", "Choose City") 
@section scripts 
{ 
    <script type="text/javascript"> 
     function myFunction() { 
      var id = $("#var1 :selected").val(); 
      var url = "Home/GetCities"; 
      var data1 = { "id": id }; 
      $.post(url, data1, function (data) { 
       var items = []; 
       items.push("<option value=" + 0 + ">" + "Choose City" + "</option>"); 
       for (var i = 0; i < data.length; i++) { 

        items.push("<option value=" + data[i].Value + ">" + data[i].Text + "</option>"); 
       } 
       $("#var2").html(items.join(' ')); 
      }); 
     } 

     $("#var1").change(myFunction); 


    </script> 
} 

Спасибо !!!!

Answer 1

Вы можете использовать этот подход:

контроллер:

public class HomeController : BaseController 
{ 

     public ActionResult Index() 
     { 

      ViewBag.CountryList = new SelectList(_countryService.GetContries(), "Id", "Title"); 
      ViewBag.CityList = new SelectList(_cityService.GetaCities(), "Id", "Title"); 
      return View(); 
     } 

     [AllowAnonymous] 
     public virtual JsonResult SelectCity(Guid id) 
     { 
      var cities = _cityService.GetaCities().Where(p => p.CountryId == id).Select(c => new { c.Id, c.Title }); 
      return Json(cities, JsonRequestBehavior.AllowGet); 
     } 
} 

Вид:

<div class="form-group"> 
        @Html.LabelFor(model => model.CountryId, new { htmlAttributes = new { @class = "form-control" } }) 
        <div> 
         @Html.DropDownList("CountryId", (SelectList)ViewBag.CountryList, "-- Select ---", new { @class = "form-control", id = "rdbCountry" }) 
         @Html.ValidationMessageFor(model => model.CountryId, "", new { @class = "text-danger" }) 
         <div class="clearfix"></div> 
        </div> 
</div> 
<div class="form-group"> 
        @Html.LabelFor(model => model.CityId, new { htmlAttributes = new { @class = "form-control" } }) 
        <div> 
         @Html.DropDownList("CityId", (SelectList)ViewBag.CityList, "-- Select ---", new { @class = "form-control", id = "rdbCity" }) 
         @Html.ValidationMessageFor(model => model.CityId, "", new { @class = "text-danger" }) 
         <div class="clearfix"></div> 
        </div> 
</div> 


@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
    <script type="text/javascript"> 
      $(function() { 
       $('#rdbCountry').change(function() { 
        jQuery.getJSON('/Home/SelectCity/', { id: $(this).val() }, function (data) { 
         $('#rdbCity').empty(); 
         jQuery.each(data, function (i) { 
          var option = $('<option></option>').attr("value", data[i].Id).text(data[i].Title); 
          $("#rdbCity").append(option); 
         }); 
        }); 
       }); 
      }); 
    </script> 
}