Angular 2 http.post is not sending parameters as null in Dot.Net Core

Question

I am trying to implement a simple form with Angular 2 and .Net Core.

My .Net Core controller is like this-

[HttpPost("[action]")]
public async Task<IActionResult> Add(string name, string dob)
{
    Profile profileToSave = new Profile
                                {
                                    Name = name,
                                    DateOfBirth = DateTime.Now
                                };
    _context.Profile.Add(profileToSave);
    await _context.SaveChangesAsync();
    return Ok(profileToSave);
}

It is working perfectly like this (with Postman)-

I am trying to use this API in Angular 2 Component like this-

public addProfileSubmit(event,name,dob): void
{
    event.preventDefault();

    var data: {
        name: string;
        dob: string;
    } = {
            name: name,
            dob: dob
        };

    console.log(data);

    let opts: RequestOptions = new RequestOptions();
    opts.method = RequestMethod.Post;
    opts.headers = new Headers({ 'Content-Type': 'application/json' });

    this.http.post(this._addProfileUrl, JSON.stringify(data), opts)
        .subscribe(res => {
            alert("Profile Added Successfully");
            //this.router.navigate(['./SomewhereElse']);

            console.log(res);

            this.reloadAllData();
            this.hideAddProfileModal();
        },
        (err) => {
            console.log(err);
            alert("An Error Occured !!");
        }
    );
}

By this, I am getting a request like this (from Chrome Developer Tool)-

So, I am creating a request with request payload, not Form Data.

I need to create the request with form data.

Can anyone please help to create a proper post request with Angular 2?

Thanks in advance for helping.

Answer 1

I am not sure about .Net Core, but in ordinary ASP.NET binder won't map HTTP post to parameters, but instead you will need this:

class MyModel
{
   public string Name {get;set;} 
   public string Dob {get;set;}
}

public async Task<IActionResult> Add(MyModel input)

It can be it's the same behavior in the Core. So if you create a special model, the binder will map you application/json body just fine.

Alternatively there was [FromBody] attribute that you can use on each of the parameters. You can check if something similar exists in Core.

P.S. Some details here.

Answer 2

Try to check after setting Content-Type to multipart/form-data in your RequestOptions same as below :

let opts: RequestOptions = new RequestOptions();
opts.method = RequestMethod.Post;
opts.headers = new Headers({ 'Content-Type': 'multipart/form-data' });

Answer 3

I have solved it like this in Angular 2-

let urlSearchParams = new URLSearchParams();
urlSearchParams.append('name', name);
urlSearchParams.append('dob', dob);
let body = urlSearchParams.toString();

let opts: RequestOptions = new RequestOptions();
opts.method = RequestMethod.Post;
opts.headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' });

this.http.post(this._addProfileUrl, body, opts)
    .subscribe(res => {
       .................
       .................
    }
);