ASP.NET Core POST to MVC - asp.net-core-mvc

Question

I am trying to make a simple POST request from the client to an MVC controller in my ASP.NET Core application. The problem is that even though I have set the ajax call properly (I think), the payload is always submitted as form url encoded and my model on the server ends up null. Here is my setup:
Controller action definition:
[HttpPost]
public async Task<EmailResponse> SendEmail([FromBody] EmailModel model)
{
EmailResponse response = new EmailResponse();
...
return response;
}
Model:
public class EmailModel
{
[JsonProperty("fistName")]
public string FirstName { get; set; }
[JsonProperty("lastName")]
public string LastName { get; set; }
[JsonProperty("email")]
public string Email { get; set; }
[JsonProperty("company")]
public string Company { get; set; }
[JsonProperty("message")]
public string Message { get; set; }
}
Client ajax call:
$.ajax({
type: "POST",
url: "/Home/SendEmail",
contentType: 'application/json; charset=utf-8',
data: model
}).done(function (result) {
...
}).error(function(error) {
...
});
Here is my request:
POST /Home/SendEmail HTTP/1.1
Host: localhost:5000
Connection: keep-alive
Content-Length: 77
Pragma: no-cache
Cache-Control: no-cache
Accept: */*
Origin: http://localhost:5000
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36
Content-Type: application/json; charset=UTF-8
Referer: http://localhost:5000/
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Cookie: _ga=GA1.1.116706601.1460641478
firstName=Joe&lastName=Doe&email=test%40test.com&company=Acme%2C+Inc&message=
Notice the payload at the end of the request. It is not in JSON format even though I am passing a plain JS object and specifying the contentType as application/json. I am guessing this is why my model is always null on the server.
I have been staring at this for couple of hours now and cannot see where the problem is. Any input is greatly appreciated.
Thank you.

Answer 1

Your model is not serialized to json. The object is serialized to default media type - key value pairs - what is known as "application/x-www-form-encoded".
Try to enforce the JSON
$.ajax({
type: "POST",
url: "/Home/SendEmail",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(model) //notice the JSON.stringify call
}).done(function (result) {
...
}).error(function(error) {
...
});