如何将复合数组从 Javascript 传递到 WEB API 控制器 HttpPOST?

How to pass a composite array from Javascript to WEB API controller HttpPOST?

我的Javascript代码

//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; }    
    }
}

模型 -

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

我从 Javascript 传递的数组如下

在控制器方法中,值为 null?

我做错了什么?

您的 javascript 对象是一个数组,基本上包含每种类型的对象。您需要使用一个包含每种类型对象数组的对象。

所以你拥有的是

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

你需要的是

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

鉴于您的 Javascript 对象数组(不确定它是否仅限于两个条目),我们可以重写您的 javascript post 模型以模仿您的 WebApi 请求型号。

类似的东西(记住在 javascript 数组中限制为 2 个对象)。

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

现在,如果您的 JavaScript 数组的构造因方法而异,您将不得不以不同方式格式化新模型数据对象。

编辑:

为了使其与我看到的 WebApi 完全匹配 DepartmentId 属性 不在 Employee[0] 记录中,我们可以手动复制它。如.

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