How to pass a composite array from Javascript to W

Question

My JavascriptCode

//insert the employee and department record
    this.insertEmployeeDepartment = function (Employee) {       

        var request = $http({
            method: "post",
            url: "/Employee/InsertEmployeeDepartment",
            contentType: "application/json",
            data: JSON.stringify(Employee)
        });
        return request;
    }

EmployeesAPIController.cs

using System.Web.Http;

namespace EmployeeService
{
    [RoutePrefix("Employee")]
    public class EmployeesAPIController : ApiController
    {  
        [HttpPost]
        [Route("InsertEmployeeDepartment")]
        public EmployeeDepartment InsertEmployeeAndDepartment([FromBody]EmployeeDepartment emp)
        {
            var xx = emp;           
        }

    }
}

EmployeeDepartment.cs

using System.Collections.Generic;

namespace Test
{
    public class EmployeeDepartment
    {
        public IEnumerable<Employee> Employees { get; set; }
        public IEnumerable<Department> Departments { get; set; }    
    }
}

Models -

Employee.cs

public class Employee
    {
        public int EmployeeId { get; set; }
        public string EmployeeName { get; set; }        
        public int Age { get; set; }
        public int Salary { get; set; }
        public int DepartmentId { get; set; }
    }

Department.cs

public class Department
    {
        public int Deptid { get; set; }
        public string Deptname { get; set; }
    }

The array that I am passing from Javascript is as under

In the controller method, the value is coming as null?

What wrong I am making?

Answer 1

Given your Javascript Object array (and not sure if it is limited to just two entries), we can re-write your javascript post model to mimic your WebApi request model.

Something like (remeber limited to 2 objects in the javascript array).

this.insertEmployeeDepartment = function (Employee) {
    //construct a new object to match the WebApi Object
    var dto = {
        Employees: [Employee[0]], //Employee[0] is the employee record
        Departments: [Employee[1]] //Employee[1] is the department record
    };

    var request = $http({
        method: "post",
        url: "/Employee/InsertEmployeeDepartment",
        contentType: "application/json",
        data: JSON.stringify(dto)
    });
    return request;
}

Now if your JavaScript array is constructed differently per method you will have to format your new model data object differently.

Edit:

To make it match exactly as i see your WebApi DepartmentId property is not on the Employee[0] record we can copy it over manually. Such as.

this.insertEmployeeDepartment = function (Employee) {
    //construct a new object to match the WebApi Object

    Employee[0]['DepartmentId'] = Employee[1].Deptid;

    var dto = {
        Employees: [Employee[0]], //Employee[0] is the employee record
        Departments: [Employee[1]] //Employee[1] is the department record
    };

    var request = $http({
        method: "post",
        url: "/Employee/InsertEmployeeDepartment",
        contentType: "application/json",
        data: JSON.stringify(dto)
    });
    return request;
}

Answer 2

Your javascript object is an array that essentially contains a object of each type. You need to use an object that contains an array of objects of each type.

So what you have is something like

[{Age:"23", EmployeeId:"67", EmployeeName:"TestEmpName", Salary:"6666"}, {Deptid:"34", Deptname:"New Dept"}]

What you need is something like

{Employees: [{Age:23, EmployeeId:67, EmployeeName:"TestEmpName", Salary:6666, DepartmentId:0 }], 
Departments: [{Deptid:34, Deptname:"New Dept"}]}