Cascading DropDownList Box in ASP.Net MVC4 Using Json, jQuery

In many situations you may need a list of related data to display on the user interface. It is not easy (like in traditional ASP.Net applications) to display a cascading dropdown box in an MVC application. The reason is that MVC is not using any web form controls and for that reason it is not an easy task to invoke the server side to generate data. 

jQuery

jQuery is unobtrusive JavaScript and it has great suuport of cross browser compatibility. It is also light in weight compared to other JavaScript frameworks.

JSON

JavaScript Object Notation (JSON) is a format for storing and exchanging text information and is smaller than XML, faster and easier to parse and is language independent. 

jQuery

 

    $(function () { //1
    $('#MajorCategoryDivID').hide();
    $('#MajorSubCategoryDivID').hide();
    $('#SubmitID').hide();
    $('#MainCategoryID').change(function (request, response) {//2
        //Form1  -id of form
        var URL = $('#Form1').data('majorCategoryAction');
          $.getJSON('/Json/MajorCategory/' + $('#MainCategoryID').val(), function (data)
        {//3
            var items = '<option>Select a Major Category</option>';
            $.each(data, function (i, majorCategoryList) {//4
                items += "<option value='" + majorCategoryList.Value + "'>" + majorCategoryList.Text + "</option>";
             });  //4 close
            $('#major_CategoryID').html(items);
            $('#MajorCategoryDivID').show();
        }); //3closed
    }); //2closed
    //another dropdown box issue
    $('#major_CategoryID').change(function (request, response) {//2
        //Form1  -id of form
        var URL = $('#Form1').data('majorSubCategoryAction');
        $.getJSON('/Json/SubCategory/' + $('#major_CategoryID').val(), function (data) {//3
            var items = '<option>Select a  Sub Category</option>';
            $.each(data, function (i, subCategoryList) {//4
                items += "<option value='" + subCategoryList.Value + "'>" + subCategoryList.Text + "</option>";
            });  //4 close
            $('#major_SubCategoryID').html(items);
            $('#MajorSubCategoryDivID').show();
        }); //3closed
    }); //2closed
    //
    $('select#major_CategoryID').change(function () { $('#SubmitID').show(); });
}); //1

JSON

public class JsonController : Controller
{
    //
   // GET: /Json/
    private SubMainCategoryRepository subCategoryRepository;
    private MajorCategoryRepository majorCategoryRepository;
    public JsonResult MajorCategory(int ID)
    {
        majorCategoryRepository = new MajorCategoryRepository(new MainContext());
        //var majorCategoryList = from m in majorCategoryRepository.GetCategory()
        //  where m.Main_CategoryID == int.Parse(ID)
       //   select m;
       var majorCategoryList = from m in majorCategoryRepository.GetMajorCategory(ID)
                               select m;
        return Json(new SelectList(majorCategoryList.ToArray(), "major_CategoryID", "major_categoryName")
                , JsonRequestBehavior.AllowGet);
    }
    public JsonResult SubCategory(int ID)
    {
        subCategoryRepository = new SubMainCategoryRepository(new MainContext());
        var subCategoryList = from m in subCategoryRepository.GetCategory()
                              where m.major_CategoryID == ID
                              select m;
    return Json(new SelectList(subCategoryList.ToArray(), "major_SubCategoryID", "major_SubCategoryName")
            , JsonRequestBehavior.AllowGet);
}

Home Controller

 

private MainCategoryRepository mainCategoryRepository ;
public HomeController()
{
     //this.iMainCategoryRepository = new MainCategoryRepository(new MainContext());
    //  mainCategoryRepository = new MainCategoryRepository(new MainContext());
     mainCategoryRepository = new MainCategoryRepository();
}
public ActionResult Index()
{
    CategoryFormViewModel mymodel = new CategoryFormViewModel();
    var minCategoryList = from m in mainCategoryRepository.GetCategory()
                          select m;
    mymodel.CateogryList = new SelectList(minCategoryList, "main_CategoryID", "Main_categoryName");
    return View(mymodel);
}