Posting form data to a controller method using Ajax
<p><strong>THE PROBLEM</strong></p>

<p>I want to post form data to a controller asynchronously using AJAX. Here's a simplified view of my JavaScript:</p>

<pre><code>function SendForm() {
  var formData = new FormData();
  formData.append('value1', 'hello');
  formData.append('value2', 'world');
  var xhr = new XMLHttpRequest();
  xhr.upload.onload = function() {
    // stuff that happens on the callback
  };
  xhr.open('POST', 'http://server/controller/SomeAction', true);
  xhr.setRequestHeader('Content-Type', 'multipart/form-data');
  xhr.send(formData);
}
</code></pre>

<p>The problem begins on the server side where all the method parameters are null.</p>

<pre><code>[HttpPost]
public ContentResult SomeAction(string value1, string value2)
{
  if(String.IsNullOrEmpty(value1) || String.IsNullOrEmpty(value2)) { throw new Exception("World not found."); }
  return Content("something");
}
</code></pre>

<p><strong>THE QUESTION</strong></p>

<p>My question is, why are all the method parameters null?</p>

<p><strong>EXTRA RESEARCH</strong></p>

<p>I've looked inside the request stream, and I can see from the length that there is content there, but for whatever reason MVC has failed to match the parameters I specified in the FormData object to the parameters in the methed in the controller.</p>

<p><strong>WHY AM I DOING THIS?</strong></p>

<p>Yes, I want to POST the data. I've simplified the example, but I want to post more data than can be placed on a URL, so a REST method (passing the data on the querystring) is not acceptable for this solution.</p>