pass array to web api AngularJS

Question

I can't pass array from angularJS to web api action in mvc4.

My $resource is:

adminApp.factory('presentation', ['$resource',
function ($resource) {
    return $resource('/api/presentation/:id', { id: '@id' },
        {
            update: { method: 'PUT', params: { id: '@id' } },
            save: { method: 'POST', params: { model1: '@model1' } },
            remove: { method: 'DELETE', params: { id: '@id' } }
        }

    );
}]);

AngularJS code for pass array of data to save it(presentationItemList that I want to pass):

$scope.savePresentation = function() {
        if ($scope.form.$valid) {

            if ($scope.presentation.Id != undefined && $scope.presentation.Id > 0) {
                $scope.presentation.$update({ id: $scope.presentation.Id });
            } else {
                $scope.presentation.$save({ model1: presentationItemList });
            }
        } else {
            $scope.addFormValidationAlert($scope.form);
        }
    };

My Api action that call after save action in AngularJS:

 public HttpResponseMessage Post(PresentationItemModel model, List<PresentationElementInfoModel> model1)
    {
        var item = Mapper.Map<PresentationItemModel, Presentation>(model);

        model.Id = GetActionResultData(ServiceDataProvider.PresentationCrudService.SaveOrUpdate(item));
        if (model.Id.MoreThanZero())
        {
            return new HttpResponseMessage(HttpStatusCode.Accepted)
            {
                Content = new ObjectContent<PresentationItemModel>(model,
                                                                 new JsonMediaTypeFormatter())
            };
        }
        throw new HttpResponseException(HttpStatusCode.NotFound);
    }

I get an error in firebug: "Can't bind multiple parameters ('model' and 'model1') to the request's content"

This code work fine,if I dont't pass array presentationItemList from angular and don't map it in model1 param of web api action.

Please, help me!

How is your resource injected? Can you show us your entire controller? A quick look in your function let me with this doubts: (1) Your presentationItemList isn't defined in your $scope?; (2) If you are using your resource, why you call $scope.presentation.$save? That $save, if you are using your resource, should be just save; — D.Evangelista
– D.Evangelista, Commented Oct 31, 2013 at 13:28

Chandermani · Accepted Answer · 2013-11-01 04:18:24Z

1

$save method params parameter is used to bind to the url template or gets passed as querystring. Doing { model1: presentationItemList } may not work as i think the behaviour would be to serialize the presentationItemList and add it the url.

On Angular side you should add the presentationItemList as a sub property on the $scope.presenation as

$scope.presenation.items=presentationItemList

and do a $save without passing parameter.

The problem with WebAPI is that it cannot take multiple parameters for POST. So the list should be part of the PresentationItemModel and things would work property.

If you cannot change the server model, then the approach should be to first save the parent, get the id of parent and then make a second call to save the child list.

edited Nov 1, 2013 at 4:18

answered Oct 31, 2013 at 13:45

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IFrizy Over a year ago

You are true about two params in POST action!

Collectives™ on Stack Overflow

pass array to web api AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related