title: Cascading Dropdown List in Asp.net MVC4 using Json and Jquery not Populate
body: <p>Since two weeks, I'm trying to Create a ASP.NET MVC 4 Application which is contain 3 drop down lists. 
  Those are Country, State and City .
  I'm Following <a href="http://www.articlemirror.in/2014/01/populate-cascading-dropdown-list-in.html" rel="nofollow">this article</a> </p>
  
  <p>These database list details I call from databas</p>
  
  <p>Connection string :</p>
  
  <pre><code>&lt;connectionStrings&gt;
      &lt;add name="CACD_Con" connectionString="metadata=res://*/Models.Project_Name.csdl|res://*/Models.Project_Name.ssdl|res://*/Models.Project_Name.msl;provider=System.Data.SqlClient;provider connection string=&amp;quot;data source=192.168.0.000;initial catalog=CACD;persist security info=True;user id=000;password=000000000;MultipleActiveResultSets=True;App=EntityFramework&amp;quot;" providerName="System.Data.EntityClient" /&gt;
  &lt;/connectionStrings&gt;
  </code></pre>
  
  <p>controller class:</p>
  
  <pre><code> public class CacadingController : Controller
  {
      private ProjectContext db = new ProjectContext();
  
      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&lt;State&gt; Getstate(int CountryId)
      {
          return db.States.Where(m =&gt; m.CountryId == CountryId).ToList();
      }
  
      [AcceptVerbs(HttpVerbs.Get)]
      public JsonResult LoadClassesByCountryId(string CountryName)
      {
          var stateList = this.Getstate(Convert.ToInt32(CountryName));
          var stateData = stateList.Select(m =&gt; new SelectListItem()
          {
              Text = m.StateName,
              Value = m.CountryId.ToString(),
          });
          return Json(stateData, JsonRequestBehavior.AllowGet);
      }
  
  }
  </code></pre>
  
  <p>Model Class :</p>
  
  <pre><code>public partial class ProjectContext : DbContext
      {
          public ProjectContext()
              : base("CACD")
          {
          }
  
          public DbSet&lt;Country&gt; Countrys { get; set; }
          public DbSet&lt;State&gt; States { get; set; }
          public DbSet&lt;City&gt; Citys { get; set; }
  
          }
  
      public class Country
      {
          [Key]
          public int CountryId { get; set; }
          public string CountryName { get; set; }
  
          public virtual ICollection&lt;State&gt; States { get; set; }
      }
  
  
      public class State
      {
          [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&lt;City&gt; Citys { get; set; }
      }
  
      public class City
      {
          [Key]
          public int CityId { get; set; }
          public string CityName { get; set; }
          [ForeignKey("State")]
          public int StateId { get; set; }
  
          public virtual State State { get; set; }
      }
  </code></pre>
  
  <p>View File(cshtml)</p>
  
  <pre><code>@model Project_Name.Models.ProjectContext
  
  @using (Html.BeginForm())
  {
  @Html.DropDownList("Country", ViewBag.CountryId as SelectList, "Select a Country", new { id="Country" })&lt;br /&gt;
      &lt;select id="State" name="state"&gt;&lt;/select&gt;&lt;br /&gt;
      &lt;select id="city" name="City"&gt;&lt;/select&gt;&lt;br /&gt;
  }
  
  @Scripts.Render("~/bundles/jquery")
  &lt;script type="text/jscript"&gt;
      $(function () {
          $('#Country').change(function () {
              $.getJSON('/Cascading/StateList/' + $('#Country').val(), function (data) {
                  var items = '&lt;option&gt;Select a State&lt;/option&gt;';
                  $.each(data, function (i, state) {
                      items += "&lt;option value='" + state.Value + "'&gt;" + state.Text + "&lt;/option&gt;";
                  });
                  $('#State').html(items);
              });
          });
  
          $('#State').change(function () {
              $.getJSON('/Cascading/Citylist/' + $('#State').val(), function (data) {
                  var items = '&lt;option&gt;Select a City&lt;/option&gt;';
                  $.each(data, function (i, city) {
                      items += "&lt;option value='" + city.Value + "'&gt;" + city.Text + "&lt;/option&gt;";
                  });
                  $('#city').html(items);
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>But drop down's not showing any of data in database , Really appreciate if you can show me the correct path </p>