0

I am working two projects linked with each other e.g A and B.

In Project A - I've implemented entity framework to fetch data from database.

In Project B - I've implemented Angular 2, fetching data from project A and display it on screen (client).

Both projects are connected with API. Project B's API is calling Project A's API to fetch data from database and displaying to screen(client). to fetch data 'GET' request is working fine.

Issue : When user filling a form and posting data, 'POST' method is not working. If I implement same [HttpPost] Method in Project B, then it is working, but I want to post data to Project B's Method.

To understand more easily, I've tried to implement this situation graphically below:(highlighted red part is not working)

enter image description here

Posting Data with Angular 2 is working fine as below:

return this.http
        .post(projectAUrl, JSON.stringify({ stateName: stateName }), { headers: this.headers })
        .toPromise()
        .then(res => res.json().data as AnalyticsState)

[HttpPost] Method in Project A's controller is implemented below:

[Route("api/States")]
[HttpPost]
public IHttpActionResult PostSaveState([FromBody]string stateName)
{
    return null;
}

After submitting form, this method is not triggering (tried by putting breakpoint) in Project A, same method is working if I implement in Project B.

Do I have to do something with both project's API to posting data or I'm missing something silly point to achieve posting data into database? New to dotNet core and angular 2, tries to understand project flow.

Note : I do not want to implement Entity framework in Project B. Project flow should be same as in attached image.

So far I tried many things, but no luck, few links are :

httpclient call to webapi to post data not working

.NET MVC 4 WebAPI POST not working

https://angular.io/docs/ts/latest/tutorial/toh-pt6.html

Working : Below Angular function for fetching data from Project A is working fine.

 getStates() {

    let ProjectAUrl = 'http://localhost:9043/api/GetStates';

    return this.http.get(ProjectAUrl )
        .map(res=>res.json()
        .subscribe(States => this.States = States);
}

Not Working : When user submitting form, I'm calling below angular function. In below function, if I use ProjectBUrl, control is going into Project B's controller method (Which I don't want). But If I use ProjectAUrl, control is not going to Project A's controller.

SaveState(stateName: string): Promise<State> {

    let ProjectAUrl = 'http://localhost:9043/api/States?stateName='+stateName+'';
    let ProjectBUrl = 'api/States?stateName='+stateName+'';

    return this.http
        .post(ProjectAUrl , JSON.stringify({ stateName: stateName }), { headers: this.headers })
        .toPromise()
        .then(res => res.json().data as State)
        .catch(this.handleError);
}

So is there any possibility to call Project A's controller method directly from Project B's angular function? or pass a control from Angular function to Project B's controller and then Call project A's controller from Project B's controller.

Sorry for making it bit confusing and complicated! but any help would be much appreciated.

Any idea how to post data through API in Angular 2?

Community
  • 1
  • 1
Riddhi
  • 202
  • 5
  • 17
  • You are posting a object, but you expect as parameter from the API a string. Also, theres no need for stringfy – Fals Apr 12 '17 at 16:35
  • `same method is working if I implement in Project B.` Do you mean some methods go though B to A, but Angular sometimes accesses straight to A directly? It seems like Angular knows both APIs. – Win Apr 12 '17 at 17:24
  • Hi @Win, thanks for your reply. I've updated my question with more detailed implementation of angular 2 function of fetching and posting data. I'm calling Project A just by calling url. – Riddhi Apr 13 '17 at 10:30

1 Answers1

-1
  • Remove the FromBody attribute from your controller action parameter
  • Make the string parameter to your controller action Route attribute Route("api/States/stateName/{stateName}")
  • Call to client post should include stateName on the URL
dudeNumber4
  • 4,217
  • 7
  • 40
  • 57