How to get my dropdown to populate correctly

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