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?

404 means the page you are trying to post on does not exist. You probably have a mistake in the URL. — Mistalis
– Mistalis, Commented Jun 9, 2017 at 8:58
are you sure api endpoint up and running - try adding simple GET method to see if you can hit it in browser. — James P
– James P, Commented Jun 9, 2017 at 8:59
the url is correct as I am able to navigate to it through browser. — User
– User, Commented Jun 9, 2017 at 9:06
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. see my answer. — Majid Parvin
– Majid Parvin, Commented Jun 9, 2017 at 9:11
Did you try e.g. console.log(param); to see if you are sending correct data? — James P
– James P, Commented Jun 9, 2017 at 9:14

Majid Parvin · Accepted Answer · 2017-06-09 11:30:18Z

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!');
                 });

edited Jun 9, 2017 at 11:30

answered Jun 9, 2017 at 9:03

Majid Parvin

5,1706 gold badges33 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

User Over a year ago

Will mark it negative because reply doesn't answer the question asked.

Majid Parvin Over a year ago

@ShK did you find your problem? did you get my answer?. did you test it? :)

User Over a year ago

So how do I pass the criteria object from AngularJs $http?

Ghazanfar Khan · Accepted Answer · 2017-06-09 09:43:18Z

0

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){
            });

answered Jun 9, 2017 at 9:43

Ghazanfar Khan

3,7188 gold badges47 silver badges90 bronze badges

Comments

User · Accepted Answer · 2017-06-09 11:14:35Z

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!');
                        });

Collectives™ on Stack Overflow

Calling method using $http Post in AngularJS

3 Answers 3

Update

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related