Problems The cascading drop-down list generated by the drop-down list does not send the selected value to the server

Question

Here is my opinion on the image

The code is working fine, but ...

When I submit the form, it sends only the value of the first drop-down list (I checked the received network arguments of the browser), also when I look at the source of the page, it does not show the generated parameters that I generated using the ajax function.

Here is my code

The action that my first dropdownList generates

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

Action returning json from second data 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); } 

My Ajax call

 @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> 

My view

 @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

You already have a <select> element with name="ddlCountry" (generated by @Html.DropDownList("ddlCountry", new List<SelectListItem>(), "--Select--") , but in an ajax call you overwrite it and create a new <select> element without the name attribute (so its value is not sent back.

In the success callback, you must create <option> elements and add them to existing <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)); }); } 

Side note: your methods should return a collection of anonymous objects, not SelectListItem It makes no sense to send additional data (other SelectListItem properties) through the wire when you are not using them.

Answer 2

I think you are missing the end tag </div> for <div id ="Countries"> .

Try the following:

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