Pass an array to WebAPI from AngularJS and read from WebAPI

Question

Let's say I have an array in my client side model:

        vm.dataSheets = [
        { value: 0, text: localize.getLocalizedString('_ProductsAndServices_'), selected: selected},
        { value: 1, text: localize.getLocalizedString('_Holidays_'), selected: selected },
        { value: 2, text: localize.getLocalizedString('_Locations_'), selected: selected },
        { value: 3, text: localize.getLocalizedString('_OpHours_'), selected: selected },
        { value: 4, text: localize.getLocalizedString('_Users_'), selected: selected }
    ];

I bind this to a checkbox list on the HTML. I want to send the values of those which are checked, to the web API. Using angularJS I can filter the selected objects as follows:

$filter('filter')(vm.dataSheets, { selected: true })

This will return an array of the entire object. Is there a short way to just retrieve the selected values as 1,2,3, etc...?

Right now, I send the data to the Web API as follows:

  var fd = new FormData();
        fd.append('file', file);
        fd.append('clientId', $rootScope.appData.clientId);
        fd.append('sheets', $filter('filter')(vm.dataSheets, { selected: true }));

        $http.post("TIUSP/systemengine/ClientSupply", fd, {
            withCredentials: true,
            headers: {'Content-Type': undefined },
            transformRequest: angular.identity
        }).success(function () {

        }

In the web API, how do I retrieve the selected values? When I use

HttpContext.Current.Request["sheets"];

it gives me a string as [object, object][object, object], etc...

Pass JSON.strigify($filter('filter')(vm.dataSheets, { selected: true })), However you have to deserialize on API side — Satpal
– Satpal, Commented Jun 6, 2016 at 12:55

jpgrassi · Accepted Answer · 2016-06-06 15:19:23Z

To return the selected values as an array with Ids, you can create a custom filter:

app.filter('selected', function() {
  return function(items) {
    var filtered = [];
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      if (item.selected === true) {
        filtered.push(item.id);
      }
    }
    return filtered;
  };
});

Then, use it:

var fd = {
    'file': file,
    'clientId': $rootScope.appData.clientId,
    'sheets': $filter('selected')(foo.results)
};

    $http.post("TIUSP/systemengine/ClientSupply", fd, {
       withCredentials: true,
       headers: {'Content-Type': undefined },
       transformRequest: angular.identity
    }).success(function () {    
}

This will create something like this:

{
   file: 'path-to-my-filez/image.png',
   clientId: 11,
   sheets: [1,2,3,4]
}

In your Web API Controller

Create a class that maps the parameters you are sending in your request:

public class ClientSupplyViewModel
{
    public string file {get; set;}
    public int clientId [get; set;}
    public int[] sheets {get; set;}
}

Then, use it in your controller:

[HttpPost]
public HttpResponseMessage ClientSupply(ClientSupplyViewModel data)
{

}

The controller above is just an example. The only important part is the data parameter which contains your File, ClientId and the array of ints.

Collectives™ on Stack Overflow

Pass an array to WebAPI from AngularJS and read from WebAPI

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related