如何从AngularJS前端通过JSON对象作为参数的Web API方法和检索值

Question

我需要通过在AngularJS前端的WebAPI输入的数据和检索另一组数据来填充网格上。我试图通过数据作为JSON对象的WebAPI方法。在的WebAPI的方法，所述参数我传递的JSON对象作为一类对象。

我不能够进入到特定的WebAPI方法，当我使用[HTTPPost]，但我能够进入到的WebAPI方法，当我使用[HTTPGET。但在这种情况下，类对象，它是在的WebAPI方法中的参数示出了NULL值。

你可以请告知如何解决这个问题。

的WebAPI

namespace webAPITestProject.Controllers
{
    [Route("NewRoute")] 
    public class ValuesController : ApiController
    {
        retrieveEmployeeData empData = new retrieveEmployeeData();
        retrieveProductDetails prodDetls = new retrieveProductDetails();    

        [Route("http://localhost:212122/api/Values/GetEmployeeData?EmployerDetls=")] 
        [HttpPost]
        public DataTable getEmployeeData(HttpRequestMessage request,[FromBody] Employer empDetails)
        {
            DataTable dataTable = new DataTable { TableName = "MyTableName" };
            dataTable = empData.getEmployeeData(empDetails);
            return dataTable;
        }
    }
}

AngularJS - 控制器

angular.module('Test.Employer')
    .controller('EmployerController', ['$scope','headerValue', '$http',
        function ($scope, headerValue, $http) { 
            var ipEmployerDetls = {                   
                EmployerName: "cherokee",
                Company: "ABC"                   
            };

            $http({ 
                url: "http://localhost:212122/api/Values/GetEmployeeData?EmployerDetls=",
                dataType: 'json', 
                method: 'POST', 
                data: JSON.stringify(ipEmployerDetls), 
                headers: { 
                    "Content-Type": "application/json" 
                } 
            }).success(function (response) { 
                $scope.object = response.data;
            }) 
                .error(function (error) { 
                    alert(error.Message); 
                });
})();

雇主类

public class Employer
{
    string _companyCode = "";
    string _employerName = "";
    public string Company
    {
        get
        {
            return _companyCode;
        }
        set
        {
            _companyCode = value;
        }
    }

    public string EmployerName
    {
        get
        {
            return _employerName;
        }
        set
        {
            _employerName = value;
        }
    }
}

Answer 1

首先，路线

不包括到终点的路线查询字符串，该查询字符串是默认绑定到方法签名的参数，如果你超过他们。定义与RoutePrefix属性并与Route属性方法途径控制器路由。两者将在运行时结合起来，创造方法途径，在这种情况下api/Values/GetEmployeeData。

然后，方法参数

你不需要定义HttpRequestMessage作为参数。你可以只写HttpContext.Current获得通过的HttpContext从方法中。

最后，您声明数据表，然后后reasign就行了。你应该简单做最后一次。

因此，尝试这样的

[RoutePrefix("api/Values")] 
public class ValuesController : ApiController
{
    retrieveEmployeeData empData = new retrieveEmployeeData();
    retrieveProductDetails prodDetls = new retrieveProductDetails();    

    [Route("GetEmployeeData")] 
    [HttpPost]
    public DataTable getEmployeeData([FromBody] Employer empDetails)
    {
        var dataTable = empData.getEmployeeData(empDetails);
        return dataTable;
    }
}

注意：名称getEmployeeData看起来更适合成为一个GET请求，然后一个POST。

此外，还要get和发包方类较新的，简单的语法设定

public class Employer
{
    public string Company { get; set; }
    public string EmployerName { get; set; }
}

更新您的客户应

angular.module('Test.Employer')
    .controller('EmployerController', ['$scope','headerValue', '$http',
        function ($scope, headerValue, $http) { 
            var ipEmployerDetls = {                   
                EmployerName: "cherokee",
                Company: "ABC"                   
            };

            $http({ 
                url: "http://localhost:212122/api/Values/GetEmployeeData", 
                method: 'POST', 
                data: JSON.stringify(ipEmployerDetls), 
                headers: { 
                    "Content-Type": "application/json" 
                } 
            }).success(function (response) { 
                $scope.object = response.data;
            }) 
                .error(function (error) { 
                    alert(error.Message); 
                });
})();