How to create Cascading Dropdowns in ASP.net Web-forms

Title:

BI{code} ?

I have 2 entities Category and Product public class Category { public int Id { get; set; } public string Name { get; set; } } public class Product { public int Id { get; set; } public string Name { get; set; } public int CategoryId { get; set; } } and repository methods: IEnumerable<Category> GetCategories(); // returns all cateogories IEnumerable<Product> GetProductsByCategoryId(int CategoryId) // returns products by categoryId how to create 2 cascading dropdowns Category and Product using the AjaxDropdown ? _when the user selects a category the product dropdown should change it's list of items_

Save Changes Cancel

Stig

asked at 18 Nov 2011

Answers

• BI{code} ?

  You need to use 2 AjaxDropdowns bound by ParentId This is the markup: <o:AjaxDropdown runat="server" ID="Categories" Url="~/svc/aja.svc/CategoriesDropdown"></o:AjaxDropdown> <% Products.ParentId = Categories.ClientID; %> <o:AjaxDropdown runat="server" ID="Products" Url="~/svc/aja.svc/ProductsDropdown"></o:AjaxDropdown> And the service methods (Ajax enabled WCF): [WebGet] [OperationContract] public IEnumerable<SelectListItem> CategoriesDropdown(string v) { return repo.GetCategories().Select(o => new SelectListItem(o.Id, o.Name, v == o.Id.ToString())); } [WebGet] [OperationContract] public IEnumerable<SelectListItem> ProductsDropdown(string v, string parent) { var categoryId = Convert.ToInt32(parent); return repo.GetProductsByCategoryId(categoryId) .Select(o => new SelectListItem(o.Id, o.Name, v == o.Id.ToString())); }

  Save Changes Cancel

  

  Omu

  answered at 18 Nov 2011

please Sign In to leave an answer