Cascading Dropdown MVC3 returning empty dropdown fields

Question

I am attempting to create a cascading dropdown with MVC3. The parent dropdown is called "Category", when the user selects a Category, a child dropdown is then populated with a list of pictures that belong to that Category. I've got some code in place right now, and I am able to call the controller from the View when the user selects a category. Here is my code:

Controller:

    public ActionResult Pictures(int catId)
    {
        var k = ((List<Picture>) ViewBag.AllPictures)
            .FindAll(x => x.CategoryId == catId)
            .Select(x => new
                {
                    Value = x.PictureId,
                    Text = x.Title
                });

        return Json(k, JsonRequestBehavior.AllowGet);
    }

View:

        <div class="editor-field">
            @Html.DropDownListFor(model => model.Picture.PictureId, Enumerable.Empty<SelectListItem>(),  new { @id = "pictureFilter" })
            @Html.ValidationMessageFor(model => model.Picture.PictureId)
        </div>

Javascript:

<script type="text/javascript">
    $('#ddlFilter').on("change", function() {
        var selectedCat = $(this).val();
        $.getJSON("/StoreManager/Pictures", { catId: selectedCat }, function(pictures) {
            var picturesSelect = $('#pictureFilter');
            picturesSelect.empty();
            $.each(pictures, function(index, picture) {
                picturesSelect.append($('<option/>', {
                    value: picture.val,
                    text: picture.text
                }));
            });
        });  
    });
</script>

When I take a look at variable 'k', that my controller is returning. It does contain all the correct collection items for the pictures, with their respective 'value' and 'text' fields assigned. When it returns the JSON back to the View, it creates a dropdown menu with the exact number of fields that should be there, but they all contain empty data. When I inspect the element in Chrome, here is the HTML afterwards:

<option><option/>
<option><option/>
<option><option/>
<option><option/>

All help is appreciated. Any further code requested will be linked to in pastebin posts.

Answer 1

You have return JSON then you need to used same variables as you send from Pictures controller. try this:

<script type="text/javascript">
    $('#ddlFilter').on("change", function() {
        var selectedCat = $(this).val();
        $.getJSON("/StoreManager/Pictures", { catId: selectedCat }, function(pictures) {
            var picturesSelect = $('#pictureFilter');
            picturesSelect.empty();
            $.each(pictures, function(index, picture) {
                picturesSelect.append($('<option/>', {
                    value: picture.Value,
                    text: picture.Text
                }));
            });
        });  
    });
</script>

or you can also check the response variable get from your Action method by using firebug console tab.