I am making an application , that allows the user to select a service from a list of services and an employee from a list of employees. When a user selects a service , the dropdownlist for the employees must automatically filter to show the employees that can perform that service or have that skill. For example if a customer selects a haircut , only employees whose skill is a haircut must filter into the dropdown list. I will show you my code , note : i do not want to create a relationship between service and employee.
The first dropdownlist is populating but not the second dropdownlist. Please view my code below
public class Service
{
[Key]
public string ServiceID { get; set;}
public string ServiceName { get; set;}
public string Description { get; set;}
public double Price { get; set;}
}
public class Employee
{
[Key]
public string EmpID { get; set;}
public string EmpName { get; set;}
public string Skills { get; set;}
}
public class Cascade
{
[Key]
public int cKey { get; set;}
public string ServiceRequried { get; set;}
public string EmployeeRequired { get; set;}
}
public ActionResult Index3()
{
List<Service> ServiceList = db.Services.ToList();
ViewBag.ServiceList = new SelectList(ServiceList, "ServiceID", "ServiceName");
return View();
}
public JsonResult GetEmpList2(string ServiceRequired)
{
db.Configuration.ProxyCreationEnabled = false;
List<Employee> EmpList = db.Employees.Where(x => x.Skills == ServiceRequired).ToList();
return Json(EmpList, JsonRequestBehavior.AllowGet);
}
@model SkillScheduling2.Models.Cascade
@{
ViewBag.Title = "Index3";
}
<h2>Index3</h2>
<br /><br />
<div class="form-group">
@if (ViewBag.ServiceList != null)
{
@Html.DropDownListFor(model => model.ServiceRequried, ViewBag.ServiceList as SelectList, "--Select Service--", new { @class = "form-control" })
}
</div>
<div class="form-group">
@Html.DropDownListFor(model => model.EmployeeRequired, new SelectList(" "), "--Select Employee--", new { @class = "form-control" })
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function () {
$("#ServiceRequired").change(function () {
$.get("/Home/GetEmpList2", { ServiceRequired: $("#ServiceRequired").val() }, function (data) {
$("#EmployeeRequired").empty();
$.each(data, function (index, row) {
$("#EmployeeRequired").append("<option value='" + row.EmpID + "'>" + row.EmpName + "</option>")
});
});
})
});
</script>