Deleting using Entity Framework and calling controller method in ajax - ajax

Question

I have been trying to create a delete button in mvc using json to call the delete method in my controller but so far its not working.
I did trap the error alert in the script and the success section is not registering a thing, I need help well here is my view, that picks data from SQL Server using Entity Framework 5.1.
I am working with a table called Departments and it has two columns, DepartmentId and DepartmentName.
<div class="container" style="width:40%; margin-top:2%;">
<hr />
<table class="table-responsive">
<tr>
<th>Deprtment Name</th>
<th></th>
</tr>
<tbody>
#if(ViewBag.RowDepartmentList != null)
{
foreach(var item in ViewBag.RowDepartmentList)
{
<tr id="row_#item.DepartmentId">
<td>#item.DepartmentId</td>
<td>#item.DepartmentName</td>
<td><a href="#" class="btn btn-danger" onclick="ConfirmDelete(#item.DepartmentId)">
<i class="glyphicon glyphicon-trash"></i></a></td>
</tr>
}
}
</tbody>
</table>
<input type="hidden" id="HiddenDepartmentId" />
</div>
I added a hidden attribute to capture the DepartmentId, the form too has a delete button that first calls a delete dialog modal.
My DELETE dialog modal code:
<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" style="width:350px;">
<div class="modal-content">
<div class=" modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">x</span>
</button>
<h3 class="modal-title">Delete record</h3>
</div>
<div class="modal-body">
<h4>Are you sure you want to delete this?</h4>
</div>
<div class="modal-footer">
Cancel
Delete
</div>
</div>
</div>
And this is what my controller looks like:
public class EmployeeController : Controller
{
// GET: Employee
public ActionResult DepartmentIndex()
{
MVCTutorialEntities2 db = new MVCTutorialEntities2();
List<EmployeeViewModel> emlist = db.Departments.Where(x => x.IsDeleted == 0).Select(x => new EmployeeViewModel {DepartmentId=x.Departmentid, DepartmentName = x.DepartmentName }).ToList();
ViewBag.RowDepartmentList = emlist;
return View();
}
// the delete function
[HttpPost]
public JsonResult DelDepartment(int depId)
{
MVCTutorialEntities2 db = new MVCTutorialEntities2();
bool result = false;
Department dep = db.Departments.SingleOrDefault(x => x.Departmentid == depId);
if (dep != null)
{
db.Departments.Remove(dep); // I don't know why this is not deleting .... the table is not cascaded
db.SaveChanges();
result = true;
}
return Json(result, JsonRequestBehavior.AllowGet);
}
}
// now my script is all here that calls the
<script>
var ConfirmDelete = function (DepartmentId) {
$("#HiddenDepartmentId").val(DepartmentId);
$("#mymodal").modal("show");
}
var DelDepartment = function ()
{
var depId = $("#HiddenDepartmentId").val();
$.ajax({
type: 'POST',
url: 'Employee/DelDepartment',
data: { DepartmentId: depId },
success: function (result) {$("#mymodal").modal("hide"); },
error: function (result) { alert(result); $("#mymodal").modal("hide"); } // only the error section resturns a message of [object] of [object]
});
}
</script>
Trying so hard to learn this language ... and if so, is there any way I can just use razor and call the delete function from the
#using (Html.BeginForm("", "",FormMethod.POST)) ?
function?

Answer 1

data: { DepartmentId: depId } needs to be
data: { depId: depId } because the left JS parameter name has to match up with the parameter name on the controller side.
Or you may need to do: data: JSON.stringify({ depId: depId })
If that doesn't work, you can do url: 'Employee/DelDepartment?depId=' + deptId and just get rid of the data property altogether.