Why POST using a 'Form' vs using a 'Body'?

Question

The title expresses my post succinctly. Though the following side-note expresses my specific situation which sparked the question.

*Side Note: I'm making a web app with an Angular Front-end. I've found that once I encapsulate my data in a 'FormData' object from an html form template, I am then unable to get those values back from within client-side Angular (as posts like this one state: How do i get the content from a formData? ). Though when I POST to ASP.Net with a '[FromForm]' attribute the values get mapped fine.

So to make things easier I might rather acquire data from the form in the first place and then use it in a 'body' POST instead of a 'form' POST. Doing this so that I am passing around straight data I can work with, instead of data wrapped in a form which I'm unable to work with client-side.

So, thus, I'm wondering the differences between Posting 'forms' and posting 'bodies', and whether there's any reason I should use one over the other?

Update

In ASP.Net Core you can put attributes on your parameter types for REST endpoints. [FromForm] and [FromBody] are what I'm curious about. On the angular side, calling these REST endpoints requires passing either a 'FormData' (for the [FromForm]), or some sort of user defined type (for [FromBody]).

See below for examples.

Update

Here's the signature for the ASP.NET Endpoint for the '[FromBody]':

[HttpPost]
public async Task<IActionResult> CreateToken([FromBody] LoginViewModel model) 
{...}

Here's the Angular snippet that calls this '[FromBody]' endpoint, along with the type that is passed in for the POST call:

public creds = {
    username: "",
    password: ""
}

login(creds): Observable<boolean> {
return this.http.post("api/account/createtoken", creds)
  .pipe(
    map((data: any) => {
      this.token = data.token;
      this.tokenExpiration = data.expiration;
      this.username = data.username;
      return true;
    }));
}

Here is the signature for the ASP.NET Endpoint for the '[FromForm]':

[HttpPost]
public async Task<IActionResult> Signup([FromForm] SignupViewModel viewModel)
{...}

and here is the Angular snippet that calls this '[FromForm]' endpoint:

registerUser(formData: FormData) {
    const options = {
      headers: new HttpHeaders().set('Accept', 'application/json')
    };
    return this.http.post('api/account/signup', formData, options)
      .pipe(
      map(() => {
          return true;
        }),
        catchError(this.handleError)
      );
}

Form data is in a body of a web request (as its not in the headers or the URL), so I don’t understand your question. Can you add some code that demonstrates your problem? Also, do you know what a Content Type is? If not, you should research it, as it may answer your question. — Nate, Feb 15 '19 at 00:39
@Nate, I hope this provides you with more detail on the situation. Let me know if you require anything more. I'll look into 'Content Type' as you mentioned. Thanks. — Evan Sevy, Feb 15 '19 at 05:51

score 2 · Answer 1 · answered Feb 15 '19 at 14:47

2

The FromForm attribute is for incoming data from a submitted form sent by the content type application/x-www-url-formencoded while the FromBody will parse the model the default way, which in most cases are sent by the content type application/json, from the request body

answered Feb 15 '19 at 14:47

ZIADIA Oussama

151
2
13

1

Why use one over the other though? – Evan Sevy Feb 15 '19 at 19:17

Why POST using a 'Form' vs using a 'Body'?

1 Answers1