How to pass object and a value in angular $http.post and get those in asp .net web api

Question

I want to pass multiple objects and a value from angular to asp .net web Api.

My js:

 var productStockArray =$scope.ProductStockArray;
        var challan = 20;
    $http.post(dataUrl + "StockProductApi/InsertStockdata", { params: {  ProductStockArray: productStockArray, Challan: challan } })
              .then(function (data) {

Here productStockArray is like given below: and callan is single value

{ProductCode: "Pr- 001", ProductName: "T-Shirt", DealerPrice: 5, profitPercentage: 5, freePc: 5}
{ProductCode: "abc6", ProductName: "Luxs", originalPc: 455, freePc: 5, profitPercentage: 5}

My WebApi:

   [HttpPost]
    [Route("api/StockProductApi/InsertStockdata/")]
    public HttpResponseMessage InsertStockdata(IEnumerable<StockProduct> ProductStockArray, int Challan)
        {
---------
}

N.B: whole code is avoided for brevity.

if i pass only one parameter (objects) in angular and webapi, it ok. but when i want to pass two parameters (objects and int), it shows not found error in console. if i pass two parameters (int and int), it ok. My question is can't i pass parameters (objects and int) to web api using angular http.post method?

i can get one parameter(only objects). But i want to pass 2 parameter (objects and int) to web api. How can i do this?

See this post on how to handle the the request from the server side: https://stackoverflow.com/questions/20226169/how-to-pass-json-post-data-to-web-api-method-as-object. As for the the angular side, you can simply use: `$http.post(url, angular.toJson({ ProductStockArray: productStockArray, Challan: challan }))` — Richard Dunn, Jul 31 '17 at 19:34

score 0 · Answer 1 · answered Jul 31 '17 at 19:10

0

$http.post(dataUrl + "StockProductApi/InsertStockdata?intValue="+x+"&object="+obj)
        .then(function(response){
            defer.resolve(response);
        },function(error){
            defer.reject(error);
        });

answered Jul 31 '17 at 19:10

Himesh Suthar

562
4
14

I used this: `var productStockArray =$scope.ProductStockArray; var challan = 20; $scope.saveLoadingGif = true; $http.post(dataUrl + "StockProductApi/InsertStockdata?Challan=" + challan + "&ProductStockArray=" + productStockArray) ` `[HttpPost] [Route("api/StockProductApi/InsertStockdata/")] public HttpResponseMessage InsertStockdata(int Challan,object ProductStockArray) {` but object ProductStockArray =null – Nur Uddin Aug 01 '17 at 01:51

score 0 · Answer 2 · answered Jul 31 '17 at 19:18

0

This format allows for you to post a single item. You can send the objects as part of the item (such as JSON) and then include the single parameter as part of the url or include both parameters in the item itself.

$http.post(webUrl, item).then(function (response) {
        resolve(response)
    }, function (error) {
        reject(error);
    });

answered Jul 31 '17 at 19:18

Graham

336
1
13

so, you are saying that anyhow i should pass only one parameter? But if i pass two int variable, it is found in api. then why can't objects? – Nur Uddin Aug 01 '17 at 02:01
You can do it a few different ways, but sending an array of items (as your IEnumerable suggests you might) can be problematic as a URL parameter. Sending individual values as parameters on the webUrl and then sending your array of StockProducts as parts of the item. – Graham Aug 01 '17 at 13:40
An example item I send as a JSON object that the web API sees as a custom object type I created on that side. { "ManualId": "abc1234", "ChapterSections": [{"ChapterSectionId": "123"}, {"ChapterSectionId": "456"}, {"ChapterSectionId": "789"}, {"ChapterSectionId": "10"}, {"ChapterSectionId": "11"}] } – Graham Aug 01 '17 at 13:47

score 0 · Answer 3 · answered Jul 31 '17 at 19:40

0

Further to my comments, for your angular end:

$http.post(url, angular.toJson({ ProductStockArray: productStockArray, Challan: challan }))
.then(
(response) => {
    resolve(response);
},
(error) => {
    reject(error);
});

And for how to parse the sent JSON object on the .net server, see this post: How to pass json POST data to Web API method as object.

Note: Be sure to use angular.toJson(), not JSON.stringify()

Goodluck!

answered Jul 31 '17 at 19:40

Richard Dunn

6,165
1
25
36

`angular.min.js:96 POST http://localhost:15822/api/StockProductApi/InsertStockdata 404 (Not Found)` – Nur Uddin Aug 01 '17 at 01:58
api ` [HttpPost] [Route("api/StockProductApi/InsertStockdata/")] public HttpResponseMessage InsertStockdata(int Challan,object ProductStockArray) {` – Nur Uddin Aug 01 '17 at 02:00
what would be api parameter? – Nur Uddin Aug 01 '17 at 02:07
works! but get in wep api something like: `{ "Challan": 20, "ProductStockArray": [ { "ProductCode": "ty543", "ProductName": "Ponds", "originalPc": 5, "freePc": 5, "profitPercentage": 5, "DealerPrice": 5 } ] }` – Nur Uddin Aug 01 '17 at 02:11
how can i loop through it to save ? – Nur Uddin Aug 01 '17 at 02:11
As I said, look at that post. It explains everything you need to know. Pay specific attention to the section: "Posting a complex object". Read it carefully, take your time, you'll then see how it's virtually identical to your situation. – Richard Dunn Aug 01 '17 at 07:37

How to pass object and a value in angular $http.post and get those in asp .net web api

3 Answers3