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

Question

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

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

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

网络API

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

标签： angularjsasp.net-web-api

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。

此外，使 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); 
                });
})();