Angular Web API $http post exclude list - angularjs

Question

I have a Web API (2) project which has departments and employees. An employee has a department, and a department has a list of employees.
Now in the frontend, when creating or editing an employee, the user must select a department. When posting this to the API, the department contains the list of employees (which causes an invalid modelstate), how can I prevent this?
This is my relevant setup:
Models:
public class Employee : IEntity, ICreatedOn, IModifiedOn, IMappable
{
[Key]
public virtual int Id { get; set; }
public virtual Department Department { get; set; }
// .. other properties
}
public class Department : IEntity, IMappable
{
[Key]
public virtual int Id { get; set; }
public virtual ICollection<Employee> Employees { get; set; }
// .. other properties
}
Web API controller:
public class EmployeesController : ApiController
{
private readonly IEmployeeService _employeeService;
public EmployeesController(IEmployeeService employeeService)
{
this._employeeService = employeeService;
}
// .. GET, POST, DELETE etc.
// PUT: api/Employees/5
[ResponseType(typeof(void))]
public IHttpActionResult PutEmployee(int id, EmployeeVM employee)
{
// This is always invalid, because the employee has a department, which in turn has a list of employees which can be invalid
// What to do to exclude the list of employees from validation, or even better prevent from being sent to the API
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
// Update etc..
return StatusCode(HttpStatusCode.NoContent);
}
Angular (DataService.js):
app.factory('DataService',
["$http",
function ($http) {
return {
// other functions
updateEmployee: _updateEmployee
}
function _updateEmployee(employee) {
// Maybe exclude the list of employees in employee.department in here??
return $http.put(employeesUrl + "/" + employee.id, employee);
}
// .. other functions
}]);
Notes:
It happens in both the Put and the Post (updating and creating)
I'm using AutoMapper for mapping to the ViewModels, which look the same as the entities
I'm using Entity Framework for the ORM
What I've tried:
[JsonIgnore] attribute on the Employees collection; this causes the Employees also not being loaded when loading the Department
[Bind(Exclude = "Employees")] attribute in the controller action parameters, this did not have any effect
[Bind(Exclude = "Department.Employees")] same
What works, but I'm sure there must be a better solution:
function _updateEmployee(employee) {
var newEmp = angular.copy(employee);
delete newEmp.department.employees;
return $http.put(employeesUrl, newEmp);
}

Answer 1

Create a new request for updating your employee. Like:
public class UpdateEmployeeRequest{
public int EmployeeId {get;set;}
public int DepartmentId {get;set;}
//and so on
}
For this request you can specify concrete validation.
And declare Entities with explicit ID.:
public class Employee : IEntity, ICreatedOn, IModifiedOn, IMappable
{
[Key]
public int Id { get; set; }
[ForeignKey( "Department" )]
public Guid DepartmentId { get; set; }
[Required]
public virtual Department Department { get; set; }
// .. other properties
}

Answer 2

I would modify the Employee entity like this
public class Employee : IEntity, ICreatedOn, IModifiedOn, IMappable
{
[Key]
public virtual int Id { get; set; }
//Add DepartmentId
public Guid? DepartmentId { get; set; }
public virtual Department Department { get; set; }
// .. other properties
}
Then you can only set DepartmentId and that's it. EF will take care of the rest