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

 

  1.     $(function () { //1  
  2.     $('#MajorCategoryDivID').hide();  
  3.     $('#MajorSubCategoryDivID').hide();  
  4.     $('#SubmitID').hide();  
  5.     $('#MainCategoryID').change(function (request, response) {//2  
  6.         //Form1  -id of form  
  7.         var URL = $('#Form1').data('majorCategoryAction');  
  8.           $.getJSON('/Json/MajorCategory/' + $('#MainCategoryID').val(), function (data)  
  9.         {//3  
  10.             var items = '<option>Select a Major Category</option>';  
  11.             $.each(data, function (i, majorCategoryList) {//4  
  12.                 items += "<option value='" + majorCategoryList.Value + "'>" + majorCategoryList.Text + "</option>";  
  13.              });  //4 close  
  14.             $('#major_CategoryID').html(items);  
  15.             $('#MajorCategoryDivID').show();  
  16.         }); //3closed  
  17.     }); //2closed  
  18.     //another dropdown box issue  
  19.     $('#major_CategoryID').change(function (request, response) {//2  
  20.         //Form1  -id of form  
  21.         var URL = $('#Form1').data('majorSubCategoryAction');  
  22.         $.getJSON('/Json/SubCategory/' + $('#major_CategoryID').val(), function (data) {//3  
  23.             var items = '<option>Select a  Sub Category</option>';  
  24.             $.each(data, function (i, subCategoryList) {//4  
  25.                 items += "<option value='" + subCategoryList.Value + "'>" + subCategoryList.Text + "</option>";  
  26.             });  //4 close  
  27.             $('#major_SubCategoryID').html(items);  
  28.             $('#MajorSubCategoryDivID').show();  
  29.         }); //3closed  
  30.     }); //2closed  
  31.     //  
  32.     $('select#major_CategoryID').change(function () { $('#SubmitID').show(); });  
  33. }); //1

JSON

  1. public class JsonController : Controller  
  2. {  
  3.     //  
  4.    // GET: /Json/  
  5.     private SubMainCategoryRepository subCategoryRepository;  
  6.     private MajorCategoryRepository majorCategoryRepository;  
  7.     public JsonResult MajorCategory(int ID)  
  8.     {  
  9.         majorCategoryRepository = new MajorCategoryRepository(new MainContext());  
  10.         //var majorCategoryList = from m in majorCategoryRepository.GetCategory()  
  11.         //  where m.Main_CategoryID == int.Parse(ID)  
  12.        //   select m;  
  13.        var majorCategoryList = from m in majorCategoryRepository.GetMajorCategory(ID)  
  14.                                select m;  
  15.         return Json(new SelectList(majorCategoryList.ToArray(), "major_CategoryID""major_categoryName")  
  16.                 , JsonRequestBehavior.AllowGet);   
  17.     }  
  18.     public JsonResult SubCategory(int ID)  
  19.     {  
  20.         subCategoryRepository = new SubMainCategoryRepository(new MainContext());  
  21.         var subCategoryList = from m in subCategoryRepository.GetCategory()  
  22.                               where m.major_CategoryID == ID  
  23.                               select m;  
  24.     return Json(new SelectList(subCategoryList.ToArray(), "major_SubCategoryID""major_SubCategoryName")  
  25.             , JsonRequestBehavior.AllowGet);  
  26. }   

Home Controller

 

  1. private MainCategoryRepository mainCategoryRepository ;           
  2. public HomeController()  
  3. {  
  4.      //this.iMainCategoryRepository = new MainCategoryRepository(new MainContext());  
  5.     //  mainCategoryRepository = new MainCategoryRepository(new MainContext());  
  6.      mainCategoryRepository = new MainCategoryRepository();  
  7. }  
  8. public ActionResult Index()  
  9. {  
  10.     CategoryFormViewModel mymodel = new CategoryFormViewModel();  
  11.     var minCategoryList = from m in mainCategoryRepository.GetCategory()  
  12.                           select m;  
  13.     mymodel.CateogryList = new SelectList(minCategoryList, "main_CategoryID""Main_categoryName");  
  14.     return View(mymodel);  
  15. }