Problemy Kaskadowe dropdownlist, generowany rozwijana nie publikuje wybrane wartości do serwera

Question

Oto mój pogląd na obraz

Kod działa poprawnie, ale ...

Kiedy przesłać formularz, to wysyła tylko wartość pierwszej listy rozwijanej (sprawdziłem na sieciach otrzymanych w przeglądarce argumenty), także gdy przeglądam źródło strony, nie pokazuje wygenerowanych opcji, które wygenerowałem za pomocą funkcji ajax.

Oto mój kod

Action które generują mój pierwszy DropdownList

public ActionResult TwoDropDownList() 
{ 
    HotelContext H = new HotelContext(); 
    ViewBag.DropDownListOne = new SelectList(H.Continent.ToList(), "Id", "Name"); 
    return View(); 
} 

Akcja że powrót json drugich danych DropdownList

[HttpPost] 
public JsonResult UpdateCountryDropDownList(int ContinentId) 
{ 
    HotelContext H = new HotelContext(); 
    List<SelectListItem> CountryNames = new List<SelectListItem>(); 
    List<Country> Co = H.Country.Where(x => x.ContinentId == ContinentId).ToList(); 
    Co.ForEach(x => 
    { 
     CountryNames.Add(new SelectListItem { Text = x.Name, Value = x.Id.ToString() }); 
    }); 
    return Json(CountryNames , JsonRequestBehavior.AllowGet); 
} 

Moja Ajax wywołanie

@model Hotel.Models.Continent 
<script> 
     $(document).ready(function() { 
      $("#Name").change(function() { 
       var ContinentoId = $(this).val(); 
       $.ajax({ 
        type: "POST", 
        dataType: "json", 
        data: { ContinentId: ContinentoId }, 
        url: '@Url.Action("UpdateCountryDropDownList","Home")', 
        success: function (result) { 
         var Country = "<select id='ddlCountry'>"; 
         Country = Country + '<option value="">--Select--</option>'; 
         for (var i = 0; i < result.length; i++) { 
          Country = Country + '<option value=' + result[i].Value + '>' + result[i].Text + '</option>'; 
         } 
         Country = Country + '</select>'; 
         $('#Countries').html(Country); 
        }, 
        error: function (xhr, ajaxOptions, thrownError) { 
         console.log(arguments) 
        } 
       }); 
      }); 
     }) 
</script> 

moim zdaniem

@using(Html.BeginForm()){ 
    SelectList se = ViewBag.DropDownListOne; 
    @Html.DropDownListFor(x=>x.Name,se,"--Select--") 
    <div id ="Countries"> 
     @Html.DropDownList("ddlCountry",new List<SelectListItem>(),"--Select--") 
    </div> 
    <input type="submit" value="submit" style="margin-top:100px;" /> 
} 

HttpPost Action

[HttpPost] 
public string TwoDropDownList(string Name, string ddlCountry) 
{ 
    if (string.IsNullOrEmpty(Name) || string.IsNullOrEmpty(ddlCountry)) 
    { 
     return ("you must select Both"); 
    } 
    else 
     return ("everything is working fine"); 
} 

Answer 1

Masz już element <select> z name="ddlCountry" (generowanego przez @Html.DropDownList("ddlCountry", new List<SelectListItem>(), "--Select--") ale w zaproszeniu Ajax zastąpisz go i utworzyć nowy <select> elementu bez atrybutu name (tak jego wartość jest nie pisał z powrotem.

W zwrotnego sukces, powinno być tworzenie i dołączanie elementów <option> je do istniejącej <select>

success: function (result) { 
    var country = $('#ddlCountry); // get the existing element 
    country.empty().append($('<option></option>').val('').text('--Select--')); 
    $.each(result, function(index, item) { 
     country.append($('<option></option>').val(item.Value).text(item.Text)); 
    }); 
} 

marginesie: Twoje metody powinny być powrocie zbiór anonimowych obiektów, nie SelectListItem Nie ma sensu wysyłanie dodatkowych danych (inne właściwości SelectListItem) po drugiej stronie drutu, kiedy z nich nie korzysta.

Answer 2

Chyba brakuje znacznika końcowego </div> dla <div id ="Countries">.

Spróbuj tego:

<div id ="Countries"> 
    @Html.DropDownList("ddlCountry",new List<SelectListItem>(),"--Select--") 
</div>