Angular 2 - web api : not get the posted data at api - post

Question

From the page i am sending data:
register() {
this.loading = true;
this.Register = { firstName: 'aa', lastName: 'aa', email: 'aa', password: 'aa', cpassword: 'aa', gender: "male", dob: '2017-05-02' };
this.userService.create(this.Register)
.subscribe(
data => {
alert("aa");
},
error => {
// this.alertService.error(error);
this.loading = false;
});
}
I posted my data from Angular 2 service code is as below:
create(UserRegister: UserRegister) {
return this.http.post('http://localhost:53625/api/UserLoginAPI/InsertUser', UserRegister, this.jwt()).map((response: Response) => response.json());
}
private jwt() {
let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' });
return new RequestOptions({ headers: headers });
}
for this i write code in the api is as below:
[HttpPost]
public IHttpActionResult InsertUser(UserRegisterModel UserRegister)
{
int returnval = 0;
returnval = objUserLoginBAL.InsertUser(objUserRegisterModel);
return Json(returnval);
}
i get the call at api side but my object not get any value. that is shown in image:

Answer 1

I think the issue is your header construction. Try change this:
'Content-Type': 'application/x-www-form-urlencoded'
to this:
'Content-Type': 'application/json'
Also introduce a field for cpassword in UserRegisterModel.

Answer 2

Try below:
create(UserRegister: UserRegister) {
return this.http.post('http://localhost:53625/api/UserLoginAPI/InsertUser', UserRegister, this.jwt(UserRegister)).map((response: Response) => response.json());
}
private jwt(UserRegister: UserRegister) {
let _body = JSON.stringify(UserRegister);
let headers = new Headers({ 'Content-Type': 'application/json;charset=utf-8' });
return new RequestOptions({
headers: headers,
body: _body });
}

Answer 3

Your initial page should look like this: Notice I removed the cpassword as it's not in your API Model
register() {
this.loading = true;
this.Register = {
dob: '2017-05-02'
email: 'aa',
firstName: 'aa',
gender: "male",
lastName: 'aa',
password: 'aa',
};
this.userService.create(this.Register)
.subscribe((data:any) => {
alert("aa");
},(error:any) => {
// this.alertService.error(error);
this.loading = false;
});
}
Your Service: I cleaned up the jwt() function.
import { Http, Response, Headers, RequestOptionsArgs} from '#angular/http';
create(userRegister: UserRegister) {
let url:string = 'http://localhost:53625/api/UserLoginAPI/InsertUser';
return this.http.post(url, userRegister, this.jwt())
.map((res:Response) => res.json());
}
private jwt():RequestOptionsArgs {
let headers:Headers = new headers();
headers.append('Content-Type', 'application/json');
let options:RequestOptionsArgs = new RequestOptions();
options.headers = headers;
return options;
}