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

时间:2019-02-05 16:29:59

标签: angularjs asp.net-web-api

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

使用[HTTPPost]时无法输入特定的webAPI方法,但是使用[HTTPGet]时可以输入webAPI方法。但是在那种情况下,作为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-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;
        }
    }
}

1 个答案:

答案 0 :(得分:0)

首先,路线

在到端点的路由中不包含查询字符串,默认情况下,如果您传递查询字符串,则将它们绑定到方法签名中的参数。 使用RoutePrefix属性定义控制器路由,并使用Route属性定义方法路由。两者将在运行时结合以创建方法 路线,在这种情况下为api/Values/GetEmployeeData

然后,方法参数

您不需要将HttpRequestMessage定义为参数。您只需编写HttpContext.Current就可以通过HttpContext从方法中获取该信息。

最后,您要声明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。

此外,使Employer类中的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); 
                });
})();