如何将json对象作为参数从AngularJS前端传递给WebAPI方法并检索值

Question

我需要将在AngularJS前端输入的数据传递给webAPI，并检索另一组数据以在网格上填充。我试图将数据作为JSON对象传递给webAPI方法。在WebAPI方法中，我作为类对象为JSON对象传递的参数。

当我使用webAPI时，我无法进入特定的HTTPPost方法，但是当我使用HTTPGet时，我能够进入webAPI方法。但是在这种情况下，类对象(它是webAPI方法中的参数)显示空值。

你能告诉我如何解决这个问题吗？

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-Controller

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，就可以在方法中通过HttpContext.Current实现这一点。

最后，您要声明dataTable，然后在后面的行中重新签名。你应该简单地做最后一个。

所以，就像这样

[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和set使用更新的、更简单的语法。

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