Calling method using $http Post in AngularJS

Question

I am trying to call the method ProcessCriteria in AngularJS below but for some reason I am keep getting error message:

VM18010:1 POST http://example.com/api/TalentPool/ProcessCriteria 404 (Not Found)

Below is my Calling code:

    var param = { 'Item': item.Key, 'SolrLabel': SolrLabel };

        $http({
            method: 'POST',
            url: '/api/TalentPool/ProcessCriteria',
            data: param
            //headers: {
            //    'Content-Type': 'application/x-www-form-urlencoded'
            //}
        }).then(function (response) {
                // success
                console.log('Facet Data Posted');
                return response;
                                    },
                function (response) { // optional
                    // failed
                    console.log('facet post error occured!');
                });

And my Server side method:

  [System.Web.Http.HttpPost]
        public IHttpActionResult ProcessCriteria(string Item, string SolrLabel)
        {

            var itm = Item;
            var solr = SolrLabel;

            return Ok();
        }

Any suggestions please?

Answer 1

ASP.net cannot match your request in its Route Table because you have 2 parameters in your action and the router doesn't understand it.

it expects a data object that your parameters warp to this.

First of all, make a Model like it:

public  class Criteria
{
    public string Item { get; set; }
    public string SolrLabel { get; set; }
}

then change your action:

[System.Web.Http.HttpPost]
public IHttpActionResult ProcessCriteria(Criteria criteria)
{
    var itm = criteria.Item;
    var solr = criteria.SolrLabel;
    return Ok();
}

Update

and update your javaScript part with JSON.stringify:

var param = { 'Item': item.Key, 'SolrLabel': SolrLabel };

        $http({
            method: 'POST',
            url: '/api/TalentPool/ProcessCriteria',
            data: JSON.stringify(param)
            //headers: {
            //    'Content-Type': 'application/x-www-form-urlencoded'
            //}
        }).then(function (response) {
                // success
                console.log('Facet Data Posted');
                return response;
                                    },
                function (response) { // optional
                    // failed
                    console.log('facet post error occured!');
                 });

Answer 2

I got i working, below is the code for others if they get stuck on it.

   var pvarrData = new Array();
            pvarrData[0] = JSON.stringify(item.Key);
            pvarrData[1] = JSON.stringify(SolrLabel);
            pvarrData[2] = JSON.stringify($localStorage.message);


                $http({
                    method: 'POST',
                    url: '/api/TalentPool/ProcessCriteria',
                    data: JSON.stringify(pvarrData),
                    headers: { 'Content-Type': 'application/json' }
                }).then(function (response) {
                        // success
                        console.log('Facet Data Posted');
                        return response;
                                            },
                        function (response) { 
                            // failed
                            console.log('facet post error occured!');
                        });

Answer 3

You can create a class as said by in above answer and you can pass data in http post like this

 var obj = {
            url: url,
            async: true,
            method: 'POST',
           headers: {
                 "content-type": "application/json; charset=utf-8",
               }
            };
            if (typeof data != 'undefined' || typeof data != null) {
                obj.data = data;
            }
            $http(obj).then(function(response){
            },function(error){
            });