MVC3 cascade dropdown and Json object

Question

I've implemented my cascading dropdown list with MVC3 almost exactly as explained in

Easiest way to create a cascade dropdown in ASP.NET MVC 3 with C#

My view had that

<script type="text/javascript">
    $(function () {
        $('#CategoryID').change(function () {
            var selectedCategoryId = $(this).val();
            $.getJSON('@Url.Action("SelectCategory")', { categoryid: selectedCategoryId }, function (subcategories) {
                var subsSelect = $('#SubCategoryID');
                subsSelect.empty();
                $.each(subcategories, function (index, subcat) {
                    subsSelect.append(
                        $('<option/>')
                            .attr('value', subcat.SubCategoryID)
                            .text(subcat.SubCategoryName)
                    );
                });
            });
        });
    });
</script>

My controller had that

public ActionResult SelectCategory(int categoryid)
{
    var subs = db.SubCategories.Where(s => s.CategoryID == categoryid).ToList();
    return Json(subs, JsonRequestBehavior.AllowGet);
}

And that did not work.

However, it worked when I modified the controller the following way:

public class JsonSubCat
{
    public int SubCategoryID { get; set; }
    public string SubCategoryName { get; set; }
}

public ActionResult SelectCategory(int categoryid)
{
    var subs = db.SubCategories.Where(s => s.CategoryID == categoryid).ToList();
    var testsubs = new List<JsonSubCat>();

    foreach (var sub in subs)
    {
        testsubs.Add(new JsonSubCat() { SubCategoryID = sub.SubCategoryID, SubCategoryName = sub.SubCategoryName });
    }

    return Json(testsubs, JsonRequestBehavior.AllowGet);
}

Looks like a question of converting my entities that I obtain from data source to proper format. What would be the correct way to implement this?

you should be able to use firebug or similar to see the AJAX response from your first SelectCategory action. And see how it is returning the JSON object and make sure you JS matches its format — Daveo, Jul 09 '12 at 01:55

score 3 · Accepted Answer · answered Jul 09 '12 at 06:25

What would be the correct way to implement this?

I suspect that you have circular references in your domain entities. This is not supported by the JSON serializer, because the JSON format doesn't support circular structures.

You should not pass your domain models to views. Please stop doing this and use view models. Why are you passing your entire subs entity to the view when all that this view cares about is a collection of text and value? That's all a dropdown list needs.

So use view models, not to mention that you already wrote one => the JsonSubCat class which is great:

public ActionResult SelectCategory(int categoryid)
{
    var subs = db.SubCategories
        .Where(s => s.CategoryID == categoryid)
        .ToList()
        .Select(x => new JsonSubCat
        {
            SubCategoryID = x.SubCategoryID,
            SubCategoryName = x.SubCategoryName
        });
    return Json(subs, JsonRequestBehavior.AllowGet);
}

MVC3 cascade dropdown and Json object

1 Answers1