How to get data to DropDownList based on other dropdown? - asp.net-mvc

Question

I have a table (dept) on database and fields are:
1 - id
2 - Division
3 - Designation
I am retrieving division data on dropdown, this is my code:
public JsonResult GetDivision()
{
var division = db.Depts.GroupBy(x => x.Division)
.Select(x => x.FirstOrDefault()).OrderBy(x => x).ToList();
return Json(division);
}
Now I want to get the designation data on 2nd dropdown based on division name
public JsonResult GetDesignation(int StateId)
{
var department = db.Depts.Where(x => x.DeptId == StateId)
.OrderBy(x => x.Designation);
return Json(department);
}
Ajax code:
$(document).ready(function () {
$('#division').change(function () {
$('#designation').empty();
$.ajax({
type: "POST",
url: "/Official/GetDesignation",
datatype: "Json",
data: { StateId: $('#division').val() },
success: function (data) {
$('#designation').append('<option value>--Select--</option>');
$.each(data, function (index, value) {
$('#designation').append('<option value="' + value.deptId + '">' + value.designation + '</option>');
console.log(value);
});
}
});
});
html:
#Html.DropDownList("division", new SelectList(string.Empty, "Value", "Text"), "--Select--", null)
#Html.DropDownList("designation", new SelectList(string.Empty, "Value", "Text"), "--Select--", null)
When I select divison from dropdown, I get only one designation, which is getting from id, but I want to get all designation based on division name for exmaple I have this type of data
id division designation
1 CORPORATE AFFAIRS Manager Corporate Affairs
2 CORPORATE AFFAIRS Manager BPR & PMO
3 CORPORATE AFFAIRS Jr. Executive Corporate Governance
in 1st dropdown I am getting one "corporate affairs", but when I select "corporate affairs" I need to get all designation in 2nd dropdown

Answer 1

Ok, I think you need to understand the following...
This line here:
var department = db.Depts.Where(x => x.DeptId == StateId)
.OrderBy(x => x.Designation);
Is making a SQL query at the end, which will traduce into something like:
SELECT * FROM Depts WHERE DeptId = Something ORDER BY Designation
I assume that DeptId is a PRIMARY KEY, which is a unique value on the table, when you process the query above it will bring only one or zero results depending on if there is a match.
I think you should correct the value that you are passing from the ajax POST, you could use:
data: { StateId: $('#division').text() }
instead of:
data: { StateId: $('#division').val() }
This way you are passing the Division name as string and modify your function as follows:
public JsonResult GetDesignation(string Division)
{
var department = db.Depts.Where(x => x.Division == Division)
.OrderBy(x => x.Designation);
return Json(department);
}