Angular JS将带有$resource的数组数据发送到.NET API

Posted 2023-05-07

【中文标题】Angular JS将带有$resource的数组数据发送到.NET API

【英文标题】：Angular JS Sending Array data with $resource to .NET API

【发布时间】：2015-06-12 10:29:59

【问题描述】：

是的，我知道有大量关于使用 angular $esource 发送数组数据的帖子。我阅读了this、this，以及关于这个主题的前 10 名谷歌搜索结果，但我仍然无法让它发挥作用。我怀疑它可能与服务器端 API 有关，但我真的不确定。

请帮我解决这个问题。我正在尝试使用角度 $resource 将一组数据发布到 .NET API。

$资源：

ResourceModule.service('PartProgramsResource', function ($resource) 
     var url = _baseUrl + '/parts/:partId/programs'
     return $resource(url,  partId: '@partId' , 
         add: method: 'POST', isArray: true
     );

)

内部控制器：

app.controller("EditPartCtrl", function ($scope, PartProgramsResource)
   $scope.save = function()
      var programsToSave = ["program 1", "program2"];
      var resource = new PartProgramsResource(programsToSave);
      resource.$add( partId: $scope.part.id );
  

调试器：

我希望我没有弄错这一点，但在我看来，我的数组变成了一个对象？？以数组索引为键？或者这就是请求有效负载中数组的样子？

.NET API：

 [HttpPost]
    [Route("partId:int:min(1)/programs"
        , Name = ApplicationApiRoutes.Parts.AddPartPrograms)]
    [ResponseType(typeof(IEnumerable<KeyValueOutput>))]
    public HttpResponseMessage AddPartPrograms([FromUri] int partId, [FromBody] List<string> programNames)
    
        return Execute(() => _partFacade.AddPartPrograms(partId, programNames.ToArray(), CurrentUser));
    

使用上述资源调用 API 会导致 System.NullReferenceException 错误。 programNames 参数为空。

当我浏览有关此主题的 *** 帖子时，我主要看到使用以下语法：

var resource = new PartProgramsResource();
 resource.$add( partId: $scope.part.id , programsToSave);

但是，这对我来说永远不起作用，并且请求有效负载将是一个空对象。

任何帮助将不胜感激，因为我绝对非常卡住......

【问题讨论】：

resource.$add( partId: $scope.part.id, programNames: programsToSave );怎么样

也许您可以尝试使用 transformRequest 并在其中修改发送到服务器的数据。

@devqon，这会将我的 uri 更改为 localhost:58248/v1/parts/109/… 并且仍然出现空引用错误。不过谢谢你的建议。

那么resource.$add( partId: $scope.part.id , programNames: programsToSave );

@AlexG，天哪！最后！你是救生员！如果您可以发表您的评论作为答案，那就太好了，这样我就可以选择您作为解决方案。如果您能解释为什么我的数组在请求期间被转换为对象，那也会很有帮助。

【参考方案1】：

您可以使用 transformRequest 修改数据

ResourceModule.service('PartProgramsResource', function ($resource) 
    var url = _baseUrl + '/parts/:partId/programs'
    return $resource(url,  partId: '@partId' , 
        add: 
            method: 'POST',
            transformRequest: function (data, headersGetter) 
                //modify data and return it 
                return angular.toJson(data);
            ,
            isArray: true
        
    );
)

我不是 100% 确定为什么 angular 会这样做，但我认为它希望传递对象。所以如果你发送了像 myArray: [...] 这样的数据就可以了。

【讨论】：

是的，这正是我所做的。并不是说我不喜欢你的回答，但我仍然对这个解决方案有点怀疑，因为很多人建议添加 isArray: true 是关键解决方案，但这对我不起作用。另外，我仍然不明白为什么 resource.$add( , dataToPost);实际上并没有将任何数据发布到服务器，我必须像以前那样做—— var r = new Resource(dataToPost); r.$add();

【参考方案2】：

你直接把programNames作为数据对象放入，但应该是数据对象的一个​​属性：

var resource = new PartProgramsResource(),
    data = 
        programNames: programsToSave
    ;

resource.$add( partId: $scope.part.id , data);

【讨论】：

我明白了。我猜你原来的评论有错字。这种方法对你不起作用。请求负载是一个空对象。