title: ASP.NET Core POST to MVC
body: <p>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:</p>
  
  <p>Controller action definition:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>[HttpPost]
  public async Task&lt;EmailResponse&gt; SendEmail([FromBody] EmailModel model)
  {
  EmailResponse response = new EmailResponse();
  
  ...
  
  return response;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Model:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>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; }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Client ajax call:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>$.ajax({
    type: "POST",
    url: "/Home/SendEmail",
    contentType: 'application/json; charset=utf-8',
    data: model
  }).done(function (result) {
     ...
  }).error(function(error) {
     ...
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is my request:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>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&amp;lastName=Doe&amp;email=test%40test.com&amp;company=Acme%2C+Inc&amp;message=</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>
  
  <p>I have been staring at this for couple of hours now and cannot see where the problem is.  Any input is greatly appreciated.</p>
  
  <p>Thank you.</p>