title: Dependent DropDown in ASP.NET MVC?
body: <p>view</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function getCities(abbr) {
      $.ajax({
          url: '@Url.Action("SayaclariGetir", "Enerji")',
          data: { abbreviation: abbr },
          dataType: "json",
          type: "POST",
          error: function () {
              alert("Error!");
          },
          success: function (data) {
              var items = "";
              $.each(data, function (i, item) {
                  items += "&lt;option value=\"" + item.sno + "\"&gt;" + item.seri_no + "&lt;/option&gt;";
              });
  
              $("#sayaclar").html(items);
          }
      });
  }
  
  $(document).ready(function () {
      $("#musteriler").change(function () {
          var abbr = $("#musteriler").val();
          getCities(abbr);
      });
  });
  &lt;/script&gt;
  &lt;div&gt;
  &lt;table&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;@Html.DropDownListFor(x =&gt; x.musteri_id, new SelectList(Model.musteriler, "sno", "musteri_adi"), "-- Müşteri Seçiniz --", new { id = "musteriler" })
              &lt;/td&gt;
              &lt;td&gt;@Html.DropDownListFor(x =&gt; x.sayac_id, new SelectList(Model.sayaclar, "sno", "seri_no"), "-- Sayaç Seçiniz --", new { id = "sayaclar" })
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input type="submit" value="Kaydet" /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>controller</p>
  
  <pre><code>[HttpPost]
  public ActionResult SayaclariGetir(string abbreviation)
  {
      int musteri_id = Int32.Parse(abbreviation);
      IEnumerable&lt;TblSayaclar&gt; _sayaclar = entity.TblSayaclar.Where(x =&gt; x.musteri_id == musteri_id);
  
      return new JsonResult
      {
          Data = new
          {
              success = true,
              sayaclar = _sayaclar
          },
          JsonRequestBehavior = JsonRequestBehavior.AllowGet
       };
   }
  </code></pre>
  
  <p>model </p>
  
  <pre><code>public class TuketimRaporViewModel
  {
      public IEnumerable&lt;TblMusteriler&gt; musteriler { get; set; }
      public IEnumerable&lt;TblSayaclar&gt; sayaclar { get; set; }
  
      public int musteri_id { get; set; }
      public int sayac_id { get; set; }
  }
  </code></pre>
  
  <p>When first dropdown changed I get the alert "Error!".I cant find, Why I get alert message?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>When I write this <code>sayaclar = new SelectList(_sayaclar,"sno","seri_no")</code> instead of <code>sayaclar = _sayaclar</code> not error ocurred but,this time, second dropdownlist values are "undefined".</p>
  
  <p>Thanks.</p>