title: Ajax call not hitting controller action
body: <p>I am trying to send a <code>FormCollection</code> to an action in my controller but the action is never being hit.</p>
  
  <p>Form:</p>
  
  <pre><code>&lt;form class="form-horizontal" role="form" id="TestForm" onsubmit="return false"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;div class="form-group"&gt;
              &lt;input type="text" name="Blah1" /&gt;
              &lt;input type="text" name="Blah2" /&gt;
          &lt;/div&gt;
          &lt;input id="SubmitButton" type="submit" value="Submit" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>jQuery/Ajax:</p>
  
  <pre><code>$(document).ready(function () {
      $("#SubmitButton").click(function () {
          var form = $("#TestForm").serialize();
  
  
          $.ajax({
              url: "/Calculator/Post",
              type: "POST",
              data: form,
              dataType: 'json',
              success: function () {
                  alert("Success");
              },
              error: function () {
                  alert("Error");
              }
          });
      });
  });
  </code></pre>
  
  <p>Controller Action:</p>
  
  <pre><code>[HttpPost]
  public JsonResult Post(FormCollection form)
  {
      return Json(new { success = true }, JsonRequestBehavior.AllowGet);
  }
  </code></pre>
  
  <p>The only thing that happens is the browser alerts the error message. Am I missing something that is causing the action to never be hit?</p>