How to filter the options of a drop down list using another drop down list

Question

I am very new to ASP.NET and I am using the MVC 3 framework of ASP.Net. I was trying to filter the options of a dropdown list using another drop down and I can\'t manage to

Answer 1

Loading all the Sub Items to the page when the page loads initially, does not seems to be a good idea to me. What if you have 100 Categories and Each categories has 200 sub category items ? Do you really want to load 20000 items ?

I think you should do an incremental way of loading. Provide the Main Category dropdown with the values, Let the user selects one item from that. Make a call to the Server and get the Sub categories belongs to the selected category and load that data to the second dropdown. You can use jQuery ajax to do it so that user will not feel a complete page reload when he select one drop down. This is how i will do it.

Create the ViewModel which has both category properties

public class ProductViewModel
{
    public int ProductId { set;get;}
    public IEnumerable MainCategory { get; set; }
    public string SelectedMainCatId { get; set; }
    public IEnumerable SubCategory { get; set; }
    public string SelectedSubCatId { get; set; }
}

Let your GET Action method returns this strongly typed view with the content for MainCategory filled

public ActionResult Edit()
{
   var objProduct = new ProductViewModel();             
   objProduct.MainCategory = new[]
   {
      new SelectListItem { Value = "1", Text = "Perfume" },
      new SelectListItem { Value = "2", Text = "Shoe" },
      new SelectListItem { Value = "3", Text = "Shirt" }
   };
   objProduct.SubCategory = new[] { new SelectListItem { Value = "", Text = "" } };
   return View(objProduct);
}

and in your strongly typed View,

@model MvcApplication1.Models.ProductViewModel

@using (Html.BeginForm())
{    
    @Html.DropDownListFor(x => x.SelectedMainCatId, new SelectList(Model.MainCategory,"Value","Text"), "Select Main..")
    @Html.DropDownListFor(x => x.SelectedSubCatId, new SelectList(Model.SubCategory, "Value", "Text"), "Select Sub..")    
    Save
}

Add GetSub action method to your controller to return the sub categories for the selected category. We are returning the response as Json

 public ActionResult GetSub(int id)
 {
    List items = new List();
    items.Add(new SelectListItem() { Text = "Sub Item 1", Value = "1" });
    items.Add(new SelectListItem() { Text = "Sub Item 2", Value = "8"});
    // you may replace the above code with data reading from database based on the id

    return Json(items, JsonRequestBehavior.AllowGet);
 }

Now the selected values will be available in your HTTPOST Action method

    [HttpPost]
    public ActionResult Edit(ProductViewModel model)
    {
        // You have the selected values here in the model.
        //model.SelectedMainCatId has value!
    }