从 AngularJS 向 Web API 发送对象数组答案

【问题标题】：Sending Array of Objects to Web API from AngualrJS从 AngularJS 向 Web API 发送对象数组
【发布时间】：2015-12-05 02:22:27
【问题描述】：

在此过程中，我从 Web API 中获取了一系列“车辆”。我修改并为每辆车做任何事情。然后我想将列表发回，而不需要遍历和循环......

我已经尝试了很多我查找过的方法。我在 WEB API 中有一个断点，看看我是否可以在那里得到数组，但我还没有。

   public IHttpActionResult UpdateVehicles(Vehicle[] vehiclesArry)
    {
        return Ok();
    }

我很困惑是否需要做一个 $post，或者我是否可以像我一直在做的那样将它“获取”到正确的方法。问题是我无法将数组获取到 WEB API 方法。

我的 $resource 设置是这样的。

       return $resource(appSettings.serverPath + "/api/Violators/:id",null,
         {
             'update': { method: 'PUT' },
             'delete': { method: 'DELETE' },
             'post': { method: 'POST' }
         });

我尝试过使用 $post，但它说该对象不支持它。我不确定我可以尝试哪些其他方法。我尝试在 Web API 中使用“动态”，但似乎也不起作用。

【问题讨论】：

为什么你的资源路由有一个 Id ？虽然您的 api 方法没有 id ？你能告诉我们如何调用 put 方法吗？
该 ID 是可选的。在我想将一组对象发送到 api 之前，我在更新、发布或任何事情上都没有遇到问题

标签： angularjs asp.net-web-api asp.net-web-api2

【解决方案1】：

创建一个类似的模型对象

public class UpdateReq {
    public IEnumberable<Vehicle> Vehicles { get;set; }
}

从你的角度，只需传递一个带有数组的 json

{
   [v1, v2, v3]
}

【讨论】：

【解决方案2】：

您缺少 $resource 的 params 对象，因此它不知道 id。

return $resource(appSettings.serverPath + "/api/Violators/:id", { id: '@id' });

您无需显式设置获取、发布、删除的方法。这已经为你完成了。如果您的 API 使用 PUT 进行更新，请按如下方式进行设置：

return $resource(appSettings.serverPath + "/api/Violators/:id", { id: '@id' }, {
   update: { method: 'PUT' }
});

此外，您的资源上的属性必须是 vehiclesArry，否则 Web API 将不知道如何映射它。我也想回应@sowen。您需要设置端点接收的视图模型。

【讨论】：

【解决方案3】：

我的假设是您的页面中有一些脚本错误，或者您没有正确使用 $http 方法。

人们通常遇到的一个问题是在您的角度控制器中使用正确的 url 到 web api 端点。如果不正确，您可能会收到 404 错误。在浏览器控制台（网络选项卡）中查找那些

下面的代码应该可以正常工作，没有任何问题

$http.get("../api/Values/")
    .then(function (res) {

        var vehicles = res.data;
        console.log('data received', JSON.stringify(vehicles));

        //Let's update the Name of each vehicle.
        $.each(vehicles, function (indx, item) {
            item.Name = item.Name + " Updated";
        });

        console.log('data modified', JSON.stringify(vehicles));

        //Let's make a call to web api with modified data
        $http.post("../api/Values/UpdateVehicles", vehicles)
            .then(function (res2) {
                console.log('response', JSON.stringify(res2.data));
            });

    });

假设您在页面中正确加载了 angular js，并且上面的代码是当前页面的 angular 控制器的一部分，并且您拥有具有 2 个操作方法的 Web api 控制器，如下例所示。

public class ValuesController : ApiController
{
    [HttpPost]
    [Route("api/Values/UpdateVehicles")]
    public IHttpActionResult UpdateVehicles(Vehicle[] vehiclesArry)
    {
        // just returning whatever came in for TESTING PURPOSE
        return Ok(vehiclesArry);
    }
    public IEnumerable<Vehicle> Get()
    {
        return new List<Vehicle>
        {
             new Vehicle {Id = 1, Name = "Car"},
             new Vehicle {Id = 2, Name = "Van"}
        };
     }
}

另外，仅供参考：我在我的 api 控制器中将 Attribute routing 用于 UpdateVehicle 端点。

【讨论】：