Binding the AjaxRadioList and AjaxDropdown using ParentId (Cascade) Tutorial

In order to proceed please first download the Finished solution from the Previous Tutorial, or use yours if you've done it.

1. First we are going to need some sample data for this, so replace the Fruit class (Aja.svc.cs) with these:

public class Fruit
{
    public int Id { get; set; }
    public string Name { get; set; }
    public Category Category { get; set; }
}

public class Category
{
    public int Id { get; set; }
    public string Name { get; set; }
}

and replace Fruits field from Aja class with these:

public static readonly IList<Category> Categories = new List<Category>
{
    new Category{Id=1, Name = "Fruits"},
    new Category{Id=2, Name = "Legumes"},
    new Category{Id=3, Name = "Vegetables"},
    new Category{Id=4, Name = "Nuts"},
    new Category{Id=5, Name = "Grains"},
};

static readonly IList<Fruit> Fruits = new List<Fruit>
    {
        new Fruit{Id=1, Name = "Mango", Category = Categories[0]},
        new Fruit{Id=2, Name = "Apple", Category = Categories[0]},
        new Fruit{Id=3, Name = "Papaya", Category = Categories[0]},
        new Fruit{Id=4, Name = "Banana", Category = Categories[0]},
        new Fruit{Id=5, Name = "Cherry", Category = Categories[0]},

        new Fruit{Id=10, Name = "Tomato", Category = Categories[1]},
        new Fruit{Id=11, Name = "Potato", Category = Categories[1]},
        new Fruit{Id=12, Name = "Cucumber", Category = Categories[1]},
        new Fruit{Id=13, Name = "Onion", Category = Categories[1]},
        new Fruit{Id=14, Name = "Carrot", Category = Categories[1]},
                                                     
        new Fruit{Id=20, Name = "Celery", Category = Categories[2]},
        new Fruit{Id=21, Name = "Broccoli", Category = Categories[2]},
        new Fruit{Id=22, Name = "Artichoke", Category = Categories[2]},
        new Fruit{Id=23, Name = "Cauliflower", Category = Categories[2]},
        new Fruit{Id=24, Name = "Lettuce", Category = Categories[2]},
                                                     
        new Fruit{Id=30, Name = "Hazelnuts", Category = Categories[3]},
        new Fruit{Id=31, Name = "Chestnuts", Category = Categories[3]},
        new Fruit{Id=32, Name = "Walnut", Category = Categories[3]},
        new Fruit{Id=33, Name = "Almonds", Category = Categories[3]},
        new Fruit{Id=34, Name = "Mongongo", Category = Categories[3]},
                                                     
        new Fruit{Id=40, Name = "Rice", Category = Categories[4]},
        new Fruit{Id=41, Name = "Wheat", Category = Categories[4]},
        new Fruit{Id=42, Name = "Oats", Category = Categories[4]},
        new Fruit{Id=43, Name = "Fonio", Category = Categories[4]},
        new Fruit{Id=44, Name = "Barley", Category = Categories[4]},
    };
												 

2. Add this method to Aja class:

    [WebGet]
    [OperationContract]
    public IEnumerable<SelectListItem> CategoriesDropdown(string v)
    {
        return Categories.Select(o => new SelectListItem(o.Id, o.Name, v == o.Id.ToString()));
    }

and modify the FruitsDropdown method to look like this:

    [WebGet]
    [OperationContract]
    public IEnumerable<SelectListItem> FruitsDropdown(string v, string parent)
    {
        return Fruits.Where(o => o.Category.Id.ToString() == parent)
            .Select(o => new SelectListItem
                {
                    Text = o.Name,
                    Value = o.Id,
                    Selected = v == o.Id.ToString()
                });
    }	

3. In default.aspx change the Url of the AjaxDropdown, and give the ID="Categories" so it will become like this:

	<o:AjaxDropdown runat="server" ID="Categories" Url="~/Aja.svc/CategoriesDropdown" />

4. Set an ID to the AjaxRadioList and set it's ParentId to the AjaxDropdowns ClientID:

	<%
		Fruits.ParentId = Categories.ClientID;
	%>        
	<o:AjaxRadioList ID="Fruits" runat="server" Url="~/Aja.svc/FruitsDropdown" />

5. Run it (Ctrl+F5) and you'll see a RadioList bound to a Dropdown

6. Add this:

<%
FruitsDd.ParentId = Categories.ClientID;
%>
<o:AjaxDropdown ID="FruitsDd" runat="server" Url="~/Aja.svc/FruitsDropdown" />

7. Run it and you'll see both the AjaxRadioList and the AjaxDropdown bound to the Categories AjaxDropdown.