AngularJS $http get to ASP.NET Web Api with object in parameters

Question

I'm trying to get filtered data from server using a filtering object I pass to the server side. I have managed to get this working with a post:

angular:

var filter: { includeDeleted: true, foo: bar };
$http({ method: 'post', url: 'api/stuff', data: filter });

web api:

public IEnumerable<StuffResponse> Post([FromBody]Filter filter)
{
    return GetData(filter);
}

But i don't want to use a post for this, I want to use a get. But this does not work:

angular

$http({ method: 'get', url: 'api/stuff', params: filter });

web api

public IEnumerable<StuffResponse> Get([FromUri]Filter filter)
{
    return GetData(filter);
}

Also tried specifying params: { filter: filter }. If i try [FromBody] or nothing, filter is null. With the FromUri i get an object at least - but with no data. Any ideas how to solve this, without creating input parameters for all filter properties?

simply remove [FromUrl] attribute, and make sure in Filter class, includeDeleted as a public property, it should work. — Prashant Lakhlani
– Prashant Lakhlani, Commented Feb 28, 2014 at 10:30
Standard media type formatter would not do this. Custom media type formatter is required. See here codeproject.com/Articles/701182/… — Chandermani
– Chandermani, Commented Feb 28, 2014 at 13:39

Ibrahim Kais Ibrahim · Accepted Answer · 2015-12-08 10:36:27Z

5

Yes you can send data with Get method by sending them with params option

var data ={
  property1:value1,
  property2:value2,
  property3:value3
};

$http({ method: 'GET', url: 'api/controller/method', params: data });

and you will receive this by using [FromUri] in your api controller method

public IEnumerable<StuffResponse> Get([FromUri]Filter filter)
{
    return GetData(filter);
}

and the request url will be like this

http://localhost/api/controller/method?property1=value1&property2=value2&property3=value3

edited Dec 8, 2015 at 10:36

answered Feb 4, 2015 at 12:09

Ibrahim Kais Ibrahim

85010 silver badges24 bronze badges

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

Comments

Vildan · Accepted Answer · 2015-11-12 05:19:28Z

4

Solved it this way:

Angular:

$http({
       url: '/myApiUrl',
       method: 'GET',
       params: { param1: angular.toJson(myComplexObject, false) }
      })

C#:

[HttpGet]
public string Get(string param1)
{
     Type1 obj = new JavaScriptSerializer().Deserialize<Type1>(param1);
     ...
}

answered Nov 12, 2015 at 5:19

Vildan

1,9941 gold badge16 silver badges17 bronze badges

Comments

Ramesh Rajendran · Accepted Answer · 2014-02-28 09:22:04Z

2

A HTTP GET request can't contain data to be posted to the server. What you want is to a a query string to the request. Fortunately angular.http provides an option for it params.

See : http://docs.angularjs.org/api/ng/service/$http#get

answered Feb 28, 2014 at 9:22

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

3 Comments

Trylling Over a year ago

As you see in the example with 'get', I am using 'params'. And I can see the filter object is translated to URL parameters in the request - but the server can't deserialize it to the Filter object

Ramesh Rajendran Over a year ago

Filter is a class name, So you can't do this, you can't pass class in a query string, so you need to change the class to string,int,float...

testpattern Over a year ago

Vil's answer provides a cleaner solution imo

sanjeewa · Accepted Answer · 2017-09-19 16:46:13Z

you can send object with Get or Post method .

Script

//1.
var order = {
     CustomerName: 'MS' };
//2.
var itemDetails = [
     { ItemName: 'Desktop', Quantity: 10, UnitPrice: 45000 },
     { ItemName: 'Laptop', Quantity: 30, UnitPrice: 80000 },
     { ItemName: 'Router', Quantity: 50, UnitPrice: 5000 }
];
//3.
$.ajax({
     url: 'http://localhost:32261/api/HotelBooking/List',
     type: 'POST',
     data: {order: order,itemDetails: itemDetails},
     ContentType: 'application/json;utf-8',
     datatype: 'json'
    }).done(function (resp) {
        alert("Successful " + resp);
    }).error(function (err) {
        alert("Error " + err.status);});

API Code

[Route("api/HotelBooking/List")]
[HttpPost]
public IHttpActionResult PostList(JObject objData)
{  List<ItemDetails > lstItemDetails = new List<ItemDetails >();
   dynamic jsonData = objData;
   JObject orderJson = jsonData.itemDetails;
   return Ok();}

that's a POST. Does it work with a get? Plus it's not angular JS.

Collectives™ on Stack Overflow

AngularJS $http get to ASP.NET Web Api with object in parameters

4 Answers 4

Comments

Comments

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

1 Comment

Related