MonoRail - Select parent category from one dropdown, show child category dropdown

Question

Hey,

I'm new to MonoRail and am trying to figure out how to have it so that I can select a parent category in a dropdown then have it show a second dropdown with the categories that are children of the parent.

If I were using what I'm used to, ASP.NET MVC, I would have a javascript function that would be called onchange of the first dropdown and would make an ajax call to a controller method (passing in the selected parent category id) that would grab all child categories of that parent category and return them in JSON. Then in the callback javascript function I would eval the JSON and populate the second dropdown with the child categories.

How would I do this using MonoRail/jQuery? Here's the code I have so far:

$FormHelper.Select("business.category.id", $categories, "%{value='id', text='name', firstoption='Select a Category'}")

$FormHelper.Select("business.category.id", $childCategories, "%{value='id', text='name', firstoption='Select a Sub-Category'}")

Then in BusinessController.cs:

private void AddDataToModels()
        {
            PropertyBag["categories"] = CategoryRepository.GetParentCategories();
            PropertyBag["childCategories"] = CategoryRepository.GetChildCategories(1);
}

Thanks for any input on how to approach this!

Justin

Answer 1

See if this one helps:

http://ayende.com/Blog/archive/2007/10/08/Cascading-Drop-Downs-in-MonoRail.aspx

Answer 2

Here's the answer for others who are looking to call controller actions from jQuery and return JSON...

Controller Method:

[return: JSONReturnBinder(Properties = "Id,Name")]
        public BusinessType[] GetChildBusinessTypes(int parentId)
        {
            var businessTypes = BusinessTypeRepository.GetChildBusinessTypes(parentId);
            return businessTypes;
        }

Javascript:

$(document).ready(function () {
        $('#business_parentbusinesstype_id').change(function () {
            jQuery.ajax({
                url: "$UrlHelper.For("%{action='$business.site.id/GetChildBusinessTypes'}")",
                data: { parentId: $('#business_parentbusinesstype_id').val() },
                dataType: 'json',
                type: 'GET',
                success: fillChildBusinessTypes,
                error: ajaxError
            });
        });
    });

    function fillChildBusinessTypes(json) {
        //get business types.
        var businessTypes = eval(json);
        //bind business types to dropdown.
        $("#business_businesstype_id").get(0).options.length = 0;
        $("#business_businesstype_id").get(0).options[0] = new Option("Select a Business Type", "0");
        jQuery.each(businessTypes, function(index, item) {
            $('#business_businesstype_id').get(0).options[$("#business_businesstype_id").get(0).options.length] = new Option(item.Name, item.Id);
        });
        //show child dropdown.
        Show($('#spnChildBusinessTypes'));
    }