如何使用angularJs将数组对象传递给web api方法答案

【问题标题】：how to pass array object to web api method using angularJs如何使用angularJs将数组对象传递给web api方法
【发布时间】：2016-07-22 12:35:10
【问题描述】：

我正在创建一个客户端脚本，以使用$http 将字典对象类型发送到 Web api 方法，如下所示：

    $scope.SearchPolicyDetails = function (data) {
    var searchPolicy = new Array();
    searchPolicy["InsuredName"] = data.InsuredName;
    searchPolicy["PostalCode"] = data.PostalCode;
    searchPolicy["LOB"] = data.LOB;
    searchPolicy["AgencyName"] = data.AgencyName;
    searchPolicy["Symbol"] = data.Symbol;
    searchPolicy["PolicyNum"] = data.PolicyNum;
    searchPolicy["MCO"] = data.MCO;
    searchPolicy["expireswithin"] = data.expireswithin;
    searchPolicy["SortFields"] = data.SortFields;
    searchPolicy["SortOrder"] = data.SortOrder;

    $http({
        url: "http://localhost:53054/api/GetPoliciesBySearch",
        dataType: 'json',

        data: searchPolicy,
        headers: {
            "Content-Type": "application/json"
        }
    }).success(function (response) {
        $scope.value = response;
    })

};

我有这个WebAPI 方法：

    public List<Dictionary<string,string>> GetPoliciesBySearch(Dictionary<string,string> policySearch)
    {

        return SpecializedHandler.GetAllPolicies(policySearch).IterativeResource;
    }

但我没有收到该方法的对象。

我在 chrome 控制台中看到了这个错误：

【问题讨论】：

浏览器开发工具网络中的请求状态如何？为什么不直接将data 传递给$http？也缺少method
方法没问题..但是如何发送到有字典对象的方法，@charlietfl
那么您在浏览器开发工具网络中看到了什么？也看不到method 丢失时的情况如何。另外你为什么不使用错误处理程序？
我已经修改并在我的帖子中添加了图片。 @charlietfl
@DotNetDeveloper。这个调用是 POST 还是 GET。我假设基于命名约定，您正在尝试执行 GET？

标签： c# angularjs asp.net-web-api

【解决方案1】：

我认为您的代码和 UI 在不同的项目中，可能是您没有在 web.config 或 WebApiConfig.cs 中配置 CORS。你可以关注这个网址

https://msdn.microsoft.com/en-us/magazine/dn532203.aspx

【讨论】：

谢谢。它现在正在工作。添加 -> var cors = new EnableCorsAttribute("", "", "*"); config.EnableCors(cors);在 WebApiConfig.cs 中并解决。

【解决方案2】：

您需要定义一个类并使用它，而不是在 API 操作中使用字典。

class PolicyRequest 
{
     public string InsuredName { get; set; }
     public string PostalCode { get; set; }
     public string LOB { get; set; }
     ...
}

【讨论】：

【解决方案3】：

searchPolicy["InsuredName"] = searchPolicy.InsuredName。这不是一个数组，而是一个带有 InsuredName 等属性的 json 对象。使其成为一个数组。你可以做： var searchPolicy = []; searchPolicy.push(data.InsuredName);

【讨论】：

【解决方案4】：

看起来这里有很多事情要考虑：

首先：在客户端创建的对象不会转换为List<Dictionary<string, string>>，因此要按我们的意愿工作，我们必须进行一些更改。考虑：

var searchPolicy = {};
searchPolicy['InsuredName'] = data.InsuredName;
searchPolicy['PostalCode'] = data.PostalCode;
//etc (see below for another crucial piece)

第二：$http 内部的代码调用不是针对任何特定方法(see the docs)。考虑以下内容：

$http({
    url: "http://localhost:53054/api/GetPoliciesBySearch",
    dataType: 'json',
    method: 'POST',
    data: JSON.stringify(searchPolicy),
    headers: {
        "Content-Type": "application/json"
    }
}).then(successHandler, errorHandler);

//try to avoid the deprecated success / error functions

function successHandler(response){
    $scope.value = response;
}

function errorHandler(response){
    //I strongly consider this for debugging
    console.log(response);
}

第三：考虑在 WebAPI 控制器中接受标准Dictionary<string, string>，因为新对象不应该是字典列表，而是平面字典。 (this answer may provide more context)

最后：从错误信息来看，路由可能会混淆；确保在 WebApiConfig.cs 中有类似的路由设置：

RouteTable.Routes.MapHttpRoute("GetPoliciesBySearch",
    "api/getpoliciesbysearch",
    defaults: new 
    {
        controller = "{your controller name here}", 
        action = "GetPoliciesBySearch"
    });

【讨论】：