Does anyone see what i’m doing wrong here..my first dropdown works just fine but when i put a breakpoint on the second dropdown controller it does not get hit?
This is my controller for the first and second dropdowns. the first controller works great and i put a breakpoint in the GetTemplateByDeptId method never gets hit?
[HttpGet]
public ActionResult HomeView()
{
var departments = _uow.Repository<Dept>().GetAll().ToList();
ViewBag.Departments = departments;
return View();
}
[HttpGet]
public JsonResult GetTemplateByDeptId(int id)
{
return Json(_uow.Repository<Template>().Get(x => x.TemplateID == id));
}
This is my View
@model Fab4Passdown.Data.Dept
<div class="text-center">
<h2>Department Dropdown</h2>
<div class="row form-group p-4 border m-2">
<div class="col-2">
Department
</div>
<div class="col-4">
@Html.DropDownList("DeptID", new SelectList(ViewBag.Departments, "DeptID",
"Dept_Name"), "--Select--", new { @class = "form-control", @style = "height: 38px", @id =
"deptdropdown" })
</div>
<div class="col-4">
Template
</div>
<div class="col-4">
<select id="templatedropdown">
<option>--Select--</option>
</select>
</div>
</div>
</div>
This is my JS
<script>
$(document).ready(function () {
getTemplateByDepartmentID;
})
$("#deptdropdown").change(function () {
getTemplateByDepartmentID;
})
var getTemplateByDepartmentID = function() {
$.ajax({
url: "@Url.Action("GetTemplateByDeptId", "Home")",
type: "Get",
contentType: "application/json; charset=utf-8",
data: {
id: $('#deptdropdown').val(),
},
success: function (data) {
$(data).each(
function (index, item) {
$('#templatedropdown').append('<option value="' + item.DeptID + '">' +
item.Dept_Name + '</option>')
}
);
}
})
}