title: Posting form data to a controller method using Ajax
body: <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>