ASP.NET MVC 3 and AJAX

Question

This is the first time i write in this board. I'm an Italian student, excuse me for my bad English. For a lot of time i have developed my web application with ASP.NET Web Forms; now would like to migrate to ASP.NET MVC framework. So I would like to ask about two question:

1. SCENARIO 1: I have two DropDownList ( elements) in a form in a view. First DropDownList contains a list of category: i would like that when change item in the first DropDownList the second is loading of a list of subcategorys automatically. In Web Forms i often used UpdatePanel for this job. But now in MVC i can't use it. I have tryed to use jQuery AJAX but code don't works. How can i implement this job? An example please?

2. SCENARIO 2: I have a step-by-step wizard forms. So, i need to pass (memorize) data step by step. Where can i memorize this data? In session? An advice?

Thanks very much, Francesco.

Answer 1

1) You can use jQuery ajax to get the items for your second dropdown when user selects the first one.

Assuming your Category class looks like this

public class Category
{
  public ID { set;get;}
  public string Name { set;get;}
}

and dropdowns in the view are like this

@Html.DropDownListFor(x => x.SelectedCategoryID, 
                  new SelectList(Model.Categories, "ID", "Name"), "Select")

@Html.DropDownListFor(x => x.SelectedSubCategoryID, 
                  new SelectList(Model.SubCategories, "ID", "Name"), "Select")

Now have some javascript to listen to the change event of first dropdown and get the value, make an ajax call to the action method which accepts the category id and return a list of sub categories in JSON format.

<script type="text/javascript">
    $(function () {
        $("#SelectedCategoryID").change(function () {
            var self = $(this);
            var items="";
            $.getJSON("@Url.Action("Index", "GetSubCategories")?id="+self.val(),
                                                                  function(data){
                $.each(data,function(index,item){
                  items+="<option value='"+item.ID+"'>"+item.Name+"</option>";
                });
               $("#SelectedSubCategoryID").html(items);
            });
        });
    });
</script>

Now you should have a GetSubCategories action method which returns list of (Sub) Categories in JSON Format

public ActionResult GetSubCategories(int id)
{
  List<Category> subCategoryList=new List<Category>();
  //to do : fill the list of (sub) categories to the
  // above list for the category id passed to this method.
  return Json(subCategoryList,Json.RequestBehaviour.AllowGet); 
}

2) Session should be good.