Getting angular ajax data in asp.net mvc6

Question

I've been trying to figure this out for hours now but none of the solutions seem to help. I have an MVC6 project with AngularJs. I am able to connect, so my routes are working, and I am able to get data back if I hard code a string or something, but I can't seem to access the data sent to the server.

My angularjs http request code:

var app = angular.module('APIService', []);
app.factory('APIService', function ($http) {
    var api = {};

    api.getBuyer = function (data) {
        return $http.post('/api/buyer', data);
    }

    return api;
});

The angularjs function call

APIService.getBuyer({ Url: 'samirbashir5739', FirstName: 'Samir' }).success(function (res) {

});

My C# Controller

namespace Reporting.api
{
    [Route("api/buyer")]
    public class BuyersController : Controller
    {
        // POST api/buyer
        [HttpPost]
        public string Post([FromBody] string Url)
        {
            return Url;
        }
    }
}

I've tried setting the data as "JsonResult data", or even "string Url." Most tutorials I found had an object for the data so it would fit into something like "[FromBody] Buyer buyer" but I don't have an object for it, I simply want the data. Is it possible?

In the first code clock, you are return the promise the `$http.post()` call. Then you are running `res.success()`, but as you have already returned from the function, this line of code won't be called — Rhumborl, Jun 02 '16 at 08:32
see if this helps: http://stackoverflow.com/questions/30957248/how-to-send-post-in-angularjs-with-multiple-params/30957308#30957308 — Sajal, Jun 02 '16 at 08:35

score 1 · Answer 1 · answered Jun 02 '16 at 08:43

1

I think your controller is wrong. You are trying to pass a Url and a name whereas your controller method is waiting for a single Url. Try to pass only a Url and it should work. If you want to pass the Url and the Firstname, you have to modify your controller method like this :

[HttpPost]
    public string Post([FromBody] string Url, string FirstName)
    {
        // Do whatever you need to do here ...
    }

answered Jun 02 '16 at 08:43

Nadège Rouelle

170
5

Yeah I'm looking for something like what you posted there so I can handle both variables but I can't get that working either, Url and FirstName are both empty – Tyler Jun 02 '16 at 13:31

score 1 · Accepted Answer · edited May 23 '17 at 12:09

WebApi does not support multiple parameter binding from a post request. You can check more details here.

So the proper way for the WebApi is to create a request model that will contain all the properties that will be bound. Perhaps you can try multiple [FromUri] parameters, but then you will have to add them to the url yourself in angualr, rather than just pass to .post.

Example model:

public class RequestModel
{
    public string Url {get;set;}
    public string Name {get;set;}
}

I also believe that adding the model improves the structure of your code as you always know what your server expects rather than working with some dynamic data.

P.S. Did not notice that you use ASP.Net Core, my data is from web api 2, but perhaps it's still valid, so you will need to create a model + FromBody should not be required on post requests since it's the default behavior.

Yeah, you are right. It appears the only way to do it is to have a request model. It worked fine when I built out the request model as you suggested. — Tyler, Jun 03 '16 at 02:41

Getting angular ajax data in asp.net mvc6

2 Answers2