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);
});