$.getJSON (url) not moving to the controller - json

Question

I am developing my application in my MVC. I am using cascading dropdown list in my application. On selecting one i have 2 dropdown one is location and another one is employee. While selecting a location particular employee should be fetched in employee dropdown. I am using json result to retrieve the employee.
My code is
View Page
#Html.DropDownList("location", ViewBag.Location as SelectList, "Select the Location", new { id = "location" })
<div id=" employeediv" style="width:600px; height:50px">
<div style="float:left">
<label> Employee:</label>
</div>
<div style="margin-left:220px">
<select id="Employee" name="employee" style="width:150px"></select>
</div>
</div>
Script:
#section scripts{
<script type="text/javascript">
$('#location').change(function () {
#*var url = '#Url.Action("Employe", "Appt")';*#
//var url = "/Appt/Employee/"
debugger;
$.getJSON('/Appt/Employee/' + $('#location').val(), function (data) {
var item = '<option> Any </option>';
$.each(data, function (i, employee) {
item += "<option value ='" + employee.Value + "'>" + employee.Text +
"</option>";
});
$("#employee").html(items);
});
});
</script>
}
Controller Code
public ActionResult CalendarView(int? id, int? CustomerUserid)
{
tblBusinessCategory bc = new tblBusinessCategory();
ViewBag.Location = new SelectList(from s in db.tblBusinessLocations
where s.BusinessID == id
join loc in db.tblLocations
on s.LocID equals loc.LocationId
select loc.LocationName);
return View();
}
public JsonResult Employee(int id)
{
SYTEntities db = new SYTEntities();
var emp = from s in db.Employees
where s.LocationId == id
select s;
return Json(new SelectList(emp.ToArray(), "EmpId", "EmpName"), JsonRequestBehavior.AllowGet);
}
My problem is While changing the location url is not redirecting to the controller and it is came out from its scope
$.getJSON('/Appt/Employee/' + $('#location').val(), function
Can anyone help me to solve this?
Thanks.