Dependent DropDown in ASP.NET MVC?

Question

view

<script type="text/javascript">
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 += "<option value=\"" + item.sno + "\">" + item.seri_no + "</option>";
            });

            $("#sayaclar").html(items);
        }
    });
}

$(document).ready(function () {
    $("#musteriler").change(function () {
        var abbr = $("#musteriler").val();
        getCities(abbr);
    });
});
</script>
<div>
<table>
    <tbody>
        <tr>
            <td>@Html.DropDownListFor(x => x.musteri_id, new SelectList(Model.musteriler, "sno", "musteri_adi"), "-- Müşteri Seçiniz --", new { id = "musteriler" })
            </td>
            <td>@Html.DropDownListFor(x => x.sayac_id, new SelectList(Model.sayaclar, "sno", "seri_no"), "-- Sayaç Seçiniz --", new { id = "sayaclar" })
            </td>
            <td>
                <input type="submit" value="Kaydet" />
            </td>
        </tr>
    </tbody>
</table>
</div>

controller

[HttpPost]
public ActionResult SayaclariGetir(string abbreviation)
{
    int musteri_id = Int32.Parse(abbreviation);
    IEnumerable<TblSayaclar> _sayaclar = entity.TblSayaclar.Where(x => x.musteri_id == musteri_id);

    return new JsonResult
    {
        Data = new
        {
            success = true,
            sayaclar = _sayaclar
        },
        JsonRequestBehavior = JsonRequestBehavior.AllowGet
     };
 }

model

public class TuketimRaporViewModel
{
    public IEnumerable<TblMusteriler> musteriler { get; set; }
    public IEnumerable<TblSayaclar> sayaclar { get; set; }

    public int musteri_id { get; set; }
    public int sayac_id { get; set; }
}

When first dropdown changed I get the alert "Error!".I cant find, Why I get alert message?

EDIT

When I write this sayaclar = new SelectList(_sayaclar,"sno","seri_no") instead of sayaclar = _sayaclar not error ocurred but,this time, second dropdownlist values are "undefined".

Thanks.

Use this [link](http://stackoverflow.com/questions/4458970/cascading-drop-downs-in-mvc-3-razor-view) — Pravin Pawar, Jul 23 '12 at 10:25
See my Cascading DropDownList blog http://blogs.msdn.com/b/rickandy/archive/2012/01/09/cascasding-dropdownlist-in-asp-net-mvc.aspx — RickAndMSFT, Jul 28 '12 at 01:53

score 2 · Accepted Answer · answered Jul 23 '12 at 10:34

I wrote this and it works:

[HttpPost]
public ActionResult SayaclariGetir(string abbreviation)
{
   int musteri_id = Int32.Parse(abbreviation);
   var _sayaclar = entity.TblSayaclar.Where(x => x.musteri_id == musteri_id).Select(x => new { sno = x.sno, seri_no = x.seri_no });

   return Json(_sayaclar, JsonRequestBehavior.AllowGet);
}

score 2 · Answer 2 · answered Jul 27 '12 at 21:50

2

you could use the AjaxDropdown from here: http://awesome.codeplex.com

it has a demo here: http://demo.aspnetawesome.com/AjaxDropdownDemo

answered Jul 27 '12 at 21:50

Rajesh

53
4

Dependent DropDown in ASP.NET MVC?

2 Answers2