Populating dropdownlist based on previous selected item asp.net mvc

Question

I am trying to populate a DropDownList based on the previous selected item. To achieve that, I have created three models

Country model:

[Key]
public int CountryId { get; set; }
public string CountryName { get; set; }

public virtual ICollection<State> States { get; set; }

State model:

[Key]
public int StateId { get; set; }
public string StateName { get; set; }
[ForeignKey("Country")]
public int CountryId { get; set; }

public virtual Country Country { get; set; }
public virtual ICollection<City> Citys { get; set; }

City model:

[Key]
public int CityId { get; set; }
public string CityName { get; set; }
[ForeignKey("State")]
public int StateId { get; set; }

public virtual State State { get; set; }

and here is my controller:

private ProjectContext db = new ProjectContext();
//
// GET: /CascadingDropdown/

public ActionResult Index()
{
    ViewBag.CountryId = new SelectList(db.Countrys, "CountryId", "CountryName");
    return View();
}

public JsonResult StateList(int Id)
{
    var state = from s in db.States
                where s.CountryId == Id
                select s;
    return Json(new SelectList(state.ToArray(), "StateId", "StateName"), JsonRequestBehavior.AllowGet);
}

public JsonResult Citylist(int id)
{
    var city = from c in db.Citys
               where c.StateId == id
               select c;
    return Json(new SelectList(city.ToArray(), "CityId", "CityName"),   JsonRequestBehavior.AllowGet);
}
public IList<State> Getstate(int CountryId)
{
    return db.States.Where(m => m.CountryId == CountryId).ToList();
}

[AcceptVerbs(HttpVerbs.Get)]
public JsonResult LoadClassesByCountryId(string CountryName)
{
    var stateList = this.Getstate(Convert.ToInt32(CountryName));
    var stateData = stateList.Select(m => new SelectListItem()
    {
        Text = m.StateName,
        Value = m.CountryId.ToString(),
    });
    return Json(stateData, JsonRequestBehavior.AllowGet);
}

And then my script:

$(function () {
  $('#Country').change(function () {
    $.getJSON('/Cascading/StateList/' + $('#Country').val(), function (data) {
      var items = '<option>Select a State</option>';
      $.each(data, function (i, state) {
          items += "<option value='" + state.Value + "'>" + state.Text + "</option>";
      });
      $('#State').html(items);
    });
  });

  $('#State').change(function () {
    $.getJSON('/Cascading/Citylist/' + $('#State').val(), function (data) {
      var items = '<option>Select a City</option>';
      $.each(data, function (i, city) {
        items += "<option value='" + city.Value + "'>" + city.Text + "</option>";
      });
      $('#city').html(items);
    });
  });
});

Finally I display it with this view:

@model Test_restriction.DAL.ProjectContext
@using (Html.BeginForm())
{
  @Html.DropDownList("Country", ViewBag.CountryId as SelectList, "Select a       Country",      new { id="Country" })<br />
  <select id="State" name="state"></select><br />
  <select id="city" name="City"></select><br />
}

@section js
{
  <script src="~/Scripts/Testing.js" type="text/javascript"></script>
}

So I prefer to post all my code to be clear, now problem is that only the first DropDownList with countries is filled the two others DropDownList remain empty. Can someone help to find what is going wrong?

Thank you!

Answer 1

Try This

View

@model Test_restriction.DAL.CountryModel

 <script type="text/javscript">
  $(function(){
    $('#ddlcountry').change(function () {
        var sub = $('#ddlstate').val();
        if (sub != null && sub != "") {
            $('#ddlstate').html(' <option value="">--Select Topic--</option>');
            $.ajax({
                url: '/Cascading/StateList',
                data: { id: sub },
                type: 'post',
                success: function (data) {
                    if (data != null && data != "") {
                        $.each(data, function (i, item) {
                            $("#ddlstate").append($("<option></option>").val(item.value).html(item.text));
                        });
                    }
                    else {
                        $('#ddlstate').html(' <option value="">--Select State--</option>');
                    }
                }
            });
        }
        else {
            $('#ddlstate').html(' <option value="">--Select State--</option>');
        }
    });
  });
 </script>      

@Html.DropDownListFor(m => m.subject_id, (SelectList)ViewBag.Countries, "--Select Country--", new { @Class = "form-control", id = "ddlcountry" })
<select id="ddlstate" name="state_id" class="form-control">
    <option value="">--Select State--</option>
</select>

Controller

public ActionResult Index()
{
    ViewBag.countries = new SelectList(db.Countrys, "CountryId", "CountryName");
    return View();
}


 public JsonResult StateList(int Id)
{
    var state = (from s in db.States
                where s.CountryId == Id
                select s).ToList();
     var list = state.Select(m => new { value = m..StateId, text = m.stateName });
    return Json(list, JsonRequestBehavior.AllowGet);
}

Use same method for city dropdown..