AngularJS Post data to WebAPI using $resource

Question

Okay, I believe I am close to having this working but can't seem to get my WebAPI Controller recognized unless I pass parameters in the URI.

I have... Angular that uses $resource like this...

 var savePromise = myService.common.SaveData.save({},{ ID: saveObj.ID, Year: saveObj.Year, typeID: saveObj.TypeID, ObjectList: JSON.stringify(saveCollection) }).$promise;

Service that gathers the URL and passes this data calling the WebAPI...

SaveData: $resource(myURL, {})

WebAPI controller...

public class ObjectsSaveController : ApiController
{

    [System.Web.Http.HttpPost]
    public HttpResponseMessage POST([FromBody] int ID, int Year, 
    int typeID, string ObjectList) {


Request URL:myURL/api/ObjectsSave
Request Method:POST
Status Code:404 Not Found 
Remote Address:[::1]:8081
Referrer Policy:no-referrer-when-downgrade
Response Headers
view source
Access-Control-Allow-Origin:*
Cache-Control:no-cache
Content-Length:791
Content-Type:application/json; charset=utf-8
Date:Mon, 28 Aug 2017 21:11:09 GMT
Expires:-1
Persistent-Auth:true
Pragma:no-cache
Server:Microsoft-IIS/8.5
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
Request Headers
view source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:210
Content-Type:application/json;charset=UTF-8
Host:localhost:8081
Origin:http://localhost:8081
Pragma:no-cache
Referer:http://localhost:8081/myURL/
User-Agent:Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36
 Request Payload
 view source
 {ID: 211313, Year: 2017, typeID: 7,…}
 cropYear
 :
 2017
 ID
 :
 211313
 ObjectList
 :
 "[{"ID":-1,"Name":"","geoJSONShape":"{\"type\":\"Point\",\"coordinates\":
 [-99.35464723335105,41.54277522419835]}"}]"
 typeID
 :
 7
 Name

If I don't pass values in the query string then the ApiController does not get found.

Any help is appreciated!!

Funn_Bobby · Accepted Answer · 2017-08-31 19:02:16Z

Okay, I have successfully used POST to send data in AngularJS...heres how I did it...

Took the parameters I was passing and put them in a javascript object...

 var objData = {
                    Var1: Var1Value,
                    Var2: Var2Value,
                    Var3: Var3Value,
                    Var4: Var4Value 
                }

Pass that object in a "save" request...

var savePromise = myService.common.SavePostData.save({}, objData).$promise;

I have my resource in a service that builds the call and executes... (function (angular, undefined) { 'use strict';

angular.module('mynamespace.myservice', [
    // Angular
    'ngResource'
])
.factory('myservice', ['$resource', function ($resource) {
        return {
            common: {
            SavePostData: $resource(myURL, {})
            }
        };
    }]);

}(angular));

OKAY!! Now the most important part!!! On the WebApi side you MUST create a data model for the POST to map to... ~note the "case" of the variables must match!

using System.Collections.ObjectModel;
namespace myNamespace {

public class DataModelThatMatchesRequest {
    public int Var1 {
        get;
        set;
    }

    public int Var2 {
        get;
        set;
    }
    public int Var3 {
        get;
        set;
    }

    public Var4  {
        get;
        set;
    }

}

}

Now create an ApiController that uses your data model... ~note you must have decorator "[HttpPost]" and Action decorator "[FromBody]"

    public class SaveObjectController : ApiController {

    [HttpPost]        
    public Objects POST([FromBody] DataModelThatMatchesRequest saveRequest) 
    {

    Do some stuff with "saveRequest"

    }

I hope this helps you!!

Collectives™ on Stack Overflow

AngularJS Post data to WebAPI using $resource

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related