Implementation of MVC3 Cascading Dropdown using jQuery

Introduction

Requirement: In pageload, I need to fill Project Dropdown List. On change of the Project Dropdown, ProjectModule dropdown needs to fill without hitting the database every time.

Table Structure

ProjectMaster(DB Model)

   [Table(Name = "ProjectMaster")]

    public class ProjectMaster
    {
        [Column(Name="ID", IsDbGenerated=true, IsPrimaryKey=true )]
        public int ID { get; set; }

        [Column(Name = "Project")]
        public string Project { get; set; }

        [Column(Name = "Description")]
        public string Description { get; set; }

        [Column(Name = "Active")]
        public bool Active { get; set; }

    }

ProjectModule (DB Model)

 public class ProjectModule
    {
        [Column (Name="ID", IsDbGenerated=true, IsPrimaryKey=true)]
        public int ID { get; set; }

        [Column(Name = "ProjectMaster_Id")]
        public int ProjectMaster_Id { get; set; }

        [Column(Name = "Description")]
        public string Description { get; set; }

        [Column(Name = "Active")]
        public bool Active { get; set; }
  
    }

ProjectModuleDTO (Model)

public class ModProjDTO
    {
        public int ModId { get; set; }
        public string ModName { get; set; }
        public int ProjId { get; set; }
        public bool IsActive { get; set; }
        public string ProjName { get; set; }
    }

Step 1: Fill Project dropdown list

In Controller:

 [HttpGet]       

 public ActionResult Index()
  {
      ViewData["ProjectList"] = IdbAct.getProjectList(ref errorMsg);            
      return View();    
        }

Note: ‘IdbAct.getProjectList’ returns ProjectList In View (.cshtml)

@{ 
    ViewBag.Title = "Index";
    IEnumerable<ProjectMaster> objProjList = (IEnumerable<ProjectMaster>)ViewData["ProjectList"];
    SelectList projList = new SelectList(objProjList, "ID", "Project");
 }

<td width ="25%"> @Html.Label("Project") </td>      

     <td width ="25%"> @Html.DropDownListFor(Model => 
     Model.ProjectMaster_Id, projList, "-Select One-", 
     new { id = "ddlProject" }) </td> 

This fills our ProjectDropdown list. So far so good!!!!Step 2: Fill ProjectModule dropdown list Our next step is to load project module for a selected project: Here we need projectmodule with projectId. Our Dataset structure would be as below:

public class ModProjDTO
    {
        public int ModId { get; set; }
        public string ModName { get; set; }
        public int ProjId { get; set; }
        public bool IsActive { get; set; }
        public string ProjName { get; set; }
    }

So, who do we load ModProjDTO from database, we have many option.
My approach is here - as below.

In Controller:

 [HttpPost]
 public ActionResult getModue()
 {           
    return Json(IdbAct.getModuleList(ref errorMsg),JsonRequestBehavior.AllowGet);
 }

Let’s have a look at the ‘IdbAct.getModuleList’ method:

 
 return (from projMod in objDbCon.GetTable<ProjectModule>()

         join prj in objDbCon.GetTable<ProjectMaster>()
         on projMod.ProjectMaster_Id equals prj.ID
         select new ModProjDTO
                {
                  ModId =  projMod.ID,
                  ModName = projMod.Description,
                  ProjId = projMod.ProjectMaster_Id,
                  IsActive = projMod.Active,
                   ProjName = prj.Project 
                }); 

This returns IEnumerable<ModProjDTO>Adding project module dropdown list in view:

@{ 

    SelectList projModuleList = new SelectList("ProjectModule_Id", "");
 } 

<td width ="25%"> @Html.Label("Project Module") </td>    

<td> @Html.DropDownListFor(Model => Model.ProjectModule_Id, projModuleList, 
"-Select One-", new { id = "ddlModule" }) </td>   

Now we need to access: getModule() i.e.

public ActionResult getModule()

Here I’m making an Ajax Call to fetch all projectModule details.

  function getModuel(id) {

            $("#ddlModule").html("");  

                if (id == null) {                   
                    $.ajax({
                        url: "IT/getModue",
                        dataType: "json",
                        type: "POST",
                        error: function () {
                            alert(" An error occurred.");
                        },
                        success: function (data) {
                            $.each(data, function (i) {                                 
                                ArrProjMod.push(data[i]);
                            });                            
                        }
                    });                    
                }
                else {             
                    $.each(ArrProjMod, function (i, obj) {
                        if (id == obj.ProjId) {
                            var optionhtml = '<option value="' + 
                            obj.ModId + '">' + obj.ModName + '</option>';
                            $("#ddlModule").append(optionhtml);
                        }                        
                    });                              
                }
          }

 var ArrProjMod = [];
 $(document).ready(function () {                
 getModuel(null)         
  });

Fill projectModule dropdown when project dropdown changes:

 $('#ddlProject').change(function () {
            var projId = $("#ddlProject").val();               
            getModuel(projId);
        });