Pass argument to API function AngularJS C#

Question

So I have a Web API function that looks like this

[Route("api/Account/Save")]
[HttpPut]
public IHttpActionResult SaveAccount(Account acc)
{

     if (acc.AccountID != null)
     {
          // do stuff
          var result = new {};
     }
     return Ok(result);   
}

When I go to that api/Account/Save endpoint, I need to save an instance of the Account class to the database. The UI of the web page should have the user entered stuff like ID, Name, ...

I am having trouble passing the instance of the class to the method. I know how to pass something like a string through the endpoint then to the function, but I don't know how to do this.

This is my AngularJS. I put these in separate JS files that's why I am declaring things multiple times.

angular.module('MyApp')
.factory('accountResource', function ($resource) {
   return {
      saveAccount: $resource('/api/Account/Save', {}, {
            query: {
                method: 'PUT',
                params: {
                    // probably pass it here?
                    // I pass stuff like ID's to the function here
                }
            }
        })
   };
});

angular.module('MyApp')
.factory('accountFactory', ['$q', 'accountResource', function ($q, accountResource) {   
   var service = {
      saveAccount: saveAccount,
      account: {}
   }
   function saveAccount(account) {
      return accountResource.saveAccount.query().$promise.then(
         function (result) {
            service.account = result.account;

            return result.$promise;
         }, function (error) {
            return $q.reject(error);
         });
    }
    return service;
}]);

When I run the debugger and break at this line in acccountFactory

return accountResource.saveAccount.query().$promise.then(

The parameter account does have all the attributes (ID, account, ...), and I do see the values entered by the user are assigned to them. I just don't know how to pass this to the API function. And if I change my $resource like this, and pass account to query, it does not work (it only works when I'm passing stuff like ID's). Because I am passing in an object, the URL looks like this:

/api/Account/Save/%5Bobject%20Object%5D

angular.module('MyApp')
    .factory('accountResource', function ($resource) {
       return {
          saveAccount: $resource('/api/Account/Save/:acc', {}, {
                query: {
                    method: 'PUT',
                    params: {
                        acc: '@acc'
                    }
                }
            })
       };
    });

ragerory · Accepted Answer · 2015-11-18 14:58:45Z

There are a few things here...

Your data service should have the content type being sent to your resource:

saveAccount: $resource('/api/Account/Save', {}, { query: { method: 'PUT', headers: { 'Content-Type': 'application/json' } } })

Your app service should have the params being sent over to the data service:

saveAccount: function (params) {
    return $q(function (resolve, reject) {
        accountResource.saveAccount.query(params, function (data) {
            resolve(data);
        }, function (error) {
            reject(error);
        });
    });
}

And your controller should be building the object based on the fields on the form, and passing that object as a json formatted object:

saveAccount = function() {
    var account = {};
    account.firstName = someValue; // probably a property bound to the textbox
    account.lastName = someValue2; // so on etc...

    var params = JSON.stringify(account);
    accountResource.saveAccount(params).then(function (data) {
        // do something with data
    });
}

Collectives™ on Stack Overflow

Pass argument to API function AngularJS C#

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